I have a series of collapsible sections that display data from a geoJson file and are dynamically updated as you zoom in and out on a map to show markers within the map's bounds.
When you click on a collapsible section, it expands to reveal details about the specific feature.
I want to include a link or button below the displayed information labeled 'Zoom To Marker', which, when clicked, will zoom the map to the location of the marker.
Despite my efforts, I keep running into issues with the ZoomTo() function being undefined. The ZoomTo() function is situated above the function in the external JavaScript file responsible for creating the list and link.
This problem is really frustrating me because it seems like such a simple task. Although the link appears fine, clicking on it triggers an error message:
Uncaught ReferenceError: ZoomTo is not defined
javascript:ZoomTo(extent);:1
I've attempted various solutions from StackOverflow without success—such as making it global, reordering the functions, using buttons, and appending them. Both functions reside within an initMap function called when the window loads.
The FeatureType function is invoked by event handlers whenever the map changes.
function ZoomTo(extent) {
//map.getView().fit(extent,{padding: [100, 100, 100, 100],maxZoom:15, duration:500});
alert(extent);
}
function FeatureType(mapfeaturetype, mapExtent) {
htmlStr = "<div class='accordion' id="
accordionExample ">";
// loop through the feature array
for (var i = 0, ii = mapfeaturetype.length; i < ii; ++i) {
var featuretemp = mapfeaturetype[i];
// retrieve geometry for each feature point
var geometry = featuretemp.getGeometry();
var extent = geometry.getExtent();
extent = ol.proj.transformExtent(extent, 'EPSG:3857', 'EPSG:4326');
// If the feature falls within the map view bounds, display its details in a collapsible section in the side menu
var inExtent = (ol.extent.containsExtent(mapExtent, extent));
if (inExtent) {
htmlStr += "<div class='accordion-item'><div class='accordion-header' id='oneline'>"
htmlStr += "<span class='image'><img src=" + imgType + "></span><span class='text'>"
htmlStr += "<a class='btn' data-bs-toggle='collapse' data-bs-target='#collapse" + i + "' href='#collapse" + i + ""
htmlStr += "aria-expanded='false' aria-controls='collapse" + i + "'>" + featuretemp.get('Name') + "</a></span>"
htmlStr += "</div><div id='collapse" + i + "' class='accordion-collapse collapse' data-bs-parent='#" + accordionid + "'>"
htmlStr += "<div class='accordion-body'><h3>" + featuretemp.get('Address') + "</h3><h3>" + featuretemp.get('ContactNo') + "</h3>"
htmlStr += "<h5><a href=" + featuretemp.get('Website') + " target='_blank'> " + featuretemp.get('Website') + " </a></h5>"
htmlStr += "<h5>" + featuretemp.get('Email') + "</h5><h5>" + featuretemp.get('Descriptio') + "</h5>"
htmlStr += "<div id='zoom'><a href='javascript:ZoomTo(extent);'>Zoom to Marker</a></div>"
htmlStr += "</div></div></div>";
}; // end if
}; // end loop
htmlStr += "</div>"
document.getElementById("jsoncontent").innerHTML += htmlStr
}