2

I want to use this leaflet example:

https://leafletjs.com/examples/choropleth/example.html

with some changes:

  1. add a marker to map. i done it like this:

    var center=[ 37.8, -96 ];
         marker = new L.Marker(center, {
             draggable: true,
             autoPan:true,
         }).addTo(map);
    
  2. problem:

In above example , when the mouse moves over a layer, then the highlightFeature function is executed with mouseover event and the layer is highlighted.

Now, I want to use the marker drag event instead of the mouseover event. run highlightFeature when a marker is dragging over a layer.

       layer.on({
    mouseover: highlightFeature,
    mouseout: resetHighlight,
    click: zoomToFeature     }); 

can i use marker events on each layer?

I will be happy for your help.

6
  • What have you tried? There is no marker in the above code or in the mentioned example. Have a look at marker docs, Dragging event sections. Please edit your question and add more relevant code regarding marker.
    – TomazicM
    Nov 11, 2023 at 9:32
  • i edited my question.if my qoustion has problem say me again.thank you.
    – mrmiremad
    Nov 11, 2023 at 17:48
  • in above example : can i use markerdragging event instead mouseover event after add a marker to map? markerdrag event instead : mouseover: highlightFeature
    – mrmiremad
    Nov 11, 2023 at 17:54
  • Before you edited the question, there was one additional requirement: (3) marker dragend event instead click : when dragging marker was end and user release the marker , then run zoomToFeature for zoom to marker and layer. Is this no more required?
    – TomazicM
    Nov 11, 2023 at 19:36
  • i use your answer in another question. then define marker dragend event for zoomToFeature , marker drag event for highlightFeature. in marker drag event check position of marker like your answer gis.stackexchange.com/a/438504/233405
    – mrmiremad
    Nov 11, 2023 at 19:48

2 Answers 2

1

Solution where you have to iterate over all GeoJSON polygons at each marker drag event can be quite costly when there is a big number of polygons.

One possible solution to avoid this is using the following method:

  • Create marker with interactive: false option so it won't catch mouse events.
  • Create marker icon with some dummy CSS class className: 'my-marker' which will be use to identify marker HTML element.
  • Create map mousedown event processing function, where event is checked if it falls on marker by temporarily making marker interactive and using document.elementFromPoint method to get element under cursor.
  • If event falls on marker, disable map dragging and move marker while dragging mouse with processing map mousemove event.
  • On first mouseup event make map draggable again and stop listening to mousemove event.

Code could then look something like this (tested):

const marker = L.marker([29, -106], {
  interactive: false,
  icon: new L.Icon.Default({
    className: 'my-marker'
  })
}).addTo(map);

map.on('mousedown', function(e) {
  const markerElement = marker.getElement();
  markerElement.classList.add('leaflet-interactive');
  const target = document.elementFromPoint(e.originalEvent.clientX, e.originalEvent.clientY);
  markerElement.classList.remove('leaflet-interactive');
  if (target.classList.contains('my-marker')) {
    map.dragging.disable();
    map.on('mousemove', function (e) {
      marker.setLatLng(e.latlng);
    });
    map.once('mouseup',function(e){
     map.removeEventListener('mousemove');
     map.dragging.enable();
    })          
  }
});
1
  • thanks for your completed answer
    – mrmiremad
    Nov 12, 2023 at 19:18
0

i solved it . i define marker drag event and get current latlng of marker. then i check in my geojson file for each polygan layer . i check if the new marker position falls within the layer.

thank you from

Tomazicm

your answer in another question helped me.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.