map-circle-control
Draggable circle to be used with map renderer. Click here to see the demo page.
Install
$ npm install --save map-circle-controlUsage in standard container
const makeCircle = require('map-circle-control');
let circle = makeCircle({
container: document.querySelector('.map'), // dom element to which circle will be added
center: [ 250, 200 ], // offset in the container
radius: 175 // radius in pixels
});
// `radius-changed` and `center-changed` events are supported
circle.on('radius-changed', function() {
console.log('New radius:', circle.radius);
});
circle.on('center-changed', function() {
console.log('New center:', circle.center);
});
// `radius` and `center` can be used to move and/or resize the circle
circle.radius = 120;
circle.center = [10, 15];
Usage with mapbox-gl
Circle implements IControl and thus can be used with mapbox-gl or any other compatible map.
Cirle is using getContainer, project, and unproject methods only.
let map = new mapboxgl.Map(/* options */);
const makeCircle = require('map-circle-control');
let circle = makeCircle({
center: [ 250, 200 ], // offset in the container
radius: 175 // radius in pixels
});
// display circle on the map
map.add(circle);
// `radius-changed` and `center-changed` events are supported
circle.on('radius-changed', function() {
console.log('New radius in meters:', circle.geoRadius);
});
circle.on('center-changed', function() {
console.log('New center as [longiturde, latitude]:', circle.geoCenter);
});
// `radius` and `center` can be used to move and/or resize the circle
circle.geoRadius = 1200; // 1.2 km
circle.geoCenter = [0.1278, 51.5074]; // LondonLicense
MIT © Damian Krzeminski
