Add Leaflet map to homepage via AssetMapper and Stimulus

This commit is contained in:
myrmidex 2026-06-05 18:03:35 +00:00
parent 408d9f944c
commit 67a6c7d8dc
5 changed files with 40 additions and 15 deletions

View file

@ -0,0 +1,14 @@
import { Controller } from '@hotwired/stimulus';
import L from 'leaflet';
import 'leaflet/dist/leaflet.min.css';
export default class extends Controller {
connect() {
const 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);
}
}

View file

@ -1,3 +1,6 @@
body {
background-color: skyblue;
}
html, body { height: 100%; margin: 0; }
.map-container { height: 100vh; width: 100%; }

View file

@ -27,4 +27,6 @@ return [
'@hotwired/stimulus' => ['version' => '3.2.2'],
'@symfony/stimulus-bundle' => ['path' => './vendor/symfony/stimulus-bundle/assets/dist/loader.js'],
'@hotwired/turbo' => ['version' => '8.0.23'],
'leaflet' => ['version' => '1.9.4'],
'leaflet/dist/leaflet.min.css' => ['version' => '1.9.4', 'type' => 'css'],
];

View file

@ -0,0 +1,16 @@
<?php
namespace App\Controller;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Attribute\Route;
class IndexController extends AbstractController
{
#[Route('/')]
public function index(): Response
{
return $this->render('index/page.html.twig');
}
}

View file

@ -1,16 +1,6 @@
<html>
<head>
<title>Test</title>
</head>
<body>
<h1>Rater</h1>
{{ form(form) }}
{% extends 'base.html.twig' %}
<h2>Existing</h2>
<ul>
{% for subject in subjects %}
<li>{{ subject.name }}</li>
{% endfor %}
</ul>
</body>
</html>
{% block body %}
<h1>Rater</h1>
<div {{ stimulus_controller('map') }} class="map-container"></div>
{% endblock %}