Comment faire fonctionner à la fois le survol et le clic?

Je suis assez nouveau dans tout cela.

Je veux avoir un survol / survol ET un clic sur ma fenêtre geojson. Voici le code jusqu'à présent, mais je ne sais pas où inclure le survol sans gâcher la fenêtre contextuelle de clic. Le survol doit afficher le contenu d'un champ de texte et mettre en surbrillance le marqueur de cercle.

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

Comme l'a dit @ghybs, attachez des événements aux marqueurs de cercle eux-mêmes à l'intérieur pointToLayer, comme ceci:

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

Quant à afficher du texte lorsque la souris survole une forme vectorielle (fonctionnalité GeoJSON), vous seriez intéressé par le plugin Leaflet.label ( démo ).

Leaflet.label est un plugin pour ajouter des étiquettes aux marqueurs et aux formes sur les cartes alimentées par des dépliants.

En ce qui concerne la mise en surbrillance / modification du style du marqueur de cercle, vous devez utiliser "mouseover"et les "mouseout"événements sur chaque entité de votre groupe de couches GeoJSON, comme indiqué dans ce didacticiel Leaflet: Carte choroplèthe interactive, section "Ajouter une interaction" .

Faisons en sorte que les états soient mis en évidence visuellement d'une manière ou d'une autre lorsqu'ils sont survolés avec une souris.

Tout cela peut être fait sans problème avec le popup ouvert au clic.