Cómo hacer que tanto pase y haga clic en ventana emergente trabajo?

Question

Soy bastante nuevo en todo esto... Quiero tener un hover/ratón Y haga clic en ventana emergente trabajar en mi geojson capa. Aquí está el código hasta el momento, pero no sé dónde incluir el hover sin estropear haga clic en el menú emergente. El pase debe mostrar el contenido de un campo de texto y resaltar el círculo marcador. Gracias!

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

Answer 1

Como @ghybs dijo, adjuntar eventos en el círculo de los marcadores dentro de 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;
}

Answer 2

Como para mostrar algunas de texto cuando el ratón está sobre una forma de vector (GeoJSON característica), usted estaría interesado en el Prospecto.etiqueta plugin (demo).

El folleto.la etiqueta es plugin para añadir etiquetas a los marcadores y las formas en folleto powered mapas.

En cuanto destacando / cambiar el estilo del círculo marcador, usted debe utilizar "mouseover" y "mouseout" eventos en cada una de las características de su GeoJSON grupo de capas, como se muestra en que el Prospecto tutorial Interactivo Choropleth Mapa, la sección "Adición de Interacción".

vamos a hacer a los estados destacado visualmente de alguna manera cuando se cernía con un ratón.

Todo esto se puede hacer sin problema junto con la ventana emergente que se abre al hacer clic.