Wie funktioniert das Hover- und Click-Popup?

8

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);
Wolfram
quelle
Können Sie bitte erklären, was beim Mouseover passieren soll?
Ghybs
Entschuldigung, die Frage wurde bearbeitet. Danke für die Formatierung.
Wolfram

Antworten:

4

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;
}
IvanSanchez
quelle
Hallo Ivan, vielen Dank für die Antwort, aber wenn ich Ihren Code hinzufüge, ändert sich nichts, keine Hervorhebung bei der Maus über ...
Wolfram
1
Iwans Code sollte funktionieren, sobald er für den kleinen Codefehler korrigiert wurde. Op's ursprüngliche Version: jsfiddle.net/ve2huzxw/202 Mit Iwans Code: jsfiddle.net/ve2huzxw/203
Ghybs
OK, cool, die Hervorhebung funktioniert, aber nicht das Hover-Popup ... Überprüft die unten stehende Lösung. Vielen Dank bisher!
Wolfram
0

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.

Ghybs
quelle
Vielen Dank! Nun, ich muss sehen, wie man ein Plugin usw. installiert. Auch wenn die Codierung einfacher ist, gibt es andere Hindernisse für mich ;-)
Wolfram