I am trying to edit a polygon created using leaflet-draw.
However, I receive the following error every time that I try to edit the polygon. (I dont see those draggable points on the polygon which can be used to resize it)
leaflet.js:formatted:854 Uncaught TypeError: Cannot read property
'lat' of null(…)
If I try to save the polygon without making changes I get the following error
leaflet.draw.js:10 Uncaught TypeError: Cannot read property 'dispose'
of undefined(…)
This is my leaflet edit toolbar code -
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
var drawControl = new L.Control.Draw({
draw: {
position: 'topleft',
polygon: {
allowIntersection: false,
drawError: {
color: '#b00b00',
timeout: 1000
},
showArea: true
},
circle: false,
polyline: false,
rectangle: true,
marker: false,
},
edit: {
edit:true,
featureGroup: drawnItems
}
});
map.addControl(drawControl);
Please help!
I updated leaflet, leaflet-draw and angular packages to the latest version and that fixed the problem.
Related
I am trying to get the layer details of the map which are already overlay on the map. When leaflet draw is created I want to get the layer details (Not the polygon coordinates created by leaflet draw plugin) so that I can use them.
I am able to get the coordinates of drawn polygon but that's not what I want.
var draw_layer = new L.FeatureGroup();
mymap.addLayer(draw_layer);
var drawControlFull = new L.Control.Draw({
draw: {
polygon: {
allowIntersection: false, // Restricts shapes to simple polygons
drawError: {
color: '#e1e100', // Color the shape will turn when intersects
message: '<strong>Oh snap!<strong> you can\'t draw that!' // Message that will show when intersect
},
shapeOptions: {
color: '#97009c'
}
},
// disable toolbar item by setting it to false
polyline: false,
circle: false,
rectangle: false,
marker: false,
circlemarker: false
},
edit: {
featureGroup: draw_layer,
remove: true
}
});
mymap.addControl(drawControlFull);
mymap.on(L.Draw.Event.CREATED, function (e) {
var type = e.layerType, layer = e.layer;
if(type === 'polygon'){
var _ajax_cords = [];
var _coords = layer.getLatLngs()[0];
$.each(_coords,function(ind,val){
var _te_co = {x : val.lat, y : val.lng};
_ajax_cords.push(_te_co);
});
}
//if (type === 'polygon') {layer.bindPopup('A popup!');}draw_layer.addLayer(layer);
});
Well I can get the marker detail as I get lot of posts on that but didn't see a post how to get the polygon details.
Any help on this is much appreciable
First I write a code to create a toolbar with leaflet.draw
var drawPluginOptions = {
position: 'topright',
draw: {
polyline: false,
circle: false, // Turns off this drawing tool
rectangle: false,
marker: false,
polygon: {
allowIntersection: false, // Restricts shapes to simple polygons
showArea: true,
drawError: {
color: '#ffc107', // Color the shape will turn when intersects
},
shapeOptions: {
color: '#057d50'
},
},
},
edit: {
featureGroup: editableLayers, //REQUIRED!!
remove: true,
edit: true,
}
};
var drawControl = new L.Control.Draw(drawPluginOptions);
map.addControl(drawControl);
After that, I localized the messages and titles with L.drawLocal.
I need to recreate the map but it cause error Cannot read property 'error' of undefined
I want to know how use Both of them without any problem
I realized that the reason for this problem is because of L.drawLocal, not map.addControl.
First I checked the error code and "Cannot read property 'error' of undefined" message was related to polyline error. So, I added the errors that I did not need to localize like this answer:
https://stackoverflow.com/a/53401594/2543986
After that, I changed position of L.drawLocal to top of map.addControl
I'm trying to enable snapping (using Leaflet Snap)in a Leaflet application I'm creating. I'm using Leaflet Draw. Existing layers are read in from a database in geojson. I add these to the guideLayers and I add newly created features there too. It's not working. Has anyone successfully been able to create something like this? That is, been able to create a new polygon and snap to existing polygons in leaflet (geojson layers)? Thanks Dan.
Add geojson to guideLayers code:
function renderLta(_ltas,ltaLayerName) {
L.geoJSON([_ltas.geoJson], {
name:_ltas.id,
areaName:_ltas.localThreatAreaName,
areaDescription:_ltas.localThreatAreaDescription,
style: function (feature) {
return _getLtaStyle(1);
},
onEachFeature: function onEachFeature(feature, layer) {
ltaLayerName.addLayer(layer);
guideLayers.push(layer);
layer.on('click', function(e) {
if(selectedFeature) {
selectedFeature.editing.disable();
// Has there been a change? Does the user need to save?
// get layer again and redraw
drawnItems.removeLayer(selectedFeature);
selectedFeature.addTo(map_lta);
}
selectedFeature = e.target;
e.target.editing.enable();
drawnItems.addLayer(e.target);
});
}
});
ltaLayerName.addTo(map);
Add new layer/data to guideLayers code:
map.on(L.Draw.Event.CREATED, function(event) {
var layer = event.layer;
var content = getPopupContent(layer);
if (content !== null) {
layer.bindPopup(content);
}
drawnItems.addLayer(layer);
guideLayers.push(layer);
});
DrawControl Code:
var drawControl = new L.Control.Draw({
edit: {
featureGroup: drawnItems,
poly : {
allowIntersection : false
}
},
draw: {
polyline: false,
polygon : { showArea: true, allowIntersection : false, guideLayers: guideLayers, snapDistance: 500 },
circle: false,
rectangle: false,
marker: false,
circlemarker: false
}
});
map_lta.addControl(drawControl);
drawControl.setDrawingOptions({
polygon: { guideLayers: guideLayers, snapDistance: 50 },
});
You can use the following library to draw and snap https://www.npmjs.com/package/#geoman-io/leaflet-geoman-free packages
and for more functionalities which are not present in above mentioned package you can use this one especially for polylines
https://www.npmjs.com/package/leaflet-linestring-editor
I gave up on the leaflet draw library and snap, and used leaflet-geoman library instead. Snapping working perfectly.
Is it possible to add a "target overlay" for Leaflet Draw toolbar?
For example I could have two overlays such as Areas and Points of interest.
Now, I would like to add markers only to Points of Interest overlay and polygons on Areas overlay.
I've been trying to figure out that is it somehow possible to programmatically activate overlays or assign overlay for different draw toolbars but nothing seems to help.
All new layers are added to same overlay since I can't figure out which overlay toolbar is used.
And at least console log value of events don't seem to help and I cannot figure out that which toolbar was used (I could use it to force addLayer to use certain overaly), I cannot get anything regarding the target layer etc.
var poiLayer = new L.FeatureGroup();
var areaLayer = new L.FeatureGroup();
var options = {
polygon: {
allowIntersection: false,
drawError: {
color: "#e1e100",
message: "<strong>Lines of a polygon cannot overlap!</strong>"
},
shapeOptions: {
color: "#FF5656"
}
},
polygon: {
allowIntersection: false,
drawError: {
color: "#e1e100",
message: "<strong>Lines of a polygon cannot overlap!</strong>"
},
shapeOptions: {
color: "#FF5656"
}
},
edit: {
featureGroup: areaLayer,
poly: {
allowIntersection: false
},
poly: {
allowIntersection: false
},
poly: {
allowIntersection: false
}
},
draw: {
featureGroup: areaLayer,
name: "dafuq2",
polygon: {
allowIntersection: false,
showArea: true
},
},
name: "namne123123123"
};
//same for the poiLayer
var drawControl = new L.Control.Draw(options);
map.addControl(drawControl);
var drawControl2 = new L.Control.Draw(options2);
map.addControl(drawControl2);
map.on(L.Draw.Event.CREATED, function(e) {
console.log(e);
});
In the code snippet below, I have setup the leaflet.draw plugin. Works fine for adding features (lines, markers, polygons). Works fine for editing and deleting. But the cancel operation does not work (nor does the simple intersection test, but I can live without that). Any idea what I did wrong to setup the plugin?
(Chrome V44, leaflet 1.0 Beta 2, leaflet.draw (0.2.4-dev) (seems to also fail in leaflet '0.7.7').
Here is the error:
Uncaught TypeError: Cannot read property '0' of undefined
L.Polyline.L.Path.extend._projectLatlngs # leaflet-src.js:5535
L.Polyline.L.Path.extend._projectLatlngs # leaflet-src.js:5547
L.Polyline.L.Path.extend._projectLatlngs # leaflet-src.js:5547
L.Polyline.L.Path.extend._project # leaflet-src.js:5519
L.SVG.L.Renderer.extend._updatePath # leaflet-src.js:6042
L.Path.L.Layer.extend.redraw # leaflet-src.js:5130
L.Polyline.L.Path.extend.setLatLngs # leaflet-src.js:5411
L.EditToolbar.Edit.L.Handler.extend._revertLayer # leaflet.draw-src.js:2759
(anonymous function) # leaflet.draw-src.js:2716
L.LayerGroup.L.Layer.extend.eachLayer # leaflet-src.js:4865
L.EditToolbar.Edit.L.Handler.extend.revertLayers # leaflet.draw-src.js:2715
L.EditToolbar.L.Toolbar.extend.disable # leaflet.draw-src.js:2578handler # leaflet-src.js:6953
and here is the code I use to setup the leaflet.draw
var theMap;
var mapLayer;
var carLayer;
var drawLayer;
var drawControl;
var trackerButton;
....
this.setupDraw();
theMap = L.map('mapCanvas', {
center: mCityCenter,
zoom: 20,
layers: [osmLight, mapLayer, carLayer, drawLayer]
});
theMap.on("draw:created", this.addDrawing);
....
this.setupDraw = function () {
drawLayer = new L.FeatureGroup();
drawControl = new L.Control.Draw({
draw: {
polygon: {
allowIntersection: false, // Restricts shapes to simple polygons
showArea: true,
drawError: {
color: '#e1e100', // Color the shape will turn when intersects
message: '<strong>Oh snap!<strong> you can\'t draw that!' // Message that will show when intersect
}
}
},
edit: {
featureGroup: drawLayer
}
});
}
this.addDrawing = function (e) {
var type = e.layerType;
var layer = e.layer;
if (type === 'marker') { }
drawLayer.addLayer(layer);
}
That version of Leaflet.draw plugin is not compatible with the version of Leaflet you are using.
Be sure to read docs for the plugin, it states you should be using Leaflet.js 0.7.
Leaflet.draw: https://github.com/Leaflet/Leaflet.draw
Leaflet.JS: http://leafletjs.com/reference.html
From the Leaflet.draw github page: "Leaflet.draw 0.2.3+ requires Leaflet 0.7.x."
As of today there does appear to be a fork of Leaflet.draw that is being developed against Leaflet 1.0 RC: https://github.com/Leaflet/Leaflet.draw/tree/leaflet-master