3

I'm using Leaflet and Leaflet PM and their polyline tool to create a polyline. Everything works fine when clicking and adding new points to the map. This data I then use to store away somewhere else and do some other stuff with it. The thing is.

I am going to have a function to be able to press the 'e' key and 'd' key to add points to the map using DOM Eventlisteners. This is because I need to change floor elevation. And if I use the mouse for that on the same location as a previously added point it closes the polyline. Also there it works great. I use mouseover on the map, store the lat long, and then on keydown I use my workingLayer to addLatLng(latlng). It saves the latitudes and longitudes, it draws the line. But there are no vertexes added as when I'm clicking. And I need the vertexadded function to be able to add my other meta-data to it. I'm also gonna use those vertexes to customize later on.

I've been spending the whole day on this and I really need some help now, can't find anything about it.

I also tried adding a marker directly to the layer but that didn't work.

All in all. Everything works fine when I'm clicking to make the polyline. But when programmatically call the layer.addLatLng(latlng); won't add the vertex. Only the latlng and where it is, as shown in the images. Therefore pm:vertexadded is never called.

What am I missing?

An example from my code:

lmap.on('pm:drawstart', function(e){
    //Layer is now the workingLayer
    let layer = e.workingLayer;

    //Will hold coordinates from map
    let pointFromMouse;
    lmap.addEventListener('mousemove', function(e){
        //Assigning current position lat/long 
        pointFromMouse = e.latlng;
    })

    document.addEventListener('keydown', function(e){
        if(e.keyCode == '69'){
            //When pressing 'e', adds it to the polyline
            layer.addLatLng(pointFromMouse);
            //I also tried setLatLngs(); and redraw(); no sucess
        }
    })


    layer.on('pm:vertexadded', function(e){
        //Here I'm calling some other stuff. I stuff another array along
        //with other meta-data, other than lat/long.
    })   
})

Image1: How it looks when I'm clicking(Everything works fine, vertexes are added).

Image2: How it looks when I'm adding a point pressing the key. No vertextes are added, Therefore pm:vertexadded is never called.

How it looks when I'm clicking(Everything works fine, vertexes are added)

How it looks when I'm adding a point pressing the key. No vertextes are added, Therefore pm:vertexadded is never called.

Falke Design
  • 10,635
  • 3
  • 15
  • 30
Daniel
  • 71
  • 4

0 Answers0