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
5

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;
}
| improve this answer | |
  • 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
  • @IvanSanchez A+. Question: why do you bind twice the circle? you have 2 bindPopup you can use only once no? – adhg May 28 at 19:53
  • @adhg You're right, I mistakenly wrote code that calls bindPopup() twice, and the second could be simplified away. Fortunately, several calls to bindPopup() have no ill effect, since the current implementation will update the contents of a bound popup if there's a popup already bound. – IvanSanchez May 28 at 20:16
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.

| improve this answer | |
  • 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.