mapbox-gl-circle
Advanced tools
This project uses Turf.js to create a google.maps.Circle replacement, as a Mapbox GL JS compatible GeoJSON object.
Allowing the developer to define a circle using center coordinates and radius (in meters). And, optionally, enabling
interactive editing via draggable center/radius handles. Just like the Google original!
Include mapbox-gl-circle.min.js in
the <head> of your HTML file to add the MapboxCircle object to global scope:
<script src='https://npmcdn.com/mapbox-gl-circle/dist/mapbox-gl-circle.min.js'></script>
Or even better, fashionably importing it using a module bundler:
npm install --save mapbox-gl-circle
const MapboxCircle = require('mapbox-gl-circle');
// or "import MapboxCircle from 'mapbox-gl-circle';"
A google.maps.Circle replacement for Mapbox GL JS, rendering a "spherical cap" on top of the world.
Parameters
centerradiusoptionsExamples
var myCircle = new MapboxCircle({lat: 39.984, lng: -75.343}, 25000, {
editable: true,
minRadius: 1500,
fillColor: '#29AB87'
}).addTo(myMapboxGlMap);
myCircle.on('centerchanged', function (circleObj) {
console.log('New center:', circleObj.getCenter());
});
myCircle.once('radiuschanged', function (circleObj) {
console.log('New radius (once!):', circleObj.getRadius());
});
myCircle.on('click', function (mapMouseEvent) {
console.log('Click:', mapMouseEvent.point);
});
myCircle.on('contextmenu', function (mapMouseEvent) {
console.log('Right-click:', mapMouseEvent.lngLat);
});
Parameters
center ({lat: number, lng: number} | [number, number]) Circle center as an object or [lng, lat] coordinatesradius number Meter radiusoptions Object?
options.editable boolean? Enable handles for changing center and radius (optional, default false)options.minRadius number? Minimum radius on user interaction (optional, default 10)options.maxRadius number? Maximum radius on user interaction (optional, default 1100000)options.strokeColor string? Stroke color (optional, default '#000000')options.strokeWeight number? Stroke weight (optional, default 0.5)options.strokeOpacity number? Stroke opacity (optional, default 0.75)options.fillColor string? Fill color (optional, default '#FB6A4A')options.fillOpacity number? Fill opacity (optional, default 0.25)options.refineStroke boolean? Adjust circle polygon precision based on radius and zoom
(i.e. prettier circles at the expense of performance) (optional, default false)options.properties Object? Property metadata for Mapbox GL JS circle object (optional, default {})Subscribe to circle event.
Parameters
event string Event name; click, contextmenu, centerchanged or radiuschangedfn Function Event handler, invoked with the target circle as first argument on
'centerchanged' and 'radiuschanged', or a MapMouseEvent on 'click' and 'contextmenu' eventsonlyOnce boolean? Remove handler after first call (optional, default false)Returns MapboxCircle
Alias for registering event listener with onlyOnce=true, see #on.
Parameters
Returns MapboxCircle
Unsubscribe to circle event.
Parameters
Returns MapboxCircle
Parameters
map mapboxgl.Map Target map for adding and initializing circle Mapbox GL layers/data/listeners.before string? Layer ID to insert the circle layers before; explicitly pass null to
get the circle assets appended at the end of map-layers array (optional, default 'waterway-label')Returns MapboxCircle
Remove source data, layers and listeners from map.
Returns MapboxCircle
Returns {lat: number, lng: number} Circle center position
Parameters
Returns MapboxCircle
Returns number Current radius, in meters
Parameters
newRadius number Meter radiusReturns MapboxCircle
Returns {sw: {lat: number, lng: number}, ne: {lat: number, lng: number}} Southwestern/northeastern bounds
npm install
npm start
npm run browserify
npm pack
npm run docs
optionalDependencies removed from package.json, making this package easier to depend on (#82)mapbox-gl>0.40.1 (#73)waterway-label layermblomdahl/mapbox-gl-circle -> smithmicro/mapbox-gl-circlebefore argument to MapboxCircle.addTo
(#50)minRadius and maxRadius options to MapboxCircle constructorindex.htmlclick and contextmenu (right-click) eventscenterchanged/radiuschanged on user modificationeditable: false when creating a circle is now respected, along with any styling optionsPublishing releases as @latest and pre-releases as @next to https://www.npmjs.com/package/mapbox-gl-circle
CI update for Docker image, now publishes releases and pre-releases to SMSI internal Docker registry, http://docker.smithmicro.io/repository/mapbox-gl-circle
package-lock.jsonpackage.json scriptscircle.js -> lib/main.js and index.js -> example/index.jsexample/index.js into MapboxCircle class, obsoleted index.html with
DOM updates in example/index.jsUpdated circle from Mapbox bl.ocks.org sample.
Now provides handles for modifying position/radius. Seems to also do better performance wise.
The initial 1.0.0 release is a modified version of the Draw-Circle.zip archive we got from Mapbox.
Live demo of the original can be found here: https://www.mapbox.com/labs/draw-circle/
FAQs
A google.maps.Circle replacement for Mapbox GL JS API
The npm package mapbox-gl-circle receives a total of 757 weekly downloads. As such, mapbox-gl-circle popularity was classified as not popular.
We found that mapbox-gl-circle demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
OpenAI rotated macOS signing certificates after a malicious Axios package reached its CI pipeline in a broader software supply chain attack.
Security News
Open source is under attack because of how much value it creates. It has been the foundation of every major software innovation for the last three decades. This is not the time to walk away from it.
Security News
Socket CEO Feross Aboukhadijeh breaks down how North Korea hijacked Axios and what it means for the future of software supply chain security.