feature: add a map

public/tabs/map/map.html

@@ -0,0 +1,55 @@
+<link rel="stylesheet" href="/js/external/leaflet/leaflet.css"/>
+<script src="/js/external/leaflet/leaflet.js"></script>
+<script type="module">
+	var map = L.map('map').setView([33.88,-118.13], 13);
+
+	L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+		maxZoom: 19,
+		attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+	}).addTo(map);
+
+	APP.on( "view_changed", ({ view }) => {
+		if ( view === 'map' ) {
+			map.invalidateSize();
+		}
+	});
+
+</script>
+<style>
+	#map-tab .tab-content {
+		overflow: hidden;
+	}
+
+	#map {
+		position: absolute;
+		top: 4em;
+		left: 4em;
+		right: 4em;
+		bottom: 4em;
+	}
+
+	@media screen and (max-width: 640px) {
+		#map {
+			top: 1em;
+			left: 1em;
+			right: 1em;
+			bottom: 1em;
+		}
+	}
+</style>
+<div id="map-tab" class="tab">
+	<input
+		type="radio"
+		name="top-level-tabs"
+		id="map-tab-tab-input"
+		class="tab-switch"
+		data-view="map"
+	/>
+	<label for="map-tab-tab-input" class="tab-label"
+		><div class="icon map-pin"></div>
+		<div class="label">Map</div>
+	</label>
+	<div class="tab-content">
+		<div id="map"></div>
+	</div>
+</div>