I am pretty new to all of this.
I want to have a hover/mouseover AND click popup work on my geojson layer.
Here is the code so far, but I don't know where to include the hover without messing up the click popup. The hover should show the content of a text field and highlight the circle marker.
$.getJSON('http://soundgoods.cartodb.com/api/v2/sql?format=GeoJSON&q=SELECT * FROM soundgoods_mixtape_map_1', function(data) {
var geojsonMarkerOptions = {
radius: 8,
fillColor: "#FFCC00",
color: "#323232",
weight: 2,
opacity: 0.5,
fillOpacity: 0.4
};
var geojson = L.geoJson(data, {
pointToLayer: function (feature, latlng) {
var popupOptions = {maxWidth: 500};
var popupContent = '<a target="_blank" class="popup" href="' +
feature.properties.post + '">' +
feature.properties.soundcloud +
'<h3>' + "Post & tracklist" + '</h3>' + '</a>';
return L.circleMarker(latlng, geojsonMarkerOptions).bindPopup(popupContent,popupOptions,{
});
}
});
markers.addLayer(geojson);
// CONSTRUCT THE MAP
var map = L.map('map').setView([0,0],3);
baseLayer.addTo(map);
markers.addTo(map);
Best Answer
As @ghybs said, attach events to the circle markers themselves inside
pointToLayer
, like so: