¿Cómo hacer que los elementos emergentes y de clic funcionen?

8

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);
Wolfram
fuente
Por favor, ¿puedes explicar lo que quieres que pase al pasar el mouse?
ghybs
Lo siento, edité la pregunta. Gracias por formatear.
Wolfram

Respuestas:

4

Como @ghybs dijo, adjunte eventos a los marcadores de círculo dentro de ellos pointToLayer, así:

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>';
    var circle = L.circleMarker(latlng, geojsonMarkerOptions).bindPopup(popupContent,popupOptions);

    // Highlight the marker on hover
    circle.on('mouseover', function(){
        circle.setStyle({ color: 'red' });
    });

    // Un-highlight the marker on hover out
    circle.on('mouseout', function(){
        circle.setStyle(geojsonMarkerOptions);
    });

    // Open the popup on click. Actually optional, as popup automatically adds a click listener.
    circle.bindPopup(popupContent, popupOptions);
    circle.on('click', function(){
        circle.openPopup(latlng);
    });

    return circle;
}
IvanSanchez
fuente
Hola Ivan, muchas gracias por la respuesta, pero cuando agrego tu código, nada cambia, no resaltas el mouse sobre ...
Wolfram
1
El código de Ivan debería funcionar, una vez corregido por el error de código menor. Versión inicial del operador : jsfiddle.net/ve2huzxw/202 Con el código de Ivan: jsfiddle.net/ve2huzxw/203
ghybs
OK, genial, el resaltado funciona, pero no la ventana emergente de desplazamiento ... Verificará la solución a continuación. Muchas gracias hasta ahora!
Wolfram
0

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 ).

Leaflet.label es un complemento para agregar etiquetas a marcadores y formas en mapas con folletos.

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" .

Hagamos que los estados se destaquen visualmente de alguna manera cuando se ciernen con el mouse.

Todo esto se puede hacer sin problemas junto con la ventana emergente abierta al hacer clic.

ghybs
fuente
¡Gracias! Bueno, tengo que ver cómo instalar un complemento, etc ... Incluso si la codificación es más fácil, hay otros obstáculos para mí ;-)
Wolfram