feat: Add map for tomorrow, currently displaying the same layer

spatial/static/spatial/js/spatialMap.js

@@ -34,7 +34,7 @@ var carrotLayer;
  * @param {int} zoom - the zoom level (1-15, 1 is world wide view, 15 is greatest zoom)
  * @param {string} mapAttribution - The text in the corner of the map giving credits where it's due
  */
-function initSpatialMap(lonLat, zoomLevel, mapAttribution) {
+function initSpatialMap(lonLat, zoomLevel, mapAttribution, mapId) {
 
 	// ---------- Background layer is OpenStreetMap --------------
 	var backgroundLayer = new ol.layer.Tile({
@@ -69,7 +69,7 @@ function initSpatialMap(lonLat, zoomLevel, mapAttribution) {
 
 	// Creating the map
 	map = new ol.Map({
-		target: 'map',
+		target: mapId,
 		layers: [backgroundLayer, carrotLayer],
 		renderer: 'canvas'
 	});

spatial/templates/spatial/index.html

@@ -38,16 +38,17 @@
 		var longitude = {{settings.MAP_CENTER_LONGITUDE|unlocalize}};
 		var latitude = {{settings.MAP_CENTER_LATITUDE|unlocalize}};
 		var zoomLevel = {{settings.MAP_ZOOMLEVEL}};
-		initSpatialMap([longitude,latitude],zoomLevel,"{{settings.MAP_ATTRIBUTION|safe}}");
+		initSpatialMap([longitude,latitude],zoomLevel,"{{settings.MAP_ATTRIBUTION|safe}}",'mapToday');
+		initSpatialMap([longitude,latitude],zoomLevel,"{{settings.MAP_ATTRIBUTION|safe}}",'mapTomorrow');
 	});
 </script>
 {% endblock %}
 {% block content %}
 	<div class="row" id="mapAndForecastRow">
 		<!-- Start map container -->
-		<div class="col-md-8" id="mapContainer">
-			<div id="map" class="map" style="height: {{settings.MAP_HEIGHT}}px;">
-			</div>			
+		<div class="col-md-12" id="mapContainer">
+			<div class="col-md-6" id="mapToday" class="map" style="height: {{settings.MAP_HEIGHT}}px;">Today</div>
+			<div class="col-md-6" id="mapTomorrow" class="map" style="height: {{settings.MAP_HEIGHT}}px;">Tomorrow</div>
 		</div><!-- End map container -->
 	</div><!-- End row with sidebar and contents container -->
 {% endblock %}
\ No newline at end of file