How to draw multiple circles with different radius in MapBox GL JS?

Question

I get some information from a AJAX and I create a GeoJson looking like

var waypointGeojson = {
  'type': 'FeatureCollection',
  'features': [{
    'type': 'Feature',
    'properties': {
      'id': waypoint.poi_id,
      'name': waypoint.name,
      'iconSize': [100, 100]
    },
    'geometry': {
      'type': 'Point',
      'coordinates': [waypoint.longitude, waypoint.latitude], 
  }, {
    'type': 'Feature',
    'properties': {
      'id': waypoint.poi_id,
      'name': waypoint.name,
      'iconSize': [25,25]
    }, {
    'geometry': {
      'type': 'Point',
      'coordinates': [waypoint.longitude, waypoint.latitude], 
    }, 'type': 'Feature',
    'properties': {
      'id': waypoint.poi_id,
      'name': waypoint.name,
      'iconSize': [35,35]
    },
    'geometry': {
      'type': 'Point',
      'coordinates': [waypoint.longitude, waypoint.latitude], 
    }, 
  ]
};

Then I add the source to the map like this :

map.addSource('waypoints', {
  'type': 'geojson',
  'data': waypointGeojson,
});

Then I loop around the Features to get the data and show the markers on my map.

waypointGeojson.features.forEach(function(marker) {
  var radius = Number(marker.properties.iconSize[0]);
  var latitude = Number(marker.geometry.coordinates[1]);
  var el = document.createElement('div');
  el.className = 'marker';
  el.style.backgroundColor = 'rgba(230, 56, 18, 0.5)' ;
  el.style.width = radius + 'px';
  el.style.height = radius + 'px';

  new mapboxgl.Marker(el)
    .setLngLat(marker.geometry.coordinates)
    .addTo(map);
}

At this step my map looks like : Map at Zoom 15.32

However I want the Circle to be adjusted while I zoom in/zoom out.

For instance, if I zoom in : Map at Zoom 17.32 The circle radius has not been adjusted (obviously!)

If you have any idea how I could do that with MapBox GL JS ?

I did try to use the formula (from here), with no success :

const metersToPixelsAtMaxZoom = (meters, latitude) =>
meters / 0.075 / Math.cos(latitude * Math.PI / 180)

If I use the method described here, then I put the

waypointGeojson.features.forEach(function(marker) {
                    var id = Number(marker.properties.id);
                    var radius = Number(marker.properties.iconSize[0]);
                    var latitude = Number(marker.geometry.coordinates[1])


                    map.addLayer({
                        "id": "circle"+id,
                        "type": "circle",
                        "source": "waypoints",
                        // "layout": {
                        //     "visibility": "none"
                        // },
                        "paint": {
                            "circle-radius": {
                                stops: [
                                  [0, 0],
                                  [20, metersToPixelsAtMaxZoom(radius, latitude)]
                                ],
                                base: 2
                              },
                            "circle-color": "red",
                            "circle-opacity": 0.4
                        }
                    });

                });

I get 3 circles per point see here. This method is good because zoom in/out doesn't alter the size, but how to only have the corresponding circle on my point?

Does this answer your question? [Drawing a circle with the radius in miles/meters with Mapbox GL JS](https://stackoverflow.com/questions/37599561/drawing-a-circle-with-the-radius-in-miles-meters-with-mapbox-gl-js) — Harmenx, Mar 10 '20 at 16:18
Hi Harmenx, I did try to use this method. The problem is that I included the `map.addLayer()` in a forEach `waypointGeojson.features.forEach(function() {})`, thus it draw 3 circles on each point with 3 differents diameters, thus 9 circles in total. — amelie, Mar 11 '20 at 08:48
Hi there, I created a JS Fiddle : https://jsfiddle.net/amelielcz/z0q1e9gc/95/ I want to include a 'get' method in a function (line 66), I did already try to put my `['get', 'radius']` in `["to-number", ['get', 'radius']]`, with no success — amelie, Mar 17 '20 at 18:37
Here is a part of my solution using exponential interpolation : http://jsfiddle.net/amelielcz/31t20mbg/46/ Still need to retrieve the coordinates, because here it is hard coded. If any one has an idea — amelie, Mar 18 '20 at 08:39

How to draw multiple circles with different radius in MapBox GL JS?

0 Answers0