Como fazer o pop-up pairar e clicar funcionar?


8

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

Por favor, você pode explicar o que deseja que aconteça com o mouse?
ghybs

Desculpe, editou a pergunta. obrigado pela formatação.
Wolfram

Respostas:


4

Como o @ghybs disse, anexe eventos aos marcadores do círculo pointToLayer, como se segue :

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;
}

Oi Ivan, muito obrigado pela resposta, mas quando eu adiciono o seu Código nada muda, não destacando no mouse sobre ...
Wolfram

1
O código de Ivan deve funcionar, uma vez corrigido o erro menor de código. A versão de Op inicial: jsfiddle.net/ve2huzxw/202 Com código de Ivan: jsfiddle.net/ve2huzxw/203
ghybs

OK, legal, o destaque funciona, mas não o pop-up flutuante ... Verific a solução abaixo. Muito obrigado até agora!
Wolfram

0

Quanto à exibição de algum texto quando o mouse está sobre uma forma vetorial (recurso GeoJSON), você estaria interessado no plugin Leaflet.label ( demo ).

Leaflet.label é um plugin para adicionar rótulos a marcadores e formas em mapas de folhetos.

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

vamos destacar visualmente os estados quando eles estiverem pairando com o mouse.

Tudo isso pode ser feito sem problemas, juntamente com o pop-up aberto ao clicar.


Obrigado! Bem, temos que ver como instalar um plugin etc .... Mesmo que a codificação é mais fácil, existem outros obstáculos para me ;-)
Wolfram
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.