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);
}
}
You need to inject the function which creates the map, you can do this by following:
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 -->
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);
}
}