After geocoding, self-host pmtiles

_layouts/event.html

@@ -71,15 +71,14 @@ <h3 id="requirements">Requirements</h3>
 	<h3 id="location">Event Location</h3>
 
 	<script src="{% link assets/js/leaflet-1.9.3.js %}"></script>
+	<script src="{% link assets/js/protomaps-leaflet.min.js %}"></script>
 	<div id="map" style="width: 100%; height: 300px"></div>
 
 	<script>
 	const map = L.map('map').setView([{{ event.location.geo.lat }}, {{ event.location.geo.lon }}], 14);
-	var OPNVKarte = L.tileLayer('https://tileserver.memomaps.de/tilegen/{z}/{x}/{y}.png', {
-		maxZoom: 18,
-		attribution: 'Map <a href="https://memomaps.de/">memomaps.de</a> <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-	});
-	OPNVKarte.addTo(map);
+
+	var layer = protomapsL.leafletLayer({url: "{{ page.url | prepend: site.baseurl | replace: 'html', 'pmtiles' }}",theme:"light"})
+	layer.addTo(map);
 	L.marker([{{ event.location.geo.lat }}, {{ event.location.geo.lon }}]).addTo(map)
 		.bindPopup('{{ event.title }}')
 		.openPopup();
@@ -432,7 +431,4 @@ <h4>TIaaS</h4>
 </script>
 
 <style>
-:target {
-    scroll-margin-top: 24em;
-}
 </style>

bin/geocode.rb

@@ -64,4 +64,17 @@ def request(url)
       File.open(event, 'w') { |file| file.puts contents }
     end
   end
+
+  # Now it has a geocode
+  pmtiles_output = event.gsub(/md$/, 'pmtiles')
+  bbox = [
+    event_data['location']['geo']['lon'].to_f - 0.03,
+    event_data['location']['geo']['lat'].to_f - 0.01,
+    event_data['location']['geo']['lon'].to_f + 0.03,
+    event_data['location']['geo']['lat'].to_f + 0.01,
+  ].join(',')
+  # if ! File.exist?(pmtiles_output)
+    puts "./pmtiles extract https://build.protomaps.com/20240520.pmtiles #{pmtiles_output} --bbox=#{bbox} --maxzoom=15 --minzoom=10"
+    puts `./pmtiles extract https://build.protomaps.com/20240520.pmtiles #{pmtiles_output} --bbox=#{bbox} --maxzoom=15 --minzoom=10`
+  # end
 end