diff --git a/assets/controllers/map_controller.js b/assets/controllers/map_controller.js index 937af98..90a9c3f 100644 --- a/assets/controllers/map_controller.js +++ b/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); } } diff --git a/public/leaflet/marker-icon-2x.png b/public/leaflet/marker-icon-2x.png new file mode 100644 index 0000000..88f9e50 Binary files /dev/null and b/public/leaflet/marker-icon-2x.png differ diff --git a/public/leaflet/marker-icon.png b/public/leaflet/marker-icon.png new file mode 100644 index 0000000..950edf2 Binary files /dev/null and b/public/leaflet/marker-icon.png differ diff --git a/public/leaflet/marker-shadow.png b/public/leaflet/marker-shadow.png new file mode 100644 index 0000000..9fd2979 Binary files /dev/null and b/public/leaflet/marker-shadow.png differ diff --git a/src/Controller/IndexController.php b/src/Controller/IndexController.php index 488ac14..27edfc0 100644 --- a/src/Controller/IndexController.php +++ b/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');