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.
Best Answer
Figured out! Here's how I solved it. Added a class to each marker using their names:
Then I hid the markers through css using display none to all markers class. And created a checkbox that show the marker usin js fade in fade out effect:
It works like a charm! And no need layers!