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 display all values on layers, and i don't know how to make the map display all values at the same time, like the one in the picture:
So far I have this:
<!DOCTYPE html>
<html>
{% extends "menu.html" %}
<head>
<title>{% block title %}Map{% endblock %}</title>
<meta charset="utf-8"/>
{% block dependencies %}
<style>
html {
height: 100%
}
body {
height: 100%;
margin: 0;
}
#map {
height: 800px;
}
</style>
{% endblock %}
</head>
<body>
{% block content %}
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css"/>
<script src="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.js"></script>
<div id='map' class="a"></div>
<script>
var mbUrl_aqi = 'https://tiles.aqicn.org/tiles/usepa-' + 'aqi' + '/{z}/{x}/{y}.png?token=?';
var mbUrl_pm25 = 'https://tiles.aqicn.org/tiles/usepa-' + 'pm25' + '/{z}/{x}/{y}.png?token=?';
var mbUrl_pm10 = 'https://tiles.aqicn.org/tiles/usepa-' + 'pm10' + '/{z}/{x}/{y}.png?token=?';
var mbUrl_o3 = 'https://tiles.aqicn.org/tiles/usepa-' + 'o3' + '/{z}/{x}/{y}.png?token=?';
var mbUrl_no2 = 'https://tiles.aqicn.org/tiles/usepa-' + 'no2' + '/{z}/{x}/{y}.png?token=?';
var mbUrl_so2 = 'https://tiles.aqicn.org/tiles/usepa-' + 'so2' + '/{z}/{x}/{y}.png?token=?';
var mbUrl_co = 'https://tiles.aqicn.org/tiles/usepa-' + 'co' + '/{z}/{x}/{y}.png?token=?';
var aqi = L.tileLayer(mbUrl_aqi);
var pm25 = L.tileLayer(mbUrl_pm25);
var pm10 = L.tileLayer(mbUrl_pm10);
var o3 = L.tileLayer(mbUrl_o3);
var no2 = L.tileLayer(mbUrl_no2);
var so2 = L.tileLayer(mbUrl_so2);
var co = L.tileLayer(mbUrl_co);
var map = L.map('map', {
center: [45.657974, 25.601198],
zoom: 11,
layers: [aqi]
});
var baseLayers = {
"aqi": aqi,
"pm25": pm25,
"pm10": pm10,
"no2": no2,
"so2": so2,
"co": co,
"o3": o3
};
{# resize #}
document.getElementById("map").style.resize = "both";
var WAQI_ATTR = '© <a href="http://waqi.info">waqi.info</a>';
var credits_url = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var credits_attrib = '© <a href="http://openstreetmap.org/copyright">OpenStreetMap</a>';
var osmLayer = L.tileLayer(credits_url, {attribution: [credits_attrib, WAQI_ATTR]});
map.addLayer(osmLayer);
L.control.layers(baseLayers).addTo(map);
</script>
{% endblock %}
</body>
</html>
The code displays the following: How to show all maps side by side?