I have a map with a lot of markers that are pulled from this function:
function showResourcesByName(name) {
for (var i = 0; i < markers.resources.length; i++) {
var resName = markers.resources[i].name;
if (resName == name) {
var resIcon = icons.resources[i].icon;
var resSize = icons.resources[i].size;
var resPname = icons.resources[i].pname;
var customIcon = L.icon({
iconUrl: resIcon,
iconSize: resSize, // size of the icon
iconAnchor: [resSize[0]/2, resSize[1]/2], // point of the icon which will correspond to marker's location
popupAnchor: [2, -resSize[1]/2] // point from which the popup should open relative to the iconAnchor
});
for (var j = 0; j < markers.resources[i].coords.length; j++) {
var x = markers.resources[i].coords[j].x;
var y = markers.resources[i].coords[j].y;
L.marker([y, x], {icon: customIcon}).addTo(map).bindPopup(resPname);
}
}
}
}
Then I use the code showResourcesByName("AITokarServer");
to show all markers for that selector (AITokarServer) for example.
I have a sidebar with all categories, and want to show/hide markers if I click on that category. For example, if I click animals, I want to show only the markers from the "animals" group. Also I want to put a show/hide selector on each marker group too, if I click on "Shigi" link I want to show only the Shigi markers, that are pulled from this function: showResourcesByName("AIShigiServer");
I trid this example here: http://plnkr.co/edit/LVzmRcsVZ79wZ78E5yBd?p=preview But I don't know how to work with the function that I use and those selectors to show/hide.
And here is my full code with all the files. Each group is commented in the code where are the function that pulls the icons.