2

Supporting Links

Website Location:
http://bit.ly/2fXCiTH
.JS File Location:
http://bit.ly/2g56W0U

Trying to accomplish

I would like to have a specific .png legend associated to each individual layer.

Problems so far

I have not been able to get code to recognize the layers being fired

My non-working code so far


var temperaturesLegend = L.control({
    position: 'bottomright'
});
var xwLegend = L.control({
    position: 'bottomright'
});

temperaturesLegend.onAdd = function(map) {
    var div = L.DomUtil.create('div', 'info legend');
    div.innerHTML +=
        '';
    return div;
};

//temperaturesLegend.addTo(map);

xwLegend.onAdd = function(map) {
    var div = L.DomUtil.create('div', 'info legend');
    div.innerHTML +=
        '';
    return div;
};

// count plus 1
others = 1;

// Add and remove layers
map.on('overlayadd', function(eventLayer) {
    // Switch to the temperaturesLegend...
    if (eventLayer.name === 'temperatures') {
        // xwlegend.removeFrom(map);
        temperaturesLegend.addTo(map);
    } else { // Or switch to the xwlegend...
        if (others < 1) {
            xwLegend.addTo(map);
        }
        others++; // temperaturesLegend removeFrom(map);
        //xwlegend.addTo(map);
    }
});

// Add and remove layers
map.on('overlayremove', function(eventLayer) {
    temperatures = eventLayer;
    //console.log(eventLayer.name);
    // Switch to the xwlegend...
    if (eventLayer.name === 'temperatures') {
        this.removeControl(temperaturesLegend);

    } else { // Or switch to the xwlegend...
        others--;
        if (others < 1) {
            this.removeControl(xwLegend);
        }

    }
});
  • welcome to GIS Stack Exchange. Rather than making people step through your complicated code, I'd suggest creating a much simpler example which can run stand-alone on jsfiddle.net. Create a basic example with 2 layers, and associated PNG legends, and we can help you figure out how to switch the legend when the layer changes. The principle can then be expanded to fit within your app. See stackoverflow.com/help/mcve – Stephen Lead Oct 10 '17 at 0:34
  • Stephen, As you said, this is a very complicated .js file ( the section above ) is only a small piece. If you take a look at the site, there are approximately (8) Base maps & (30) main layers, probably double the combined possibilities. I thought someone may have run into this problem as well and have a code solution that might be customized into a fix. – John Daniel Jarvis Oct 10 '17 at 16:52
  • (Cont.) Initially the site loads a weather temp. layer *(comprised of a basemap, a JSON data layer and a heat-map tile layer) and we have a .png legend for temperatures, there is a layer for windspeed/direction..etc.. that we have legend(s) for each individual layer, and so on and so on. – John Daniel Jarvis Oct 10 '17 at 16:52
  • (Cont..) Most associated weather data providers (ie) NOAA, OWM, Aeris, etc... do not provide the ability to include a specific legend with a specific weather layer. BUT Leaflet does offer the ability for a map overlay (map.on/.remove) overlay control. I have read here on stack several people attempting the same with similar code as I provided above. bit.ly/2zcyyG6 – John Daniel Jarvis Oct 10 '17 at 16:53
  • Please don't use bitly links - there's no need to obscure or track the URLs, and it just makes things harder for people trying to answer your question. Can you clarify which parts of the answer at gis.stackexchange.com/questions/68941/… aren't working? Where on the map at xtremeweather.org should the legend be displayed? – Stephen Lead Oct 10 '17 at 22:07

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.