Add map pins: load and create subjects via Leaflet

assets/controllers/map_controller.js

@@ -2,13 +2,56 @@ import { Controller } from '@hotwired/stimulus';
 import L from 'leaflet';
 import 'leaflet/dist/leaflet.min.css';
 
+L.Icon.Default.mergeOptions({
+    iconUrl: '/leaflet/marker-icon.png',
+    iconRetinaUrl: '/leaflet/marker-icon-2x.png',
+    shadowUrl: '/leaflet/marker-shadow.png',
+});
+
 export default class extends Controller {
     connect() {
-        const map = L.map(this.element).setView([51.0543, 3.7174], 13);
+        this.map = L.map(this.element).setView([51.0543, 3.7174], 13);
 
         L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
             attribution: '© OpenStreetMap contributors',
             maxZoom: 19,
-        }).addTo(map);
+        }).addTo(this.map);
+
+        this.loadSubjects();
+
+        this.map.on('click', (e) => this.createSubject(e.latlng));
+    }
+
+    loadSubjects() {
+        fetch('/api/subjects')
+            .then(r => r.json())
+            .then(data => {
+                data.payload.subjects.forEach(s => {
+                    if (s.latitude && s.longitude) {
+                        this.addMarker(s.latitude, s.longitude, s.name);
+                    }
+                });
+            });
+    }
+
+    createSubject(latlng) {
+        const name = prompt('Name of this place?');
+        if (!name) return;
+
+        fetch('/api/subjects', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                name: name,
+                latitude: latlng.lat,
+                longitude: latlng.lng,
+            }),
+        })
+            .then(r => r.json())
+            .then(() => this.addMarker(latlng.lat, latlng.lng, name));
+    }
+
+    addMarker(lat, lng, name) {
+        L.marker([lat, lng]).addTo(this.map).bindPopup(name);
     }
 }

src/Controller/IndexController.php

@@ -5,10 +5,12 @@ namespace App\Controller;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Routing\Attribute\Route;
+use Symfony\Component\Security\Http\Attribute\IsGranted;
 
 class IndexController extends AbstractController
 {
     #[Route('/')]
+    #[IsGranted('ROLE_USER')]
     public function index(): Response
     {
         return $this->render('index/page.html.twig');