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
center
radius
options
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]
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 radiuschanged
fn
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-circle
before
argument to MapboxCircle.addTo
(#50)minRadius
and maxRadius
options to MapboxCircle constructorindex.html
click
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.json
package.json
scriptscircle.js -> lib/main.js
and index.js -> example/index.js
example/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/