Wie funktioniert das Hover- und Click-Popup?

Ich bin ziemlich neu in all dem.

Ich möchte einen Hover / Mouseover UND ein Klick-Popup auf meiner Geojson-Ebene. Hier ist der Code bis jetzt, aber ich weiß nicht, wo ich den Hover einfügen soll, ohne das Klick-Popup durcheinander zu bringen. Der Hover sollte den Inhalt eines Textfelds anzeigen und die Kreismarkierung markieren.

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

Fügen Sie, wie @ghybs sagte, Ereignisse wie folgt an die Kreismarkierungen selbst an pointToLayer:

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

Wenn Sie Text anzeigen möchten, wenn sich die Maus über einer Vektorform befindet (GeoJSON-Funktion), ist das Plugin Leaflet.label ( Demo ) von Interesse .

Leaflet.label ist ein Plugin zum Hinzufügen von Beschriftungen zu Markierungen und Formen auf Karten mit Broschüren.

In Bezug auf das Hervorheben / Ändern des Stils der Kreismarkierung sollten Sie "mouseover"und "mouseout"Ereignisse für jede Funktion Ihrer GeoJSON-Ebenengruppe verwenden, wie in diesem Merkblatt-Tutorial: Interaktive Choroplethenkarte, Abschnitt "Hinzufügen von Interaktion" gezeigt .

Lassen Sie uns die Zustände visuell hervorheben, wenn Sie mit der Maus darüber fahren.

All dies kann ohne Probleme zusammen mit dem Popup durchgeführt werden, das beim Klicken geöffnet wird.