1

I am new JavaScript but I am looking for a way to use checkboxes to turn on and off sets of pins. The problem I am having is that I want to find the intersection of two arrays and pull the intersection array into a layer group to add on my map. I have no idea how to do this. I will post some samples below but it is all in a fiddle/codepen here: https://codepen.io/Arrakis_Surfer/pen/WNwZbME

Here are my markers as variables:

var Naturhistoriska   = L.marker([59.3689847,18.0538061], {icon: redIcon}).bindPopup("<a href='https://leksplay.com/museumofnaturalhistory'>Naturhistoriska Riksmuseet</a>"),
        Junibacken   = L.marker([59.3295566,18.0894793], {icon: redIcon}).bindPopup("<a href='https://leksplay.com/junibacken'>Junibacken</a>"),
        Medeltidsmuseet   = L.marker([59.3283032,18.070198], {icon: redIcon}).bindPopup("<a href='https://leksplay.com/edeltidsmuseet'>Medeltidsmuseet</a>"),
        Historiska   = L.marker([59.3348234,18.0908018], {icon: redIcon}).bindPopup("<a href='https://leksplay.com/historiska'>Historiska Museet</a>"),
        ArkDes    = L.marker([59.325798, 18.085240], {icon: redIcon}).bindPopup("<a href='https://leksplay.com/arkdes'>ArkDes</a>"),
        Fjarilshuset   = L.marker([59.3662935,18.030667], {icon: redIcon}).bindPopup("<a href='https://leksplay.com/butterflyhouse'>The Butterfly House - Haga Ocean</a>"),
        Tekniska   = L.marker([59.3324463,18.1187436], {icon: redIcon}).bindPopup("<a href='https://leksplay.com/tekniska'>Tekniska Museet</a>"),
        Polismuseet   = L.marker([59.3330834,18.1188801], {icon: redIcon}).bindPopup("<a href='https://leksplay.com/policemuseum'>Polismuseet</a>"),
        Skansen   = L.marker([59.3242538,18.1011734], {icon: redIcon}).bindPopup("<a href='https://leksplay.com/skansen'>Skansen</a>"),
        Bergrummet   = L.marker([59.3265143,18.0812508], {icon: redIcon}).bindPopup("<a href='https://leksplay.com/stockholmtoymuseum'>Stockholm Toy Museum</a>"),
        Vikingaliv   = L.marker([59.3266158,18.0950783], {icon: redIcon}).bindPopup("<a href='https://leksplay.com/vikingmuseum'>The Viking Museum</a>"),
        Vasa   = L.marker([59.3280534,18.0912645], {icon: redIcon}).bindPopup("<a href='https://leksplay.com/vasamuseum'>The Vasa Museum</a>"),
        Nordiska   = L.marker([59.329048,18.0942344], {icon: redIcon}).bindPopup("<a href='https://leksplay.com/nordiska'>Nordiska Museet</a>"),
        Nobel   = L.marker([59.325337,18.0706949], {icon: redIcon}).bindPopup("<a href='https://leksplay.com/nobelmuseum'>The Nobel Prize Museum</a>"),
        Moderna   = L.marker([59.326269, 18.084218], {icon: redIcon}).bindPopup("<a href='https://leksplay.com/moderna'>Moderna Museet</a>"),
        Stadsmuseum   = L.marker([59.3196786,18.0708472], {icon: redIcon}).bindPopup("<a href='https://leksplay.com/stockholmstadsmuseum'>Stockholm City Museum</a>");

I have put these markers into groups so I can easily put them on the map and organize them by attributes so users can apply their own filter:

var MPaid=[Junibacken,Fjarilshuset,Tekniska,Polismuseet,Skansen,Bergrummet,Vikingaliv,Vasa,Nordiska,Nobel],
        MFree=[Naturhistoriska,ArkDes,Moderna],
        MResto=[Naturhistoriska,Junibacken,ArkDes,Fjarilshuset,Tekniska,Skansen,Bergrummet,Vikingaliv,Vasa,Nordiska,Nobel,Moderna],
        MPicnic=[Naturhistoriska,ArkDes,Tekniska,Polismuseet,Skansen,Vasa,Nordiska,Moderna],
        M03=[Junibacken,Fjarilshuset,Tekniska,Skansen],
        M37=[Naturhistoriska,Junibacken,ArkDes,Fjarilshuset,Tekniska,Polismuseet,Skansen,Bergrummet,Nordiska,Moderna],
        M712=[Naturhistoriska,Junibacken,ArkDes,Fjarilshuset,Tekniska,Polismuseet,Skansen,Bergrummet,Vikingaliv,Vasa,Nordiska,Nobel,Moderna],
        M1212=[Naturhistoriska,ArkDes,Fjarilshuset,Tekniska,Polismuseet,Skansen,Bergrummet,Vikingaliv,Vasa,Nordiska,Nobel,Moderna],
        MAgeAll=[Fjarilshuset,Tekniska,Skansen];

My inputs look like this:

<div class="leaflet-control-layers-overlays" style="background-color:white">
    <label>
        <div><input type="checkbox" class="leaflet-control-layers-selector" id="AllMuseums" value="AllMuseums" checked><span>All Museums</span></div>
    </label>
    <label>
        <div><input type="checkbox" class="leaflet-control-layers-selector" id="MPaid" value="MPaid" ><span id="icons1">Paid Admission</span></div>
    </label>
    <label>
        <div><input type="checkbox" class="leaflet-control-layers-selector" id="MFree" value="MFree" ><span id="icons2">Free Admission</span></div>
    </label>
    <label>
        <div><input type="checkbox" class="leaflet-control-layers-selector" id="MResto" value="MResto"><span id="icons3">Restaurants</span></div>
    </label>
    <label>
        <div><input type="checkbox" class="leaflet-control-layers-selector" id="MPicnic" value="MPicnic" ><span id="icons4" >Picnic Area</span></div>
    </label>
    <label>
        <div><input type="checkbox" class="leaflet-control-layers-selector" id="M03" value="M03" ><span id="icons5">Ages 0-3</span></div>
    </label>
    <label>
        <div><input type="checkbox" class="leaflet-control-layers-selector" id="M37" value="M37" ><span id="icons6">Ages 3-7</span></div>
    </label>
    <label>
        <div><input type="checkbox" class="leaflet-control-layers-selector" id="M712" value="M712" ><span id="icons7">Ages 7-12</span></div>
    </label>
    <label>
        <div><input type="checkbox" class="leaflet-control-layers-selector" id="M1212" value="M1212" ><span id="icons8">Ages 12+</span></div>
    </label>
    <label>
        <div><input type="checkbox" class="leaflet-control-layers-selector" id="MAgeAll" value="MAgeAll" ><span id="icons9">All Ages</span></div>
    </label>
</div>
1
  • Your codepen example is not working, it throws JQuerry syntax error on each click on selection fields. – TomazicM Sep 6 '20 at 11:20

Your Answer

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

Browse other questions tagged or ask your own question.