My current project involves developing an interactive map where users can select a year from the timeline and apply filters. This functionality is achieved through XML HttpRequest, which refreshes the SVG each time a selection is made.
The SVG code for the map, along with the JavaScript functions for zooming and tooltips, is dynamically generated whenever a user chooses a year or filter. The code is written in Java as it contains if statements; however, I have encountered an issue where the JavaScript functions fail to work after users make their selections. To address this problem, the same JavaScript code is repeated three times within a single class under separate if statements.
This is the XML HTTP Request code used:
var selectedYear = document.getElementById('year').innerHTML;
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("map").innerHTML = request.responseText;
}
};
request.open("GET", "/BCMapYear.html/" + selectedYear, true);
request.send();
JavaScript code:
"<script type=\"text/javascript\">" +
"var transformMatrix = [1,0,0,1,0,0];"+
"var svg = document.getElementById('svg-map');"+
"var viewBox = svg.getAttributeNS(null, \"viewBox\").split(\" \");"+
"var centerX = parseFloat(viewBox[2])/2;"+
"var centerY = parseFloat(viewBox[3])/2;"+
... (The rest of the JavaScript code follows here)
When checking the console, an error message stating 'uncaught referenceerror: zoom is not defined' appears.