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:

Solution :

So this is how I added a class to markers.

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


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

Here's my working plunger

    CSS Howto..

    In Python, I can print HTML to the browser, how can I ensure that the CSS that relates to it also get “printed”

    How to set my Django form on the center of the page

    How create an overlay button on different containing div

    Codeigniter: how to access css files from different views?

    How to declare CSS font-face with font-weight and font-style properly?

    how to select css class attributes from mootools,getStyle()?

    How to have two elements with scrollbars next to each other?

    How to put my form on top of an image in css/html?

    How do I 'freeze' a block level element?

    How to change the background color on a input checkbox with css? [duplicate]

    How to create CSS/JavaScript circles grid

    Php - Javascript - How do I know which pages are in color and which are in black and white?

    How to remove css and javascript code in source code of website

    How to position three divs horizontally

    How to install CSS templates with Flask?

    CSS - How to set height of absolute div same with neighbor image?

    How to loop this css slider animation?

    How to let the chrome forget the page scroll position?

    How can I use html tag in this javascript? [duplicate]

    How to get the style value using attr

    How to start an css effect when website open

    How to fix Image on top of text with css

    How do I set the table cell widths to minimum except last column?

    When I print my webpage I lose all the css colouring. Is there an option or script to print a webpage exactly how it looks?

    How to center an image .logo via css? [duplicate]

    how to simulate mouse hover on image in css

    Fill dynamic
    's with content. But how to show it?

    CSS: can't understand how to work with the z-index

    How to fix inconsistent rendering of adjacent TD borders when they are collapsed?

    How to change the colors of HTML form elements displayed in UIWebView?