Leaflet.draw: Javascript errors with leaflet 1.1.0

For a workaround on the “segmentsIntersect” bug you can pin the Leaflet version in your own package.json at “1.0.3”. This will satisfy the semver requirements of the Leaflet-draw package.json and work. Not sure what changed in the Leaflet package between 1.0.3 and 1.1.0. Might go have a quick look and see, but from a quick glance earlier, it seems the answer was ‘a lot’.

Lots of good information here. It does appear the minor release of Leaflet broke Draw.

Any patches to resolve the utility issue should reference #5589 (thanks @frehner for pointing that out).

ES6 Rollup would be nice, we can set up an ES6 branch to handle that. Leaflet.Editable is having a similar issue (looks like utility) and the next ‘major’ update to Leaflet.Draw will be piggybacking off Editable - just an FYI.

In the meantime, I’ll scope the compatibility of Leaflet.Draw to a ceiling of Leaflet 1.0.x. This will happen tomorrow morning.

This is happening for me using Leaflet 1.0.3 and Leaflet-Draw 0.4.9

@scaddenp Confirmed 1.2.0 works

@midnightmastermind 0.4.10 was released to handle the leaflet version cap.

@germanjoey I’m going to merge #651 into undo-manager this week. I’m okay with one more minor release (0.5.0) to handle pre Leaflet 1.1 to encompass those changes and ES6 can be 0.6.0. Once I see changes on #651 I’ll merge and handle the remaining conflicts if any.

@mjclawar Looking at starting the ES6 rollup, due to bower, this will happen on a branch. If you have anything started, point me to it and I’ll merge into es6-rollup

@JonForest thanks for the heads up. I actually found out the issue was my npm install was downloading the newest version due to the have “^1.0.3” as the dependency version. Removing the carot solved the issue.

Working Example:

Hey All, Just to let someone know if anyone still having this issue. I’m useing leaflet(1.6.0) vuejs, vue2-leaflet as wrapper and leaflet-draw(0.4.X), edit, drag, handler to customize functions and buttons.

I couldn’t figure it out how to fix it so I’ve made a component by adding leaflet-draw, edit, drag, handler valina js(and customized a bit) altogether in one component… I don’t use npm for this plugin functions anymore and now it works perfect. So it’s better to convert vanilla code to vuejs component and handle all the code there even it’s over 8,000 lines… hehe 😃

Anyway, let me know if you need more info.

BTW, you need to fix the vanilla code a bit as all the variables are using only ‘var’. It will cause some problems to sending data to leaflat(1.6.0, npm installed) as leaflat, leaflet-draw, edit, drag, handlers are using same variable names and you need to put them in one component. I had an issue that leaflet(npm) couldn’t recognize which event was occurred(error methods in leaflet.js = .trim()).

component should be like this

//leaflet-draw template in vuejs
<template>
<div style="display: none;"> </div>
</template>

<script>
add all the vanilla js here and fix the codes as you need


let map = {}
let whatever layer, group you need = L.featrureGroup();

export default {
 name: 'leaflet-draw',
mounted() {
 this.$nextTick(() => {
 //write here to mount buttons and functions
// e.g.
//map = this.$parent.$parent.$refs.map.mapObject
)
}
}
</script>

parent component where map is(i'm using vue2-leaflet wrapper)
<template>
 <l-map>
   <l-tile-layer />
  <leaflet-draw position="topleft" />
</l-map>
</template>

<script>
import LeafletDraw from './LeafletDraw';

 export default {
..
components: {
'leaflet-draw': LeafletDraw
}
</script>

and that’s all. Here’s an output(I’m still working on button icon as we’re using fontawesome… please ignore it)

@Fillah Have you tried https://github.com/Leaflet/Leaflet.draw/issues/739#issuecomment-311659407 ?

What is the fix for this bug? I’m working with a VueJS-PWA project where ES6 and Webpack is imported. When i’m trying to import leaflet and leafletDraw, it gives me the error:

Cannot add property segmentsIntersect, object is not extensible

I have imported it like this:

import Leaflet from 'leaflet';
import LeafletDraw from 'leaflet-draw';

The current versions are:

"leaflet": "^1.1.0",
"leaflet-draw": "^0.4.10"

Here’s where we’re at right now: https://github.com/StratoDem/SDLeafletDraw. Obviously still needs a fair amount of work and I’ll try to port the tests soon, but code is working for our use cases with an import 'sdleafletdraw;. This adds L.Control.Draw and L.Draw.Event access.

The ES6 code is in src/es6/, then built with Babel into dist.

@ddproxy That would be great. I just pushed another commit onto #651 with some bugfixes and additional documentation. Please let me know if there’s anything I can do to help.