Thursday, January 23, 2014

Add and Remove Leaflet Circle on Click

Similar to the popup example in the Leaflet tutorial, you might want to allow a user to add a circle centered on the point they click.

After defining your map, you first need to declare the variable you'll be using:

  var clickCircle;

While popups automatically disappear on the next click, circles do not. The following code removes the former circle from the leaflet map before drawing the new circle:

  function onMapClick(e) {
    if (clickCircle != undefined) {
      map.removeLayer(clickCircle);
    };

Next, we want our function to draw the new circle (NB: "1609 * 3" is the radius of the circle. This makes the radius equal 3 miles):

    clickCircle = L.circle(e.latlng, 1609 * 3, {
      color: '#f07300',
      fillOpacity: 0,
      opacity: 0.5
    }).addTo(map);
  }


And finally, we need to add an event listener so that the function will be run when a user clicks on the map:


  map.on('click', onMapClick);


The full code is available in a gist.

References



No comments:

Post a Comment