Leaflet.draw
Leaflet.draw copied to clipboard
Published
20 hours ago •
Leaflet
Leaflet
Uncaught TypeError: Cannot read property 'lat' of null on MultyPolygon
- [x] I'm reporting a bug, not asking for help
- [x] I've looked at the documentation to make sure the behaviour is documented and expected
- [x] I'm sure this is a Leaflet Draw code issue, not an issue with my own code nor with the framework I'm using (Cordova, Ionic, Angular, React…)
- [x] I've searched through the issues to make sure it's not yet reported
How to reproduce
- Leaflet version I'm using: 1.7.1
- Leaflet Draw version I'm using: 1.0.4
- Browser (with version) I'm using: Chrome
- OS/Platform (with version) I'm using: Mac OSX
- Use this code :
var center = [46, 2]
var map = L.map('map', {
center,
zoom: 5,
scrollWheelZoom: false,
})
var editableLayers = new L.FeatureGroup()
map.addLayer(editableLayers)
L.tileLayer(
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Data © <a href="http://osm.org/copyright">OpenStreetMap</a>',
maxZoom: 18,
}).addTo(map)
var geography = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"name": "MultiPolygon"
},
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[
3.713379,
47.338823
],
[
3.449707,
45.73686
],
[
5.471191,
45.02695
],
[
5.603027,
47.219568
],
[
4.943848,
47.754098
],
[
3.713379,
47.338823
]
]
],
[
[
[
3.493652,
48.864715
],
[
3.273926,
47.754098
],
[
4.54834,
47.960502
],
[
5.427246,
48.516604
],
[
3.493652,
48.864715
]
]
]
]
}
}
]
}
L.geoJson(geography, {
onEachFeature: function (feature, layer) {
editableLayers.addLayer(layer)
},
style: function () {
return '#00a78a';
}
}).addTo(map)
var drawPluginOptions = {
position: 'topright',
draw: {
polyline: false,
polygon: {
allowIntersection: false,
drawError: {
color: '#e1e100',
message: 'Error on draw',
},
shapeOptions: {
color: '#00a78a',
},
},
rectangle: false,
circle: false,
marker: false,
circlemarker: false,
},
edit: {
featureGroup: editableLayers,
remove: true,
},
}
var drawControl = new L.Control.Draw(drawPluginOptions)
map.addControl(drawControl)
- Click on edit and see this error :
leaflet.js:5 Uncaught TypeError: Cannot read property 'lat' of null
at Object.project (leaflet.js:5)
at Object.latLngToPoint (leaflet.js:5)
at i.project (leaflet.js:5)
at i._getMiddleLatLng (leaflet.draw.js:8)
at i._createMiddleMarker (leaflet.draw.js:8)
at i._initMarkers (leaflet.draw.js:8)
at i.addHooks (leaflet.draw.js:8)
at leaflet.draw.js:8
at i._eachVertexHandler (leaflet.draw.js:8)
at i.addHooks (leaflet.draw.js:8)
project @ leaflet.js:5
latLngToPoint @ leaflet.js:5
project @ leaflet.js:5
_getMiddleLatLng @ leaflet.draw.js:8
_createMiddleMarker @ leaflet.draw.js:8
_initMarkers @ leaflet.draw.js:8
addHooks @ leaflet.draw.js:8
(anonymous) @ leaflet.draw.js:8
_eachVertexHandler @ leaflet.draw.js:8
addHooks @ leaflet.draw.js:8
enable @ leaflet.js:5
_enableLayerEdit @ leaflet.draw.js:9
eachLayer @ leaflet.js:5
addHooks @ leaflet.draw.js:9
enable @ leaflet.js:5
enable @ leaflet.draw.js:9
s @ leaflet.js:5
What behaviour I'm expecting and which behaviour I'm seeing
Minimal example reproducing the issue
- [x] this example is as simple as possible
- [x] this example does not rely on any third party code
See jsfiddle.
EDIT 1 : This is working with
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"name": "Polygon"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
7.499027,
48.632455
],
[
7.443066,
48.624286
],
[
7.41148,
48.602722
],
[
7.416286,
48.57479
],
[
7.426243,
48.554569
],
[
7.449932,
48.522972
],
[
7.50761,
48.51342
],
[
7.556362,
48.533885
],
[
7.576275,
48.570474
],
[
7.583828,
48.616116
],
[
7.51688,
48.63427
],
[
7.499027,
48.632455
]
]
]
}
},
{
"type": "Feature",
"properties": {
"name": "Polygon"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
7.481861,
48.509326
],
[
7.446156,
48.508872
],
[
7.403584,
48.47497
],
[
7.391567,
48.449699
],
[
7.39706,
48.427606
],
[
7.389507,
48.409833
],
[
7.381611,
48.353968
],
[
7.368565,
48.306948
],
[
7.294064,
48.23908
],
[
7.261105,
48.194472
],
[
7.258015,
48.156696
],
[
7.212696,
48.124851
],
[
7.201023,
48.074638
],
[
7.194843,
48.051005
],
[
7.207546,
48.019554
],
[
7.212696,
47.9805
],
[
7.20171,
47.947626
],
[
7.145405,
47.917262
],
[
7.135105,
47.89724
],
[
7.065067,
47.832057
],
[
7.045155,
47.807621
],
[
7.050648,
47.790555
],
[
7.102833,
47.765176
],
[
7.154675,
47.769561
],
[
7.238445,
47.82399
],
[
7.281017,
47.865465
],
[
7.329082,
47.925085
],
[
7.338009,
47.985786
],
[
7.343159,
48.034708
],
[
7.318096,
48.068215
],
[
7.317066,
48.092986
],
[
7.351398,
48.1386
],
[
7.349339,
48.168146
],
[
7.368908,
48.194701
],
[
7.39912,
48.226502
],
[
7.419376,
48.266741
],
[
7.472248,
48.31357
],
[
7.494564,
48.356249
],
[
7.527866,
48.413707
],
[
7.539539,
48.473149
],
[
7.504177,
48.50182
],
[
7.481861,
48.509326
]
]
]
}
}
]
}
The two object are valide
I am also seeing this same behavior when loading polygons. They load in fine using leaflet, but then when using leaflet.draw and attempting to click the edit button this error appears and is therefore unable to modify the polygon layers that are defined.
I found that leaflet draw simply doesn't like the nested array, even though it is valid in leaflet.
