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
