popups

eyeseast · Jul 5, 2021 · 8e94845 · 8e94845
1 parent 7078e76
commit 8e94845
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 1 deletion.
diff --git a/datasette_geojson_map/static/map.css b/datasette_geojson_map/static/map.css
@@ -3,3 +3,21 @@
 	width: 100%;
 	margin-bottom: 1.5em;
 }
+
+.leaflet-popup-content .properties {
+	display: flex;
+	flex-wrap: wrap;
+	min-width: 200px;
+}
+
+.leaflet-popup-content .properties dt {
+	font-weight: bold;
+	flex: 0 0 auto;
+	width: 33%;
+}
+
+.leaflet-popup-content .properties dd {
+	flex: 0 0 auto;
+	width: 67%;
+	text-align: right;
+}
diff --git a/datasette_geojson_map/static/map.js b/datasette_geojson_map/static/map.js
@@ -18,7 +18,7 @@ async function render() {
 	parent.insertBefore(container, parent.firstElementChild);
 
 	const map = createMap(L, container);
-	const layer = L.geoJSON(geojson).addTo(map);
+	const layer = L.geoJSON(geojson).addTo(map).bindPopup(popup);
 	const bounds = layer.getBounds();
 
 	map.fitBounds(bounds);
@@ -35,4 +35,28 @@ function createMap(L, container) {
 	return map;
 }
 
+function popup(layer) {
+	const { properties } = layer.feature;
+	const items = Object.entries(properties).map(
+		([key, value]) => `
+  <dt>${key}</dt>
+  <dd class="${typeof value}">${format(value)}</dd>`
+	);
+
+	return `<dl class="properties">${items.join("")}</dl>`;
+}
+
+function format(value) {
+	switch (typeof value) {
+		case "number":
+			return value.toLocaleString();
+
+		case "string":
+			return value;
+
+		default:
+			return String(value);
+	}
+}
+
 window.addEventListener("load", render);