Map zoom on click

user_16422274 0
Viewed 112

I have a filterable map on my Wordpress site which I've made with the LocateandFilter plugin on Wordpress that uses a Leaflet map with a Google Maps overlay. I want the map to zoom on on the state when the associated state checkbox is clicked on the left pane. I'm decent at using wordpress, coding including javascript and since this isn't an included functionality of the plugin I thought I'd be able to hack it. I know that I need to locate the map variable (which does not appear to be map) and change the options based on a click - I can't figure out how to select the map and change it's options. I've been researching for a few hours now and I'm realizing I just don't have the background to figure this out. However I'm in too deep now to switch plugins. Can anyone help?

here is the page: https://armor-pt.com/locations/

If I could figure out how to select the map/what the map variable was I would write some code like this:

function zoomArizona(){
 if (document.querySelector('div.la-filter-261 input').checked){
  mymap.flyTo([34, 111], 5);
  } else {
   mymap.flyTo([37, 95], 0);
   }
}
leaflet wordpress javascript
1 Answers

You need to inject the function which creates the map, you can do this by following:

  1. Add the next lines somewhere after the script leaflet-filters is added.
<script type='text/javascript' src='https://armor-pt.com/wp-content/plugins/locateandfilter/public/js/leaflet-filters/leaflet-filters.js?ver=1.4.11' id='locate-and-filter-leaflet-filters-js'></script>

...
<script> <!-- optional -->
var oldFnc = leaflet_filters_class; // copy the original function
leaflet_filters_class = function(params){ // add your own function to the variable name which will be called later from the plugin
    var leaflet_filters = new oldFnc(params); // execute the original function
    window.leaflet_filters = leaflet_filters; // make the result global accessible
    return leaflet_filters; // return the result, like expected from the original function
}
<script> <!-- optional -->
  1. Now you can add your own Leaflet logic. Keep in mind that this can be only executed after the map is initialized from the plugin.
var mymap = leaflet_filters.map;
function zoomArizona(){
 if (document.querySelector('div.la-filter-261 input').checked){
  mymap.flyTo([34, 111], 5);
  } else {
   mymap.flyTo([37, 95], 0);
   }
}
user_82839380
Related