Map-circle-control NPM

map-circle-control

Draggable circle to be used with map renderer. Click here to see the demo page.

Install

$ npm install --save map-circle-control

Usage 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]; // London