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
centerradiusoptions
Examples
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]coordinatesradiusnumber Meter radiusoptionsObject?options.editableboolean? Enable handles for changing center and radius (optional, defaultfalse)options.minRadiusnumber? Minimum radius on user interaction (optional, default10)options.maxRadiusnumber? Maximum radius on user interaction (optional, default1100000)options.strokeColorstring? Stroke color (optional, default'#000000')options.strokeWeightnumber? Stroke weight (optional, default0.5)options.strokeOpacitynumber? Stroke opacity (optional, default0.75)options.fillColorstring? Fill color (optional, default'#FB6A4A')options.fillOpacitynumber? Fill opacity (optional, default0.25)options.refineStrokeboolean? Adjust circle polygon precision based on radius and zoom (i.e. prettier circles at the expense of performance) (optional, defaultfalse)options.propertiesObject? Property metadata for Mapbox GL JS circle object (optional, default{})
Subscribe to circle event.
Parameters
eventstring Event name;click,contextmenu,centerchangedorradiuschangedfnFunction Event handler, invoked with the target circle as first argument on 'centerchanged' and 'radiuschanged', or a MapMouseEvent on 'click' and 'contextmenu' eventsonlyOnceboolean? Remove handler after first call (optional, defaultfalse)
Returns MapboxCircle
Alias for registering event listener with onlyOnce=true, see #on.
Parameters
Returns MapboxCircle
Unsubscribe to circle event.
Parameters
Returns MapboxCircle
Parameters
mapmapboxgl.Map Target map for adding and initializing circle Mapbox GL layers/data/listeners.
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
newRadiusnumber Meter radius
Returns 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
- Fix bug where the circle would always show a horizontal resize cursor on radius handles, irrespective of position (top/bottom/right/left)
- Bug fixes with respect to cursor style when hovering over editable-and-clickable circles SPFAM-1293
- Added support for passing
minRadiusandmaxRadiusoptions to MapboxCircle constructor
- Bug fix for handling map.setStyle updates
- Added package version property to circle class
- README updated with Getting Started section
- Improved usage examples
- Bug fixes:
- Creating circle instances with bundler import failed
- Docker build serving the wrong
index.html
- Performance and stability fixes
- MapboxCircle now supports subscribing to
clickandcontextmenu(right-click) events
- Added setters and getters for center/radius
- MapboxCircle now allows subscribing to events and fires
centerchanged/radiuschangedon user modification - Improved API documentation + moved it into README / Usage
- More bug fixes:
- The circle can now successfully remove itself from the map
- Multiple circles may be added to the map and edited without causing too much conflict
- Initial center/radius drag interaction no longer fails
- Bug fixes; passing
editable: falsewhen creating a circle is now respected, along with any styling options
-
Publishing releases as
@latestand pre-releases as@nextto 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
- CI updates, now integrates with GitHub and builds reliably (with unique version names) under http://jenkins.smithmicro.io:8080/job/mapbox-gl-circle-multibranch/
- Added first-draft Jenkinsfile and started including
package-lock.json - Revised
package.jsonscripts
- Removed dead code and unused methods
- Restructured library, moving
circle.js -> lib/main.jsandindex.js -> example/index.js - Refactored helper functions from
example/index.jsinto MapboxCircle class, obsoleted index.html with DOM updates in example/index.js - Refactor into MapboxCircle into new-style ES6 class
- Made MapboxCircle.animate() and a bunch of properties private, added overridable defaults for fillColor/fillOpacity
- Updated ESLint config to respect browser/commonjs built-ins and added docs to MapboxCircle in order to align with ESLint JSDoc requirements
- Updated project details in package.json and committed first-draft API documentation
Updated 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/