0

I am trying to add a range slider to zoom in and out of a Mapbox map to a radius in miles. I have the map and the slider working and I can sort of zoom in and out of the map by getting the bounds of the circle after drawing it. It works but I can not remove the layer with the old circle (radius) so it keeps drawing lots!

Firstly and I'm doing this correctly to sort of show map within mile radius and secondly why cannot I remove the blue circle. Also, is there a way without removing it immediately after getting bounds without it showing on the map?

After setting up the map, I set a circle with a given point and radius in meters.

var newValue = 5; // That's the new value of the slider //
var meters = 1609.34; // Meters in a mile //
var dist = newValue*meters;

var circle = L.circle([52.462610, -1.588580], dist).addTo(map);

map.fitBounds(circle.getBounds()); // Fit map to the radius

I then use this when the slider has changed value like

var dist = newValue*meters;

var circle = new L.circle([52.462610, -1.588580], dist).addTo(map);

map.fitBounds(circle.getBounds());
map.removeLayer(circle);  // not removing

I have only included Leaflet in the refs because lots of Mapbox information refers to it.

Update: I have it working but cannot really be sure it's working correctly as it stops zooming out after a certain amount?

I am using

var circle = new L.circle([52.462610, -1.588580], dist);
map.addLayer(circle);

var setdist = circle.getBounds();
console.log(setdist);
map.fitBounds(circle.getBounds())  

  
map.removeLayer(circle); 
1

Instead of using L.circle to get bounds (where circle has actually to be drawn on the map), I would recommend using turf.js library for that.

You can first use turf.buffer method to get desired circle around point, and then turf.bbox method to get bounding box of circle.

Function to fit map to desired circle could then look something like this:

function fitToCircle(point, radius) {
  var buffered = turf.buffer(turf.point(center), radius, {units: 'meters'});
  var bbox = turf.bbox(buffered);
  map.fitBounds([[bbox[0], bbox[1]], [bbox[2], bbox[3]]]);
}

You would then fit map to circle with the call:

var center = [52.462610, -1.588580];

var newValue = 5; // That's the new value of the slider //
var meters = 1609.34; // Meters in a mile //
var dist = newValue * meters;

fitToCircle(center, dist);
6
  • Thanks, i will try it, the way it works at the minute is ok but the zoom doesnt always change and when the circle is on it does not always fit exactly, will it work this way? Thanks
    – JulesUK
    Jan 12 at 21:16
  • Circle cannot always fit exactly, since Mapbox Leaflet does not have fractional zoom levels to make this happen. Since only whole number zoom levels are available, the biggest zoom to contain circle is then selected.
    – TomazicM
    Jan 12 at 21:41
  • Yes thank you, your way works with pretty much identical results, great way of doing it without adding and removing layers, thank you.
    – JulesUK
    Jan 12 at 21:49
  • Also how accurate is that in miles I am calculating, because it does not seem that accurate?
    – JulesUK
    Jan 12 at 22:05
  • It should be accurate. Can you give an example o such inaccuracy (center, distance)?
    – TomazicM
    Jan 14 at 8:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.