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 ...
- 431
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 ...
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:/...
- 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....
- 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 =...
- 266
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 ...
- 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 ...
- 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
...
- 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" ...
- 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 ...
- 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 )....
- 3,075
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 ...
- 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 ...
- 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;
...
- 459
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 ...
- 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....
- 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 ...
- 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 ...
- 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 ...
- 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 ...
- 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....
- 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())
});
- 131
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 ...
- 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 ...
- 4,516
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. ...
- 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 ...
- 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 ...
- 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('...
- 119
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 ...
- 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();
- 21
Only top scored, non community-wiki answers of a minimum length are eligible