Crude geo data for conservatipn place

assets/controllers/map_controller.js

@@ -1,13 +1,63 @@
 import { Controller } from '@hotwired/stimulus';
+import L from "leaflet";
+        
 
 /**
  */
 export default class extends Controller {
-    static targets = [ 'map',];
-    static values = {
-        state: Number,
-    };
+    static targets = [ 'map', 'modal', 'coords', 'name', 'container'];
 
     initialize() {
+        this.setIcon();
+        this.coordinates = this.coordsTarget.textContent.split(', ');
+
+        const map = L.map(this.mapTarget.id, {
+            attributionControl: false,
+            minZoom: 5,
+        }).setView(this.coordinates, 17);
+
+        map.crs = L.CRS.EPSG4326;
+
+        this.map = map;
+        this.addOsMap();
+        this.addMarker();
+    }
+
+    open() {
+        this.modalTarget.classList.add('is-active');
+        let map = this.map;
+
+        map.invalidateSize();
+    }
+
+    close() {
+        this.modalTarget.classList.remove('is-active');
+    }
+
+    addOsMap() {
+        let osmap = new L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            maxNativeZoom : 22,
+            maxZoom: 22,
+            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+        });
+
+        osmap.addTo(this.map);
+    }
+
+    setIcon() {
+        this.icon = L.icon({
+            iconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/marker-icon.png',
+            shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/marker-shadow.png'
+        });
+    }
+
+    addMarker() {
+        L.marker(
+            this.coordinates,
+            {icon: this.icon}
+        )
+        .bindTooltip(this.nameTarget.textContent)
+        .openTooltip()
+        .addTo(this.map);
     }
 }

assets/styles/app.css

@@ -1,6 +1,7 @@
 @import url('../fonts/stylesheet.css');
 @import url('../fontawesome-free-6.6.0-web/css/all.min.css');
 @import url('../vendor/bulma/css/bulma.min.css');
+@import url('../vendor/leaflet/dist/leaflet.min.css');
 
 :root {
     --arcoa-blue: rgba(66,135,199,0.98);