Mapbox-gl-circle-ts NPM

Spherical-Cap "Native Circle" for Mapbox GL JS in Typescript

This project uses Turf.js to create a google.maps.Circle replacement, as a Mapbox GL JS compatible GeoJSON object for Typescript. 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!

Getting Started

npm install --save mapbox-gl-circle

const MapboxCircle = require('mapbox-gl-circle');
// or "import MapboxCircle from 'mapbox-gl-circle';"

Usage

MapboxCircle

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);
    });

constructor

Parameters

center ({lat: number, lng: number} | [number, number]) Circle center as an object or [lng, lat] coordinates
radius number Meter radius
options 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 {})

on

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' events
onlyOnce boolean? Remove handler after first call (optional, default false)

Returns MapboxCircle

once

Alias for registering event listener with onlyOnce=true, see #on.

Parameters

event string Event name
fn Function Event handler

Returns MapboxCircle

off

Unsubscribe to circle event.

Parameters

event string Event name
fn Function Handler to be removed

Returns MapboxCircle

addTo

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