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.


  • That is a quite broad question with that code, I will try to give you some hints: You should create layers for each animal, plant, item. When you create markers add those markers to these layers, instead of directly to the map. You can then remove and add the layers later at any time. To turn off and on layers, it is probably the easiest to use a Layer control. If you don't want/can't use Layer control find out how to attach the "onclick" listener to your menu entries, and toggle layers that way. – chrki Jan 30 '16 at 17:37
  • If I can use layers using that function that pulls markers from the json file would be good, I tried and it didnt work. – RogerHN Jan 30 '16 at 19:50

Figured out! Here's how I solved it. Added a class to each marker using their names:

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;

                                marker = L.marker([y, x], {icon: customIcon});

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:

$(document).ready(function () {
                    $('#markertoggle').change(function () {
                        if (!this.checked) 
                        //  ^

It works like a charm! And no need layers!


Another way to do this without messing around with classes and just using the name of the image:

$('.leaflet-pane img[src="images/pin1.png"]').hide();

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.