mgl-circle-radius
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
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
mapbox-gl-circle fork
We found that mgl-circle-radius demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.