JavaScript for rendering maps, refs #12

README.md

@@ -131,6 +131,21 @@ The `display_sql` query will be executed for every search result, passing the ke
 
 This performs well because [many small queries are efficient in SQLite](https://www.sqlite.org/np1queryprob.html).
 
+## Displaying maps
+
+This plugin will eventually include a number of useful shortcuts for rendering interesting content.
+
+The first available shortcut is for displaying maps. Make your custom content output something like this:
+
+```html
+<div
+    data-map-latitude="{{ display.latitude }}"
+    data-map-longitude="{{ display.longitude }}"
+    style="display: none; float: right; width: 250px; height: 200px; background-color: #ccc;"
+></div>
+```
+JavaScript on the page will look for any elements with `data-map-latitude` and `data-map-longitude` and, if it finds any, will load Leaflet and convert those elements into maps centered on that location. The default zoom level will be 12, or you can set a `data-map-zoom` attribute to customize this.
+
 ## Development
 
 To set up this plugin locally, first checkout the code. Then create a new virtual environment:

dogsheep_beta/__init__.py

@@ -20,7 +20,7 @@
   {where_clauses}
 order by
   search_index.timestamp desc
-limit 100
+limit 40
 """
 
 SEARCH_SQL = """

dogsheep_beta/templates/beta.html

@@ -29,7 +29,7 @@
     margin-right: 30%;
     padding-right: 2em;
 }
-pre {
+pre, blockquote {
     white-space: pre-wrap;
 }
 </style>
@@ -75,4 +75,58 @@ <h2>{{ facet.name }}</h2>
 {% endfor %}
 </section>
 
+<script>
+/* If we find any data-map-latitude attrs, load Leaflet and turn those into maps */
+function loadLeaflet(callback) {
+    let loaded = [];
+    function hasLoaded() {
+        loaded.push(this);
+        if (loaded.length == 2) {
+            callback();
+        }
+    }
+    let stylesheet = document.createElement('link');
+    stylesheet.setAttribute('type', 'text/css');
+    stylesheet.setAttribute('rel', 'stylesheet');
+    stylesheet.setAttribute('href', 'https://unpkg.com/[email protected]/dist/leaflet.css');
+    stylesheet.setAttribute('integrity', 'sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==');
+    stylesheet.setAttribute('crossorigin', 'anonymous');
+    stylesheet.onload = hasLoaded;
+    document.head.appendChild(stylesheet);
+    let script = document.createElement('script');
+    script.src = 'https://unpkg.com/[email protected]/dist/leaflet.js';
+    script.setAttribute('integrity', 'sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og==');
+    script.setAttribute('crossorigin', 'anonymous');
+    script.onload = stylesheet.onload = hasLoaded;
+    document.head.appendChild(script);
+};
+function loadMaps() {
+    const mapEls = document.querySelectorAll('[data-map-latitude]');
+    if (!mapEls.length) {
+        return;
+    }
+    loadLeaflet(() => {
+        console.log('leaded')
+        const attribution = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
+        const tilesUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
+        Array.from(mapEls).forEach((el) => {
+            el.style.display = 'block';
+            const latitude = el.getAttribute('data-map-latitude');
+            const longitude = el.getAttribute('data-map-longitude');
+            const zoom = el.getAttribute('data-map-zoom') || 12;
+            const latlng = L.latLng(latitude, longitude);
+            let map = L.map(el, {layers: [L.tileLayer(tilesUrl, {
+                maxZoom: 19,
+                detectRetina: true,
+                attribution: attribution
+            })]});
+            L.marker(latlng).addTo(map);
+            map.setView(latlng, zoom);
+            window.lastMap = map;
+            window.lastLatLng = latlng;
+        });
+    });
+}
+loadMaps();
+</script>
 {% endblock %}