Ajoute le lien geo

assets/controllers/map_controller.js

@@ -11,6 +11,7 @@ import { Controller } from '@hotwired/stimulus';
 import 'leaflet';
 
 export default class extends Controller {
+    static targets = [ 'openLink' ];
     static values = {
         geojson: String,
         overpassResult: String,
@@ -19,6 +20,8 @@ export default class extends Controller {
     }
 
     connect() {
+        const self = this;
+
         // Constitue une collection d’icones aux couleurs Bootstrap
         const iconHtml = `
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="bi bi-geo-alt-fill" viewBox="0 0 16 16">
@@ -41,6 +44,14 @@ export default class extends Controller {
             attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
         }).addTo(map);
 
+        // Suit les mouvements de la carte
+        map.on('moveend', function() {
+            var center = map.getCenter();
+            var lat = center.lat;
+            var lng = center.lng;
+            self.openLinkTarget.setAttribute('href', `geo:${lat},${lng}`);
+        });
+
         // Crée un ensemble de couches pour mieux les manipuler
         // individuellement
         var layer = L.featureGroup();

templates/macro.html.twig

@@ -53,7 +53,7 @@ Où :
         {% endfor %}
     </details>
     <p>
-        Voir sur
+        <a href="#" target="_blank" data-map-target="openLink">Ouvrir ailleurs</a> ou voir sur
         <button class="btn btn-sm btn-link" data-action="map#openInOsm">OSM</button>
         <button class="btn btn-sm btn-link" data-action="map#openInPanoramax">Panoramax</button>
         <button class="btn btn-sm btn-link" data-action="map#openInPifomap">Pifomap</button>