Add Leaflet map to homepage via AssetMapper and Stimulus
This commit is contained in:
parent
408d9f944c
commit
67a6c7d8dc
5 changed files with 40 additions and 15 deletions
14
assets/controllers/map_controller.js
Normal file
14
assets/controllers/map_controller.js
Normal 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);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,6 @@
|
|||
body {
|
||||
background-color: skyblue;
|
||||
}
|
||||
|
||||
html, body { height: 100%; margin: 0; }
|
||||
.map-container { height: 100vh; width: 100%; }
|
||||
|
|
|
|||
|
|
@ -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'],
|
||||
];
|
||||
|
|
|
|||
16
src/Controller/IndexController.php
Normal file
16
src/Controller/IndexController.php
Normal 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');
|
||||
}
|
||||
}
|
||||
|
|
@ -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 %}
|
||||
|
|
|
|||
Loading…
Reference in a new issue