diff --git a/datasette_geojson_map/static/map.css b/datasette_geojson_map/static/map.css index 6b8e7bb..e1fff81 100644 --- 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 index a231225..6c01fb7 100644 --- 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]) => ` +