On <div> hover, how do I find the associated Mapbox marker, change its color, and open popup?

Question

I am having trouble using JS to forcefully open the Popup/Info Window for a specific marker when I hover over an associate div.

Please reference apartmentlist.com/ca/san-francisco for an example of what I am attempting: the user hovers over a div (e.g., a rental listing) and then the associated Mapbox map marker changes color and opens a Popup/Info Window. Note the image below in which the mouse is hovering over the div on the left:

Below is my current code. It successfully changes the marker color, but I am not sure how to open the popup.

Initialization, GeoJSON Definition, and Function

  <script>

        L.mapbox.accessToken = 'apiKey';

        var map = L.mapbox.map('map')
            .setView([37.8, -122.4], 13)
            .addLayer(L.mapbox.tileLayer('mapbox.streets'));

        var myLayer = L.mapbox.featureLayer().addTo(map);

        myLayer.setGeoJSON(geojson);

        myLayer.on('layeradd', function(e) {
            var marker = e.layer;
            var feature = marker.feature;
            var content = 'This is Point ID: ' + feature.properties.id;

            marker.bindPopup(content, {
                closeButton: false
            });
        });

        myLayer.on('mouseover', function(e) {
            var id = e.layer.feature.properties.id;
            $('div').removeClass('hover');
            $('div[data-rid="' + id + '"]').addClass('hover');

            // Open Popup on marker hover
            e.layer.openPopup();
        });

        myLayer.on('click', function(e) {
            // Open Popup on marker click
            e.layer.openPopup();
        });

        $('div').hover(function(e) {

            var id = $(this).data('id');

            // Iterate through GeoJSON until properties.id is found
            for (var i = 0; i < geojson.features.length; i++) {

                if(geojson.features[i].properties.id == id) {

                    // If id matches, open popup
                    // TODO: not working, likely conflict with setGeoJSON() below
                }
            }

            // Update map layer with new geoJSON
            myLayer.setGeoJSON(geojson);
        })

  </script>

How is the pop up triggered? Does it happen via a click by any chance? — Sina
Could you add your marker initialization process to your code example? — iH8
@Sina the popup is triggered by a hover over a specific div, which is tagged by a data attribution: data-id="abcxyz" — Jesse
@iH8 I just added the marker initialization process. Thanks for the help! — Jesse
well you could trigger the mouseover for the div as long as it matches. like: $("#abcxyz").mouseover(); did you try doing so? This should pop out the div you'd want to see. — Sina

iH8 iH8 · Accepted Answer · 2015-12-09T03:06:07

The "optimal" way is to add your Leaflet layers and corresponding HTML items in the same loop. It's efficient and that way you can easily add a reference to your HTML item in your Leaflet layer and visa versa. Imagine this:

// Create marker
var marker = new L.Marker([0,0]);
// Append marker to map
marker.addTo(map);

// Create link
var link = document.create('a');
// Append link to body
document.body.appendChild(link);

// Reference eachother:
link.marker = marker;
marker.link = link;

Now you can attach events to your marker and directly access the corresponding item in your HTML, for example:

marker.on('mouseover', function (e) {
    e.target.link.style.color = 'red'; // e.target == marker
});

// or

L.DomEvent.addListener(link, 'mouseover', function (e) {
    e.target.marker.openPopup();  // e.target == link
});

Combined:

var link = L.DomUtil.create('a', 'link', document.body);

var marker = new L.Marker([0,0]).bindPopup('Popup').addTo(map);

link.marker = marker;
marker.link = link;

L.DomEvent.addListener(link, 'mouseover', function (e) {
    e.target.marker.openPopup(); 
});

L.DomEvent.addListener(link, 'mouseout', function (e) {
    e.target.marker.closePopup(); 
});

marker.on('mouseover', function (e) {
    e.target.link.style.color = 'red';
});

marker.on('mouseout', function (e) {
    e.target.link.style.color = 'black';
});

Plunker: http://plnkr.co/edit/IjCB9s?p=preview

On <div> hover, how do I find the associated Mapbox marker, change its color, and open popup?

1 Answers