I have a map on which one layer overlays the other one (I have icon markers displayed and larger circles markers behind them). I'm trying to create a function that changes the icon symbol AND the circle symbology while hovering over a feature. I need both icon and circle markers to appear at the same time, when the mouse gets over the icon.
What's happening so far is that I can't display the updated icon and circle together, I have to slightly hover on the sides to display the icon (as in the images, red cross is my cursor). What is my mistake ?
Here is my code :
//Initial circle symbology - circles are invisible
var buffer_zone = L.geoJSON(studios, {
onEachFeature: mouse_events_buffer,
pointToLayer: function (zone, coord){
var circlebuff = new L.circle(coord, 100, {color : '#006080', fillColor : '#99ccff', fillOpacity : 0, opacity : 0, weight : 1});
return circlebuff;
}
}).addTo(map);
//Initial icon style
var studioicon = L.icon({
iconUrl: 'cinema.png',
iconSize: [40, 40],
iconAnchor: [15,15]
});
//Icon marker and icon style that should appear when hovering
var studios_marker = L.geoJSON(studios, {
onEachFeature: mouse_events_studios,
pointToLayer: function (feature, latlng){
var smallIcon = L.icon({
iconUrl: ''+ feature.properties.Name +'.png',
iconSize: [80, 60],
iconAnchor: [15,15]
});
var marker = L.marker(latlng, {icon: studioicon});
marker.smallIcon = smallIcon;
return marker;
}
}).addTo(map);
function mouse_events_buffer(feature, buff){
//Change circle style (ie add color and bigger radius)
buff.on('mouseover', function(buffer_on){
var obj_buffer1 = buffer_on.target;
buff.setStyle({color : '#006080', fillColor : '#99ccff',
fillOpacity : 0.3, opacity : 1, weight : 1});
buff.setRadius(3000)
});
//Set the original style back
buff.on('mouseout', function(buffer_off){
var obj_buffer2 = buffer_off.target;
buffer_zone.resetStyle(buffer_off.target);
});
}
function mouse_events_studios(feature, marker){
//Change icon style (different png and size)
marker.on('mouseover', function(alter_style){
var leaflet_obj2 = alter_style.target;
marker.setIcon(marker.smallIcon);
});
//Set the original style back
marker.on('mouseout', function(origin_style){
var leaflet_obj3 = origin_style.target;
marker.setIcon(studioicon);
});
//Additionnal action (this works)
marker.on('mouseover', function(resume){
var leaflet_obj4 = resume.target;
var info1 = document.getElementById("studio_name");
info1.innerHTML = leaflet_obj4.feature.properties.Name
var info2 = document.getElementById("studio_resume");
info2.innerHTML = leaflet_obj4.feature.properties.resume
})
}
buffer_zone
circles are transparent. Are they used only for mouse over detection? Please edit your question with more detailed step by step description of the behavior: initial state, mouse over buffer, mouse over icon.