CODEWITHSUNDEEP
mapbox-gl-js
james
james

Reputation: 570

mapbox-gl-js create a circle around a lat/lng?

I need to create a circle around a point where a user clicks. How would I do this? Every tutorial shows extracting a circle from a geojson source and not creating one. Need to be able to edit the radius as well.

Upvotes: 2

Views: 6294

Answers (1)

Andi-lo
Andi-lo

Reputation: 2312

Did you try something yourself? Following the mapbox examples you should be able to get an idea of how to build something like that.

You would need to do 3 things:

  • Create a source that holds the data
  • Create a layer of type "circle" for displaying the data as circles
  • On every click of the user, extract the "latitude, longitude" and add a point to your data list. Then display all of those points as a circle on the map.

This is an example of how I would have coded that: https://jsfiddle.net/andi_lo/495t0dx2/

Hope that helps you out

mapboxgl.accessToken = '####';
var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/light-v9', //stylesheet location
    center: [-74.50, 40], // starting position
    zoom: 9 // starting zoom
});

map.on('load', () => {
  const points = turf.featureCollection([]);
 
  // add data source to hold our data we want to display
  map.addSource('circleData', {
    type: 'geojson',
    data: {
      type: 'FeatureCollection',
      features: [],
    },
  });

  // add a layer that displays the data
  map.addLayer({
    id: 'data',
    type: 'circle',
    source: 'circleData',
    paint: {
      'circle-color': '#00b7bf',
      'circle-radius': 8,
      'circle-stroke-width': 1,
      'circle-stroke-color': '#333',
   },
  });

  // on user click, extract the latitude / longitude, update our data source and display it on our map
  map.on('click', (clickEvent) => {
    const lngLat = new Array(clickEvent.lngLat.lng, clickEvent.lngLat.lat);
    points.features.push(turf.point(lngLat));
    map.getSource('circleData').setData(points);
  });
});
#map {
  height: 500px;
}
<div id="map"></div>

Upvotes: 5

Related Questions