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
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
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP