Garmaine Staff asked 1 year ago

I have a flask application where i am using the leaflet map with the values offered by https://aqicn.org/faq/2015-09-18/map-web-service-real-time-air-quality-tile-api/ to display pm2.5, air quality index and other values in a side by side map. So far, I have managed to only display air quality index, and i don't know how to make the map display all values at the same time, like the one in the picture: enter image description here

So far I have the code to display air quality only. I have a variable pol which has to take the values of aqi;pm25;10;o3;no2;so2;co;pm10 so that all values are displayed in the map, but i don't know how to add all values. The code for air quality index only is:

    <script>
        var OSM_URL = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
        var OSM_ATTRIB = '&copy;  <a  href="http://openstreetmap.org/copyright">OpenStreetMap</a>  contributors';
        var osmLayer = L.tileLayer(OSM_URL, {attribution: OSM_ATTRIB});
        var pol = 'aqi';
        {#todo pol has to be:aqi;pm25;10;o3;no2;so2;co;pm10#}
        var WAQI_URL = "https://tiles.aqicn.org/tiles/usepa-" + pol + "/{z}/{x}/{y}.png?token=?";
        var WAQI_ATTR = 'Air  Quality  Tiles  &copy;  <a  href="http://waqi.info">waqi.info</a>';
        var waqiLayer = L.tileLayer(WAQI_URL, {attribution: WAQI_ATTR});
        var map = L.map('map').setView([45.657974, 25.601198], 5);
    </script>

The code displays the following: How to show all maps side by side?

enter image description here