Show/Hide Markers that are pulled from function


Tags: javascript,jquery,css,leaflet

Problem :

I am using leaflet and want to show/hide the 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);
            }
        }
    }
}

That outputs markers from a json file. To show the markers I use: showResourcesByName("NameOfTheMarkersHere")

I have some ideas how this could be done, but I don't know how to make it work.

Idea #1: Add a css class to the function result, so all markers pulled from that function will have that css class, so I can toggle them on/off using javascript/css.

Idea #2: Add a way to toggle function result "on/off" in a button.

Idea #3: Put the function result inside a leaflet layer and toggle that layer on/off with a button.

Idea #4: Add a property in markers properties that can be filtered with a button when using the function.

Please, before answer take a look at my code:

http://plnkr.co/edit/dVgHt4VK0DnA30M3a8vq?p=preview



Solution :

So this is how I added a class to markers.

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

$(marker._icon).addClass('randomClass');

Don't forget to include jquery in your code for this to work

Here's my working plunger http://plnkr.co/edit/jVyvnNNvIzJqEn7Hm7S6?p=preview


    CSS Howto..

    How do I confer CSS properties upon elements retrieved from $.ajax()?

    How to add text to different parts of chart made from css, html, and javascript?

    CSS - how to make the div display as shorter list box?

    How to override facebook share button css

    How to fit a dynamic PHP form in a div (to be able to fit fullpage.js)?

    How to clean style sheets mess? [duplicate]

    How to format date elements (year, month, date) individually with CSS and Rails i18n?

    How to align this bootstrap radio button?

    How can I set the correct position of the text in CSS?

    How to set min-height using css [closed]

    How to slide-out a submenu from under the navigation bar using CSS transition?

    Option element bigger than select box - how to get the options list to expand to the left?

    How to get the initial value of style properties in javascript? [duplicate]

    How to apply a property only to the submit button

    How to perfectly center contents in an unordered list?

    HTML/CSS Making a textbox with text that is grayed out, and disappears when I click to enter info, how?

    CSS how to position element fixed just for y-axis?

    How do I know when is the right moment to stop using a specific css vendor-prefix?

    Asset Pipline, how to add image path to background: url()?

    How to make a foreground image using CSS?

    How to set the css property of dynamic data

    how to show images with it's original smoothness in IE

    How to give css class to the OK button of dialog in JQuery?

    how to add inline css to rails link_to helper

    How can I force CQ5.5 to ignore CSS data-uri-schemes?

    How to make width of element full width of screen and not parent css

    How do I align an item to the right inside a flex container?

    how to apply the css style only to child

    How do I get my Bootstrap webpage to have a full width

    How to use CSS to create a particular stylized, multi-lined text box?