I'm having problems updating a Leaflet map from a click event on an anchor tag located within a Leaflet Control on the map. Chrome and Firefox on Mac seem to have identical problems, Safari is slightly better.
I have made a Leaflet control that allows a user to filter markers on a map. When the filter is executed, it shows an unordered list of results as anchor tags of the form:
ID: 1, Title: RECOM CoalitionThe 'id' for each anchor tag changes with the ID of the marker, as well as the text. After the list is populated, I run Jquery code to bind a click event to each anchor tag...
markerIDs = ["1", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18"];markerIDs.forEach(function ( id ) { setAnchorClick(id);});function setAnchorClick(id) { var aLink = "#result-li-" + id; $(aLink).on({ click: function() { var thisMarker = records[id]['marker']; thisMarker.openPopup(); map.panTo(thisMarker.getLatLng()); map.setZoom(10); } });}Note that records is a javascript Object that holds all data as well as a reference to the marker for all records in the database. The key for the records Object is the ID of the records, e.g. '1' or '10', etc.
When I first click an anchor tag, the map pans and zooms, but displays no popup. When I click a different anchor tag, and every other subsequent click of any tag thereafter, the map does not pan to the new location, nor show a popup (on Chrome and Firefox), but does pan in Safari.
However, after clicking an anchor tag, if I very slightly drag the map, the map updates to the correct location, centered on the correct marker, with an open popup. This works very consistently. Now, how to make this work without the need to slightly drag the map?
You can see a prototype here: http://maps.thebirdery.com/hr/hr3.php
In the 'Select Type of Research/Event' part of filter, click 'Proceed to date filter' button, then in 'Search by a Date Range' click the 'Run the filter' button'.
أكثر...
I have made a Leaflet control that allows a user to filter markers on a map. When the filter is executed, it shows an unordered list of results as anchor tags of the form:
ID: 1, Title: RECOM CoalitionThe 'id' for each anchor tag changes with the ID of the marker, as well as the text. After the list is populated, I run Jquery code to bind a click event to each anchor tag...
markerIDs = ["1", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18"];markerIDs.forEach(function ( id ) { setAnchorClick(id);});function setAnchorClick(id) { var aLink = "#result-li-" + id; $(aLink).on({ click: function() { var thisMarker = records[id]['marker']; thisMarker.openPopup(); map.panTo(thisMarker.getLatLng()); map.setZoom(10); } });}Note that records is a javascript Object that holds all data as well as a reference to the marker for all records in the database. The key for the records Object is the ID of the records, e.g. '1' or '10', etc.
When I first click an anchor tag, the map pans and zooms, but displays no popup. When I click a different anchor tag, and every other subsequent click of any tag thereafter, the map does not pan to the new location, nor show a popup (on Chrome and Firefox), but does pan in Safari.
However, after clicking an anchor tag, if I very slightly drag the map, the map updates to the correct location, centered on the correct marker, with an open popup. This works very consistently. Now, how to make this work without the need to slightly drag the map?
You can see a prototype here: http://maps.thebirdery.com/hr/hr3.php
In the 'Select Type of Research/Event' part of filter, click 'Proceed to date filter' button, then in 'Search by a Date Range' click the 'Run the filter' button'.
أكثر...