0

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

1 Answer 1

1

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

            }

Your Answer

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

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