14 votes

Mapbox Error: Style is not done loading

Take the L.marker([ln, lt], {icon: marker}).addTo(map); line and move it into the callback function for map.on('load') (one line directly above where you add the L.geoJson object). This will prevent ...
user avatar
12 votes
Accepted

How to add layers and update layer control dynamically : leaflet

There are public methods in L.Control.Layers control to add base layers and overlays dinamically (see full reference): addBaseLayer(layer, name) to add new base layer addOverlay(layer, name) to add ...
user avatar
11 votes
Accepted

How to enable a Leaflet Draw tool programatically

Simply trigger a "click" event on the "Draw a polygon" toolbar button (it has a specific class "leaflet-draw-draw-polygon"): document.querySelector(".leaflet-draw-draw-polygon").click(); Demo: http:/...
user avatar
  • 6,853
7 votes

Calculating bounding box of given set of coordinates from Leaflet Draw?

For your use case (GeoJSON), the accepted answer is a good approach. For anyone else with an arbitrary collection of latlongs that wants to calculate the bounds, you can use leaflets handy L....
user avatar
  • 665
6 votes
Accepted

Leaflet snap circle draw to marker

Did you find a solution? I've created a function which does this for me. function mapToPosition(position){ lon = position.coords.longitude; lat = position.coords.latitude; var marker =...
user avatar
6 votes

Calculating bounding box of given set of coordinates from Leaflet Draw?

That particular json is already a box - so the bounding box will be identical - but here is a general approach this assumes you have a leaflet map object named 'map' - although not necessary to get ...
user avatar
  • 6,738
5 votes
Accepted

Selecting layer by default using Leaflet?

Just add the Layergroup to your map with the addTo-method. layerGroup.addTo(map); In your code-example this could be done here: // New layergroup, note it's not added to the map yet var ...
user avatar
  • 6,350
5 votes

ipyleaflet draws?

Going from the Draw Control example you can add a callback to the Draw Control that will get passed the GeoJSON from the feature: from ipyleaflet import Map, basemaps, basemap_to_tiles, DrawControl ...
user avatar
  • 15.3k
4 votes

Leaflet Draw - Get Circle extent

Leaflet draws a circle using SVG. For example: new L.Circle([3,-60], 1000000).addTo(map) Results in the following html: <path stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" ...
user avatar
  • 6,738
4 votes

How to edit an existing layer using leaflet?

If my understanding is correct, the root cause of the issue resides in the fact that the layers you want to make editable through Leaflet.draw plugin are nested within a Layer Group (e.g. if they are ...
user avatar
  • 6,853
4 votes
Accepted

How to edit an existing layer using leaflet?

Thanks to the help of @user1919 who pointed me to the solution proposed in Stackoverflow, I could edit the existing layer with the plugin Leaflet.draw without customizing it ( at least not it's code )....
user avatar
4 votes

Is it possible to use Leaflet.draw on a map in R?

In short, Yes you can. You can find some good examples of tutorials as well as reading up on "Leaflet for R" using RStudio here, offering the following features: Interactive panning/zooming Compose ...
user avatar
  • 11.9k
4 votes
Accepted

Leaflet.draw: add attributes and save to file

As for populating the GeoJSON output by drawnItems.toGeoJSON(), you have to explicitly add data to your layers as type and within properties. See SO post: update properties of geojson to use it with ...
user avatar
  • 6,853
4 votes
Accepted

Options for styling Leaflet Draw line segements

You can use this function: function changeColor(color){ drawControl.options.draw.polyline.shapeOptions.color = color; drawControl.options.draw.polygon.shapeOptions.color = color; ...
user avatar
3 votes
Accepted

Put LeafletJS geoJSON's into a MySQL database through PHP

Yes. You have to send your data from the client to the server and let server-code handle the database-insert. You should look into HTTP POST through jQuery or other libraries as a way to ...
user avatar
  • 4,251
3 votes
Accepted

Can we set the latlng start point : leaflet

First, read the source code for L.CRS.Simple, particularly, this line: transformation: toTransformation(1, 0, -1, 0), That is a factory method to instantiate an affine transformation from L....
user avatar
  • 9,380
3 votes
Accepted

Using Mapbox (LeafletJS), how do I edit imported shapes from GeoJSON?

I never actually was able to use L.mapbox.featureLayer for this. I ended up having to use Leaflet's L.geoJson, adding featureLayer to map instead of the featureGroup, and adding the layer to the ...
user avatar
  • 173
3 votes
Accepted

Applying css on polylines using Leaflet?

My understanding of Leaflet is that it is built to cover about 90% of use cases and for simplicity and compactness. Unfortunately I don't think your usecase is covered in that 90%. This is the API for ...
user avatar
  • 6,392
3 votes

Calculating bounding box of given set of coordinates from Leaflet Draw?

A very simple way of getting the bounds of any GeoJSON compliant data with Leaflet is to transform it into an L.GeoJSON layer group and to use the getBounds() method. This returns an L.LatLngBounds ...
user avatar
  • 6,853
3 votes
Accepted

Leaflet Tooltip bug when added leaflet-draw

For Leaflet 1.0, you have to use Leaflet.draw leaflet-master branch, as mentioned on the repo home page: Support for Leaflet 1.0 is in development at the leaflet-master branch. Unfortunately, even ...
user avatar
  • 6,853
3 votes

Displaying bounding box array on leaflet map

I'm not really sure about the array of bounding box coordinates in the example - the second and fourth points are identical, meaning this will never make a box. In any case, have you looked at L....
user avatar
  • 6,738
3 votes

Get the lat/lng values of lines, polygons drawn by Leaflet drawing tools

map.on(L.Draw.Event.CREATED, function (e) { var layer = e.layer; drawnItems.addLayer(layer); console.log(layer.getLatLngs()) });
user avatar
3 votes
Accepted

Leaflet popup disappear or moved over drawn polygon

Finally, I solved it. So I think it's fair if I share it: map.on("draw:created", function (e) { var layer = e.layer; drawControlFull.remove(); drawControlEditOnly.addTo(map); var ...
user avatar
  • 1,519
3 votes
Accepted

Allowing users to add data to marker that they create on Leaflet map?

You need to research this better, this question has been asked before. You have two issues, when someone visits your site the data is downloaded to your browser, any edits would be client side and not ...
user avatar
3 votes
Accepted

Prevent user from drawing a feature with Leaflet.draw

Since there seems to be no official hook to implement this, one has to resort to hack. L.Draw.Marker class has internal _onClick method which is called when user clicks with mouse to create marker. ...
user avatar
  • 17.1k
3 votes
Accepted

Cutting holes in custom polygon made with Leaflet.Draw

One possibility of doing this would be with the help of turf.js library. When adding newly drawn polygon, algorithm for detecting and creating possible holes goes like this: Convert newly created ...
user avatar
  • 17.1k
2 votes
Accepted

Is it possible to edit draw panel in Leaflet Draw?

I don't see any api methods that allow multiple buttons for the same feature type on one draw control. If you need multiple buttons on the same control, then I expect you'll have to modify the source ...
user avatar
  • 6,738
2 votes

Putting marker and save location in DB for Leaflet.draw?

You need to add event for draw:created. In this event, get the added layer, its type and read the geometry according to the layer type, type is marker in your case. Here is the basic code: map.on('...
user avatar
2 votes
Accepted

how to customise toolbar in Leaflet.Draw plugin?

drawControl = new L.Control.Draw({ draw : { position : 'topleft', polyline : false, rectangle : false, circle : false, polygon: { // polygon ...
user avatar
  • 6,738
2 votes

How to update data in Leaflet Control?

Little update : leaflet documentation is not updated, but removeFrom() function does not exist anymore (see this post). You have to use : controller.remove();
user avatar
  • 21

Only top scored, non community-wiki answers of a minimum length are eligible