[JS] variable ipv string doorgeven via data attribute

[bartbh]

Ik ben bezig met het opzetten van een webapplicatie gebaseerd op leafletjs. Als onderdeel daarvan wil ik een eigen layer control maken om lagen aan en uit te kunnen zetten.

Een laag kan ik aanzetten via map.addLayer(layer). Dus de laag 'restaurants' kan ik aanzetten via map.addLayer(restaurants).

Nu wil de de naam van laag doorgeven in de data attribute van een link, echter heb ik dus eigenlijk de variable zelf nodig en niet de naam als string.

Nu heb ik dat opgelost door gebruik te maken van window[], maar ik vraag me af of er nog een andere/betere oplossing mogelijk is.

HTML:

<a data-layer="restaurants" href="#">restaurants</a>
<a data-layer="sport" href="#">sport</a>
<a data-layer="sights" href="#">sights</a>

JavaScript:

$("a").click(function(event) {
    event.preventDefault();

    id = $(this).data("layer"); //dit is dan 'restaurants', 'sport' of 'sights'
   
    if(map.hasLayer(window[id])) {
        $(this).removeClass('selected');
        map.removeLayer(window[id]); //dit is dan 'restaurants', 'sport' of 'sights'
    } else {
        map.addLayer(window[id]);                 
        $(this).addClass('selected');
   }
});

En omdat een voorbeeld meer zegt dan woorden, een uitgekleed voorbeeld: http://jsfiddle.net/fwLdbf3c/1/

[azerty]

Als je je global (window) namespace minder wilt vervuilen, kun je je layers in een variabele grouperen, op deze manier:

JavaScript:

var layers = {
    restaurants: L.layerGroup([aa, bb]),
    sport : L.layerGroup([cc, dd]),
    sights : L.layerGroup([ee, ff])
};

Je kunt ze dan benaderen via layers[id] of als je een standaard waarde wilt zetten layers.restaurant.

Voorbeeld: http://jsfiddle.net/z4uo6zvy/

[bartbh]

Top! Dat kan natuurlijk ook!