Firstly, Stackoverflow has so far been brilliant in helping me overcome a number of issues. I have very little knowledge of JS and I would really appreciate help in overcoming one huge hurdle I have encountered.
I have a project that essentially involves the creation of google map feature that contains markers referring to news developments in a particular area. The user has the option to use checkboxes on a sidepanel that enables them filter the markers down by category, date and area. These markers overlap - and while I have so far managed to get the checkboxes working individually, they aren't functioning correctly. For example, when I filter down to show only events for April 19 and then filter to remove criminal activity (for example) the criminal activity events that exist in the date categories that have been unchecked will be shown.
The work I have made so far is as follows:
var map;
var customIcons = [];
var markerGroups = [];
function initMap() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(32.8872, 13.1913),
zoom: 8,
});
var infoWindow = new google.maps.InfoWindow;
downloadUrl('/platform/themes/platform/parsetoxml.php', function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName('marker');
for (var i = 0; i < markers.length; i++) {
var id = markers[i].getAttribute('id');
var id_marker = markers[i].getAttribute('incidentcategory');
var type = markers[i].getAttribute('incidentcategory');
var incidenttype = markers[i].getAttribute('incidenttype');
var incidentlocation = markers[i].getAttribute('location');
var detail = markers[i].getAttribute('detail');
var incidentcategory = markers[i].getAttribute('incidentcategory');
var icontype = markers[i].getAttribute('iconcolor');
var incidentdate = markers[i].getAttribute('incidentdate');
var region = markers[i].getAttribute('region');
var district = markers[i].getAttribute('district');
var regionformatted = markers[i].getAttribute('regionformatted');
var districtformatted = markers[i].getAttribute('districtformatted');
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute('lat')),
parseFloat(markers[i].getAttribute('lng'))
);
var icon = customIcons[icontype] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
type: type
});
if (!markerGroups[type]) markerGroups[type] = [];
markerGroups[type].push(marker);
if (!markerGroups[incidentdate]) markerGroups[incidentdate] = [];
markerGroups[incidentdate].push(marker);
if (!markerGroups[regionformatted]) markerGroups[regionformatted] = [];
markerGroups[regionformatted].push(marker);
};
google.maps.event.addDomListener(document.getElementById('crime'), 'click', function() {
showMarker("crime")
});
google.maps.event.addDomListener(document.getElementById('civilunrest'), 'click', function() {
showMarker("civilunrest")
});
google.maps.event.addDomListener(document.getElementById('accident'), 'click', function() {
showMarker("accident")
});
google.maps.event.addDomListener(document.getElementById('northwestern'), 'click', function() {
showMarker("northwest")
});
google.maps.event.addDomListener(document.getElementById('eastern'), 'click', function() {
showMarker("eastern")
});
google.maps.event.addDomListener(document.getElementById('southwestern'), 'click', function() {
showMarker("southwestern")
});
google.maps.event.addDomListener(document.getElementById('2020-04-15'), 'click', function() {
showMarker("2020-04-15")
});
google.maps.event.addDomListener(document.getElementById('2020-04-14'), 'click', function() {
showMarker("2020-04-14")
});
google.maps.event.addDomListener(document.getElementById('2020-04-13'), 'click', function() {
showMarker("2020-04-13")
});
google.maps.event.addDomListener(document.getElementById('2020-04-12'), 'click', function() {
showMarker("2020-04-12")
});
});
}
function showMarker(regionformatted, incidentdate, type) {
for (var i = 0; i < markerGroups[type].length; i++) {
var marker = markerGroups[type][i];
if (!marker.getVisible()) {
marker.setVisible(true);
} else {
marker.setVisible(false);
}
}
}
function showMarker(regionformatted, incidentdate, type) {
for (var i = 0; i < markerGroups[incidentdate].length; i++) {
var marker = markerGroups[incidentdate][i];
if (!marker.getVisible()) {
marker.setVisible(true);
} else {
marker.setVisible(false);
}
}
}
function showMarker(regionformatted, incidentdate, type) {
for (var i = 0; i < markerGroups[regionformatted].length; i++) {
var marker = markerGroups[regionformatted][i];
if (!marker.getVisible()) {
marker.setVisible(true);
} else {
marker.setVisible(false);
}
}
}
function bindInfoWindow(marker, map, infoWindow, infowincontent, infowincontentinner, id, incidentdate, incidentcategory, incidentlocation, incidenttype, detail, icon, icontype, region, district, point) {
marker.addListener('click', function() {
infoWindow.setContent(infowincontent);
infoWindow.open(map, marker);
});
}
function downloadUrl(url,callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
My html markup for the checkboxes are:
<div class="icheck-material-primary">
<input type="checkbox" id="2020-04-15" value="2020-04-15" checked />
<label for="2020-04-15">15 April 2020</label>
</div>
<div class="icheck-material-primary">
<input type="checkbox" id="2020-04-14" value="2020-04-14" checked />
<label for="2020-04-14">14 April 2020</label>
</div>
<div class="icheck-material-primary">
<input type="checkbox" id="2020-04-13" value="2020-04-13" checked />
<label for="2020-04-13">13 April 2020</label>
</div>
<div class="icheck-material-primary">
<input type="checkbox" id="2020-04-12" value="2020-04-12" checked />
<label for="2020-04-12">12 April 2020</label>
</div>
<div class="icheck-material-primary">
<input type="checkbox" id="northwestern" value="northwestern" checked/>
<label for="northwestern">North-West</label>
</div>
<div class="icheck-material-primary">
<input type="checkbox" id="eastern" value="eastern" checked/>
<label for="eastern">Eastern Region</label>
</div>
<div class="icheck-material-primary">
<input type="checkbox" id="southwestern" value="southwestern" checked/>
<label for="southwestern">South-Western Region</label>
</div>
<div class="icheck-material-accident">
<input type="checkbox" id="accident" value="accident" checked/>
<label for="accident">Accident</label>
</div>
<div class="icheck-material-civilunrest">
<input type="checkbox" id="civilunrest" value="civilunrest" checked/>
<label for="civilunrest">Civil Unrest</label>
</div>
<div class="icheck-material-crime">
<input type="checkbox" id="crime" value="crime" checked/>
<label for="crime">Crime</label>
</div>
An example of the XML markers being used is:
<marker id="31" incidenttype="Crime" detail="The police conducted a routine patrol of the coastline" lat="10.9534071" lng="50.1204431" location="Example" incidentcategory="crime" iconcolor="crime" incidentdate="2020-03-16" region="Eastern Region" district="Example Province" regionformatted="eastern" districtformatted="example" />
Any help to resolve this would be greatly appreciate and will save me from suffering more bruise marks on my forehead after spending the better part of yesterday, last night and early this morning trying to find a solution to this.
Thanks so much in advance.
