Leaflet JS- Highlight on hover - leaflet

Question

I created a simple web map and now I am stacked on how to use the highlight function on hover. I tried to use the tutorial on the Leaf js site, but when I am trying to call the highlight function under geoJason variable, it is not working. Basically I want the polygon to be highlighted when hovered. The popup is working just fine.
Here is my script, without the highlight function.
ar map = L.map('map').setView([43.0982, -89.3811], 12);
var googleSat = L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',{
minZoom: 1,
maxZoom: 20,
subdomains:['mt0','mt1','mt2','mt3'],
attribution: '<a href="https://www.google.com/maps" target=_blank> Google Sattellite Map</a>' }).addTo(map);
// Adding the geoJason file and styling it.
var myStyle = {
fillColor: "#2c7fb8",
color: "#f20b0b",
weight: 1,
opacity: 1,
fillOpacity: 0.55
};
// Alder district was a geoJason file and now it saved as js file.
var geojason = L.geoJSON(alderdstricts, {
style:myStyle,
onEachFeature:districtdata,
}).addTo(map);
// Function to bind popup to the geoJason data.
function districtdata(feature, layer){
layer.bindPopup("<span class='headings'>District: </span>" + feature.properties.ALD_DIST + "<br>" +
"<span class='headings'>Representative: </span>" + feature.properties.Representa + "<br>"
+ "<span class='headings'>Contact Representative: </span>" + feature.properties.ContactRep + "<br>"
+ "<span class='headings'>District Population: </span>" + feature.properties.DistrictPo
+ "<span class='headings'></span>" + feature.properties.Image)
};
I added all of my script above except the highlight function and that is where I am stacked.

Answer 1

var map = L.map('map').setView([43.0982, -89.3811], 12);
var googleSat = L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',{ minZoom: 1, maxZoom: 20, subdomains:['mt0','mt1','mt2','mt3'], attribution: ' Google Sattellite Map' }).addTo(map);
// Adding the geoJason file and styling it.
var myStyle = {
fillColor: "#2c7fb8",
color: "#f20b0b",
weight: 1,
opacity: 1,
fillOpacity: 0.55
};
// Alder district was a geoJason file and now it saved as js file.
var geojason = L.geoJSON(alderdstricts, { style:myStyle, onEachFeature:districtdata,
}).addTo(map);
// Function to bind popup to the geoJason data.
function districtdata(feature, layer){
layer.bindPopup("District: " + feature.properties.ALD_DIST + "
" + "Representative: " + feature.properties.Representa + "
" + "Contact Representative: " + feature.properties.ContactRep + "
" + "District Population: " + feature.properties.DistrictPo + "" + feature.properties.Image)
layer.on('mouseover', function(e) {
e.target.setStyle({
fillOpacity: 0.8
});
});
layer.on('mouseout', function(e) {
e.target.setStyle({
fillOpacity: 0.55
});
});
};
I'm not sure what you tried, but this should work. It simply adds a "mouseover" and "mouseout" event handler for each polygon, as well as your pop-up. If this doesn't work, please let me know what errors/behaviour you get.
In general, it's best to provide details on what solutions you have already tried in your question. Also, just FYI, JSON is not a contraction of Jason, it stands for JavaScript Object Notation.