TransWikia.com

Mousehover placemark in Leaflet

Geographic Information Systems Asked on August 8, 2020

I am trying to make my GeoJSON placemark hovered in Leaflet.

Basically the pop up exist and I don’t want to change it.
What I would achieve is only change it color, when hovered by mouse.

I was trying the following code:

  function highlightFeature(e) {
    var layer = e.target;

    layer.setStyle({
        weight: 5,
        color: '#666',
        dashArray: '',
        fillOpacity: 0.7
    });

    if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
        layer.bringToFront();
    }

    info.update(layer.feature.properties);
}

  function resetHighlight(e) {
    geojson.resetStyle(e.target);
    info.update();
}


  var sitis = L.geoJSON(sitec, {
pointToLayer: function (feature, latlng) {
feature.properties.myKey = feature.properties.Title + ', ' + feature.properties.Head
label = String(feature.properties.Title)
    return L.circleMarker(latlng, geojsonMarkerOptions).bindTooltip(label, {permanent: true, direction: "center", className: "my-labels"}).openTooltip(); //https://gis.stackexchange.com/questions/245621/how-to-label-geojson-points-in-leaflet
},
    onEachFeature: function (feature, layer) {
        layer.bindPopup("<h1><u><font color='red'>"+feature.properties.Title+"</h1></u></font><h2>Address: "+feature.properties.Head+"</h2><p>"+feature.properties.Description+"</p><p> Website:"+feature.properties.URL+"</p><br><center><img src='images/" + feature.properties.Pict + " ' style='width:200px;height:300x;'>");
        layer.on({
        mouseover: highlightFeature,
        mouseout: resetHighlight,
        click: zoomToFeature
    });
  }
    })
    .addTo(map);

based on this example:

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

and also:

  var highlightMarker ={
  fillColor: "#663300",
  color: "#663300" 
  };

  function showTooltip(e) {

e.target.setIcon(highlightMarker);
e.target.openTooltip();
}

 function hideTooltip(e) {
  e.target.setIcon(defaultMarker);
  e.target.closeTooltip();
 }


 var sitis = L.geoJSON(sitec, {
pointToLayer: function (feature, latlng) {
feature.properties.myKey = feature.properties.Title + ', ' + 
feature.properties.Head
label = String(feature.properties.Title)
    return L.circleMarker(latlng, geojsonMarkerOptions).bindTooltip(label, {permanent: true, direction: "center", className: "my-labels"}).openTooltip(); //https://gis.stackexchange.com/questions/245621/how-to-label-geojson-points-in-leaflet
},
    onEachFeature: function (feature, layer) {
        layer.bindPopup("<h1><u><font color='red'>"+feature.properties.Title+"</h1></u></font><h2>Address: "+feature.properties.Head+"</h2><p>"+feature.properties.Description+"</p><p> Website:"+feature.properties.URL+"</p><br><center><img src='images/" + feature.properties.Pict + " ' style='width:200px;height:300x;'>");
        layer.on({
mouseover: showTooltip,
mouseout: hideTooltip
 });
  }
    })
    .addTo(map);

an example here:

Changing Color and Opening Label on Hover

where I see no effect on the map. The console says

(index):113 Uncaught TypeError: e.target.setIcon is not a function
at i.showTooltip ((index):113)
at i.fire (leaflet.js:5)
at i._fireDOMEvent (leaflet.js:5)
at i._handleDOMEvent (leaflet.js:5)
at HTMLDivElement.s (leaflet.js:5)

My last attempt was:

  var sitis = L.geoJSON(sitec, {
pointToLayer: function (feature, latlng) {
feature.properties.myKey = feature.properties.Title + ', ' + 
feature.properties.Head
label = String(feature.properties.Title)
layer.on({
            mouseover: function () {
                this.setStyle({
                    'fillColor': '#b45501',
                });
            },
            mouseout: function () {
                this.setStyle({
                    'fillColor': '#f0d1b1',
                });
            },
            click: function () {
                // TODO Link to page
                alert('Clicked on ' + feature.properties.name)
            }
        });
    return L.circleMarker(latlng, geojsonMarkerOptions).bindTooltip(label, 
     {permanent: true, direction: "center", className: "my- 
   labels"}).openTooltip(); 
   //https://gis.stackexchange.com/questions/245621/how-to-label-geojson- 
   points-in-leaflet
    },
    onEachFeature: function (feature, layer) {
        layer.bindPopup("<h1><u><font color='red'>"+feature.properties.Title+"</h1></u></font><h2>Address: "+feature.properties.Head+"</h2><p>"+feature.properties.Description+"</p><p> Website:"+feature.properties.URL+"</p><br><center><img src='images/" + feature.properties.Pict + " ' style='width:200px;height:300x;'>");

}
})
.addTo(map);

where console said:

Uncaught ReferenceError: layer is not defined

as well as:

   var sitis = L.geoJSON(sitec, {
pointToLayer: function (feature, latlng) {
feature.properties.myKey = feature.properties.Title + ', ' + 
feature.properties.Head
label = String(feature.properties.Title)
    return L.circleMarker(latlng, geojsonMarkerOptions).bindTooltip(label, 
{permanent: true, direction: "center", className: "my-labels"}).openTooltip(); //https://gis.stackexchange.com/questions/245621/how-to-label-geojson-points-in-leaflet
},
    onEachFeature: function (feature, layer) {
        layer.bindPopup("<h1><u><font color='red'>"+feature.properties.Title+"</h1></u></font><h2>Address: "+feature.properties.Head+"</h2><p>"+feature.properties.Description+"</p><p> Website:"+feature.properties.URL+"</p><br><center><img src='images/" + feature.properties.Pict + " ' style='width:200px;height:300x;'>");
        layer.on({
            mouseover: function () {
                this.setStyle({
                    'fillColor': '#b45501',
                });
            },
            mouseout: function () {
                this.setStyle({
                    'fillColor': '#f0d1b1',
                });
            },
            click: function () {
                // TODO Link to page
                alert('Clicked on ' + feature.properties.name)
            }
        });
  }
    })
    .addTo(map);

Which finally works, but when I implement it here:

  $.getJSON(url3)
  ).done(function(data, data2, data3) {
    job = L.geoJson(data, {
        
        pointToLayer: function(feature, latlng) {
        feature.properties.myKey = '<b>'+ feature.properties.Owner + '</b>; 
   ' + feature.properties.Address
            return L.circleMarker(latlng, {
            radius:6,
            opacity: .5,
            //color: "#000",
            color:getColor(feature.properties.Contractor),
            fillColor:  getColor(feature.properties.Contractor),
            fillOpacity: 0.8

            });  //.bindTooltip(feature.properties.Name);
        },
        
            onEachFeature: function (feature, layer) {
                layer._leaflet_id = feature.properties.Owner;
                
            
                var popupContent = "<p><h2>" +
                feature.properties.Owner + "</h2><b> Number of units:</b> " +
                feature.properties.Units + "</br> <b>Client reference:</b> " +
                feature.properties.Client_Ref + "</br>" +
                '</br><center><a href="'+ feature.properties.Directory +'" target="_blank">Local directory</a></center></p>' +
                '<center><font color="red"><a href="'+ feature.properties.Sharepoint +'" target="_blank">Sharepoint</a></font></center></p>';
                        
                if (feature.properties && feature.properties.popupContent) {
                    popupContent += feature.properties.popupContent;
                }
                    layer.bindPopup(popupContent);
                    layer.on({
            mouseover: function () {
                this.setStyle({
                    'fillColor': '#b45501',
                });
            },
            mouseout: function () {
                this.setStyle({
                    'fillColor': '#f0d1b1',
                });
            }
            }
            
            }).addData(data).addTo(map);

everything is gone and console says:

Map.js:1055 Uncaught Error: Map container not found.
at NewClass._initContainer (Map.js:1055)
at NewClass.initialize (Map.js:129)
at new NewClass (Class.js:22)
at leaflet-complete.js:13

One Answer

I found one answer for this problem:

To the following code, we should add up layer.on right after layer.bindPopup(popupContent);

   job = L.geoJson(data, {

        pointToLayer: function(feature, latlng) {
        feature.properties.myKey = '<b>'+ feature.properties.Owner + '</b>; ' + 
   feature.properties.Address
            return L.circleMarker(latlng, {
            radius:6,
            opacity: .5,
            //color: "#000",
            color:getColor(feature.properties.Contractor),
            fillColor:  getColor(feature.properties.Contractor),
            fillOpacity: 0.8

            });  //.bindTooltip(feature.properties.Name);
        },

            onEachFeature: function (feature, layer) {
                layer._leaflet_id = feature.properties.Owner;


                var popupContent = "<p><h2>" +
                feature.properties.Owner + "</h2><b> Number of units:</b> " +
                feature.properties.Units + "</br> <b>Client reference:</b> " +
                feature.properties.Client_Ref + "</br>" +
                '</br><center><a href="'+ feature.properties.Directory +'" 
      target="_blank">Local directory</a></center></p>' +
                '<center><font color="red"><a href="'+ feature.properties.Sharepoint 
      +'" target="_blank">Sharepoint</a></font></center></p>';

                if (feature.properties && feature.properties.popupContent) {
                    popupContent += feature.properties.popupContent;
                }
                    layer.bindPopup(popupContent);   
                    layer.on({                                //------- from here the mousehover code starts
            mouseover: function () {
                this.setStyle({
                    'fillColor': '#663300',
                });
            },

            mouseout: function () {
                this.setStyle({
                    'fillColor': '#ffb366',
                });
            }
            /*
            click: function () {
                // TODO Link to page
                alert('Clicked on ' + feature.properties.Title)
            }
            */
        });   // here mousehover code is finish

            }

Answered by MKR on August 8, 2020

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP