CODEWITHSUNDEEP
javascriptleaflet
QLands
QLands

Reputation: 2586

Leaflet JavaScript Bounding Box Example?

I am totally new to Leaflet JavaScript. Basically I need to program something that:

  1. Allow drawing a bounding box over a map
  2. Get the coordinate of the box
  3. Later on draw the box based on the coordinates
  4. Clear the box

Anya ideas or examples how to do this? Or where to find them?

Thanks

Upvotes: 1

Views: 6836

Answers (1)

Marko Letic
Marko Letic

Reputation: 2550

  1. There's a plugin called Leaflet.draw that adds support for drawing and editing vectors and markers onto Leaflet maps. On this link you will find enough information to implement a simple rectangle that will be your bounding box.
  2. With this piece of code you can get the position of the mouse pointer on the map (you just need to create one handler for the mouse down, and the other on mouse up)

map.on('click', onMapClick); function onMapClick(e) { alert("You clicked the map at " + e.latlng); }

3.Draw the box based on coordinates:

var bounds = [[X, Y], [X, Y]];

// create an orange rectangle
var boundingBox = L.rectangle(bounds, {color: "#ff7800", weight: 1});
map.addLayer(boundingBox);

4. Clear the box:

map.removeLayer(boundingBox);

Upvotes: 3

Related Questions