Leaflet JS: Resizing a map to keep a circle diameter inside it

I’ve been working on creating a UI to make searching for the football stadiums that I wrote about last week a bit easier and I thought I’d give Leaflet JS a try.

Leaflet is a Javascript library which was recommended to me by Jason Neylon) and can be used as a wrapper around Open Street Map.

I started by creating a simple form where you could fill in a lat/long and distance and it would centre the map on that lat/long and show you a list of the stadiums within that diameter next to the map.

Having done that I wanted to draw the diameter onto the map and then show the location of the stadiums which fitted inside the circle.

I had the following code to centre the map and draw a circle:

  var distance = 10;
  $("#inputDistance").val(distance);
  var latLong=[51.505, -0.11398315429687499];
  $("#inputLatLong").val(latLong)
 
  var map = L.map('map').setView(latLong,11);
  var layer = L.tileLayer('http://{s}.tile.cloudmade.com/e7b61e61295a44a5b319ca0bd3150890/997/256/{z}/{x}/{y}.png', { maxZoom: 18 });
  layer.addTo(map);
 
  var currentDiameter = L.circle(latLong, distance * 1000);
  currentDiameter.addTo(map);
 
  var currentPositionMarker = L.marker([latLong[0], latLong[1]]);
  currentPositionMarker.addTo(map);

which creates this map:

I wanted to be able to change the diameter of the circle from the form and have it pick up more stadiums which I did with the following code:

  $("#inputDistance").change(function() {	
    map.removeLayer(currentDiameter);
    currentDiameter = L.circle(currentPositionMarker.getLatLng(), $("#inputDistance").val() * 1000);
    currentDiameter.addTo(map);
  });

I updated the diameter to be 16km and the map looked like this:

It just about fits inside the map but setting it to anything higher means that the area of the diameter falls outside of the visible map which is annoying.

I wanted to be able to resize the map when the circle changed in size and after a bit of browsing of the Leaflet code I came across a function called ‘fitBounds’ which lets us achieve this. I changed the code like so:

  $("#inputDistance").change(function() {	
    map.removeLayer(currentDiameter);
    currentDiameter = L.circle(currentPositionMarker.getLatLng(), $("#inputDistance").val() * 1000);
    currentDiameter.addTo(map);
    map.fitBounds(currentDiameter.getBounds());
  });

Now if I change the distance the map resizes too:

Much better!

The full code to do this reads like so:

$(document).ready(function() {		
  var distance = 10;
  $("#inputDistance").val(distance);
  var latLong=[51.505, -0.11398315429687499];
  $("#inputLatLong").val(latLong)
 
  var map = L.map('map').setView(latLong,11);
  var layer = L.tileLayer('http://{s}.tile.cloudmade.com/e7b61e61295a44a5b319ca0bd3150890/997/256/{z}/{x}/{y}.png', { maxZoom: 18 });
  layer.addTo(map);
 
  var currentDiameter = L.circle(latLong, distance * 1000);
  currentDiameter.addTo(map);
 
  var currentPositionMarker = L.marker([latLong[0], latLong[1]]);
  currentPositionMarker.addTo(map);
 
  $("#inputDistance").change(function() {	
    map.removeLayer(currentDiameter);
    currentDiameter = L.circle(currentPositionMarker.getLatLng(), $("#inputDistance").val() * 1000);
    currentDiameter.addTo(map);
    map.fitBounds(currentDiameter.getBounds());
  }); 
});

The code for this is all on github although I’ve refactored it a bit now so it doesn’t look exactly like this. I tried to put it on jsfiddle as well but it didn’t seem to work very well so screenshots it is!