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 (eg, 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>
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';
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.