8

I am pretty new to all of this.

I want to have a hover/mouseover AND click popup work on my geojson layer. Here is the code so far, but I don't know where to include the hover without messing up the click popup. The hover should show the content of a text field and highlight the circle marker.

$.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);
  • Please can you explain what you want to happen on mouseover? – ghybs Mar 12 '16 at 20:39
  • Sorry, edited the question. thanks for formatting. – Wolfram Mar 13 '16 at 15:15
4

As @ghybs said, attach events to the circle markers themselves inside pointToLayer, like so:

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;
}
  • Hi Ivan,many thanks for the reply, but when I add your code nothing changes, no highlighting on mouse over... – Wolfram Mar 15 '16 at 1:35
  • 1
    Ivan's code should work, once corrected for the minor code mistake. Op's initial version: jsfiddle.net/ve2huzxw/202 With Ivan's code: jsfiddle.net/ve2huzxw/203 – ghybs Mar 15 '16 at 5:26
  • OK, cool, the highlighting works, but not the hover popup... Will check the solution below. Many thanks so far! – Wolfram Mar 24 '16 at 22:14
0

As for showing some text when the mouse is over a vector shape (GeoJSON feature), you would be interested in Leaflet.label plugin (demo).

Leaflet.label is plugin for adding labels to markers & shapes on leaflet powered maps.

Regarding highlighting / changing the style of the circle marker, you should use "mouseover" and "mouseout" events on each feature of your GeoJSON layer group, as shown in that Leaflet tutorial: Interactive Choropleth Map, section "Adding Interaction".

let’s make the states highlighted visually in some way when they are hovered with a mouse.

All this can be done without issue together with the popup opened on click.

  • Thanks! Well, have to see how install a plugin etc.... Even if the coding is easier there are other obstacles for me ;-) – Wolfram Mar 25 '16 at 12:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.