Soy bastante nuevo en todo esto.
Quiero tener un cursor / mouseover Y hacer clic en la ventana emergente de trabajo en mi capa geojson. Aquí está el código hasta ahora, pero no sé dónde incluir el cursor sin desordenar la ventana emergente de clic. El cursor debe mostrar el contenido de un campo de texto y resaltar el marcador de 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);
Respuestas:
Como @ghybs dijo, adjunte eventos a los marcadores de círculo dentro de ellos
pointToLayer
, así:fuente
En cuanto a mostrar algo de texto cuando el mouse está sobre una forma vectorial (función GeoJSON), estaría interesado en el complemento Leaflet.label ( demo ).
Con respecto a resaltar / cambiar el estilo del marcador de círculo, debe usar
"mouseover"
y"mouseout"
eventos en cada característica de su grupo de capas GeoJSON, como se muestra en ese tutorial de Folleto: Mapa interactivo de coropletas, sección "Agregar interacción" .Todo esto se puede hacer sin problemas junto con la ventana emergente abierta al hacer clic.
fuente