Merge pull request #68 from thekid/feature/preview-image-markers

Show preview images instead of marker icons on map

Author: thekid

src/main/handlebars/content.handlebars

@@ -42,10 +42,12 @@ parent: feed
     <script src="/assets/{{asset 'mapping.js'}}" defer></script>
     <script type="module">
       {{&use 'mapping'}}
-      const mapping = new Mapping('/static/marker.png');
+      const mapping = new Mapping();
 
       {{#each item.locations}}
-        mapping.mark(null, {{lon}}, {{lat}}, `{{name}}`);
+        {{#with (wrap item.images @index)}}
+          mapping.mark(null, {{lon}}, {{lat}}, `{{name}}`, '/image/{{item.slug}}/thumb-{{name}}.webp');
+        {{/with}}
       {{/each}}
 
       mapping.project(document.querySelector('#map'));

src/main/handlebars/journey.handlebars

@@ -83,11 +83,13 @@ parent: feed
     <script src="/assets/{{asset 'mapping.js'}}" defer></script>
     <script type="module">
       {{&use 'mapping'}}
-      const mapping = new Mapping('/static/marker.png');
+      const mapping = new Mapping();
 
       {{#each itinerary}}
         {{#each locations}}
-          mapping.mark('#{{scroll slug}}', {{lon}}, {{lat}}, `{{title}}: {{name}}`);
+          {{#with (wrap images @index)}}
+            mapping.mark('#{{scroll slug}}', {{lon}}, {{lat}}, `{{title}}: {{../name}}`, '/image/{{slug}}/thumb-{{name}}.webp');
+          {{/with}}
         {{/each}}
       {{/each}}
 

src/main/handlebars/journeys.handlebars

@@ -32,11 +32,13 @@
     <script src="/assets/{{asset 'mapping.js'}}" defer></script>
     <script type="module">
       {{&use 'mapping'}}
-      const mapping = new Mapping('/static/marker.png');
+      const mapping = new Mapping();
 
       {{#each journeys}}
         {{#each locations}}
-          mapping.mark('/journey/{{slug}}', {{lon}}, {{lat}}, `{{title}}: {{name}}`);
+          {{#with (wrap images @index)}}
+            mapping.mark('/journey/{{slug}}', {{lon}}, {{lat}}, `{{title}}: {{../name}}`, '/image/{{slug}}/thumb-{{name}}.webp');
+          {{/with}}
         {{/each}}
       {{/each}}
 

src/main/handlebars/layout.handlebars

@@ -557,6 +557,15 @@
       }
     }
 
+    .marker {
+      width: 1.9rem;
+      height: 1.9rem;
+      border-radius: 50%;
+      border: .15rem solid white;
+      box-shadow: .25rem .25rem 1rem rgb(0 0 0 / .2);
+      object-fit: cover;
+    }
+
     #map {
       margin-top: 1rem;
       width: 100%;

src/main/js/mapping.js

@@ -1,20 +1,29 @@
 class Mapping {
-  #list = [];
-
-  /** Creates new map using given marker images */
-  constructor(image) {
-    this.style = new ol.style.Style({image: new ol.style.Icon(({src: image}))})
-  }
+  #features = [];
+  #markers = [];
 
   /** Add marker and link at a given position */
-  mark(link, lon, lat, name) {
+  mark(link, lon, lat, name, uri) {
+    const $image = document.createElement('img');
+    $image.src = uri;
+    $image.alt = name;
+    $image.classList.add('marker');
+
+    const overlay = new ol.Overlay({
+      position: ol.proj.fromLonLat([lon, lat]),
+      positioning: 'center-center',
+      element: $image,
+      stopEvent: false
+    });
+    this.#markers.push(overlay);
+
     const marker = new ol.Feature({
       geometry : new ol.geom.Point(ol.proj.fromLonLat([lon, lat])),
       link     : link,
       name     : name
     });
-    marker.setStyle(this.style);
-    this.#list.push(marker);
+
+    this.#features.push(marker);
   }
 
   /** Escape input for use in HTML */
@@ -24,13 +33,17 @@ class Mapping {
 
   /** Project this map on to a given DOM element */
   project($element) {
-    const source = new ol.source.Vector({features: this.#list});
     const map = new ol.Map({
       target: $element,
       layers: [new ol.layer.Tile({source: new ol.source.OSM()})]
     });
-    map.addLayer(new ol.layer.Vector({source: source}));
-    map.getView().fit(source.getExtent(), {padding: [32, 32, 32, 32], minResolution: 30});
+    for (const overlay of this.#markers) {
+      map.addOverlay(overlay);
+    }
+
+    const features = new ol.source.Vector({features: this.#features});
+    map.addLayer(new ol.layer.Vector({source: features}));
+    map.getView().fit(features.getExtent(), {padding: [32, 32, 32, 32], minResolution: 30});
 
     const $popup = $element.querySelector('.popup');
     map.on('movestart', event => {

src/main/php/de/thekid/dialog/Helpers.php

@@ -59,6 +59,9 @@ public function helpers() {
       }
       return $r;
     };
+    yield 'wrap' => function($node, $context, $options) {
+      return $options[0][$options[1] % sizeof($options[0])];
+    };
     yield 'sign' => function($node, $context, $options) {
       return $this->signing?->sign($options[0]);
     };