Eu sou muito novo em tudo isso.
Eu quero ter um hover / mouseover E clicar em pop-up na minha camada de geojson. Aqui está o código até agora, mas não sei onde incluir o cursor do mouse sem atrapalhar o pop-up do clique. O cursor do mouse deve mostrar o conteúdo de um campo de texto e destacar o marcador do círculo.
$.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);
Respostas:
Como o @ghybs disse, anexe eventos aos marcadores do círculo
pointToLayer
, como se segue :fonte
Quanto à exibição de algum texto quando o mouse está sobre uma forma vetorial (recurso GeoJSON), você estaria interessado no plugin Leaflet.label ( demo ).
Em relação destacando / mudando o estilo do marcador círculo, você deve usar
"mouseover"
e"mouseout"
eventos em cada característica de seu grupo de camadas GeoJSON, como mostra a que Folheto tutorial: Interativo mapa coroplético, seção "Adicionando Interaction" .Tudo isso pode ser feito sem problemas, juntamente com o pop-up aberto ao clicar.
fonte