I've a map showcasing two choropleths, as well as three separate polygons (two of which are related thematically). My objective is to create a functioning toggling tool to 1) select one choropleth at a time showcasing their respective data and 2) add or remove any of the 3 polygon layers, each with their respective tooltip.
Currently I'm able to toggle between the choropleths, and the radio buttons to add or remove the overlay polygons are working appropriately. However I am still facing several challenges:
The information prop that appears when hovering over the choropleth only shows data for one of the choropleth (I've muted the code for the other, but that's because I am not sure how to group the "prop" function with toggling);
When hovering over one of the choropleth, the color changes to that of the other. And when the map is loaded initially, it's clear from the color scheme that both choropleths are overlaid on top of one another;
I've an "overlay order" problem; I want my polygons (which are meant to show area) distinctly on top of the choropleth, but are currently shown as being beneath;
I can't get the tooltips to load in place, it seems to pop-up off the user's frame. Might to be a zoom-level related issue.
Here's what my output currently looks like: https://hp-nunes.github.io/Air-Quality-Mapping/ (note: if using Chrome you may need to select an option to load "unsafe script" otherwise most assets will be blocked; this in itself might be an issue when trying to publish the final version of the map).