Symfony UX Map : Des cartes interactives pour vos applications Symfony

Introduction

Si vous avez dèja intégré des maps dans vos applications Symfony, vous avez probablement révers d’une solution pour vous simplifier la vie. Symfony UX Map est peut-être la solution pour vous !

Symfony UX Map fait partie du projet Symfony UX qui a pour objectif de simplifier l’intégration des composants front-end dans vos applications Symfony.

Un projet de démo

Pour illustrer ces nouveautés, nous allons créer un projet Symfony fictif avec pour objectif de visualiser sur une carte les différents sites ayant hébergé des épreuves des JO de Paris 2024.

Création du projet

Créons un nouveau projet Symfony :

symfony new demo-jo --webapp
cd demo-jo
symfony serve -d

Installons les packages nécessaires :

composer require symfony/stimulus-bundle
composer require symfony/ux-map

Pour notre exemple, nous utiliserons le moteur de rendu Leaflet pour notre carte (mais vous pouvez utiliser aussi Google Maps) :

composer require symfony/ux-leaflet-map

Création d’un contrôleur et test d’intégration d’une carte Leaflet

Créons un nouveau contrôleur :

symfony console make:controller Map

Ajoutons la création d’une carte Leaflet dans notre contrôleur et envoyons la à notre vue Twig :

<?php

namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Attribute\Route;
use Symfony\UX\Map\Map;
use Symfony\UX\Map\Point;

class MapController extends AbstractController
{
    #[Route('/map', name: 'app_map')]
    public function index(): Response
    {
        $map = (new Map())
            ->center(new Point(46.903354, 1.888334))
            ->zoom(6)
            ->fitBoundsToMarkers()
        ;

        return $this->render('map/index.html.twig', [
            'map' => $map,
        ]);
    }
}

Créons le template Twig :

{% extends 'base.html.twig' %}

{% block title %}Map{% endblock %}

{% block body %}

    {{ render_map(map, { style: 'height: 1080px' }) }}

{% endblock %}

Récupération des sites des épreuves des JO de Paris 2024

Nous récupérons les sites des épreuves des JO de Paris 2024 sur le site data.gouv.fr au format JSON.

C’est une démo, on va tout mettre dans le controleur, idéalement, on utiliserait un service Symfony pour récupérer les sites des épreuves et séparer le code pour faciliter la maintenance.

Modifions le contrôleur pour récupérer les sites des épreuves et ajouter les marqueurs dans la carte Leaflet :

<?php

namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Attribute\Route;
use Symfony\Contracts\HttpClient\HttpClientInterface;
use Symfony\UX\Map\InfoWindow;
use Symfony\UX\Map\Map;
use Symfony\UX\Map\Marker;
use Symfony\UX\Map\Point;

class MapController extends AbstractController
{
    public function __construct(
        private readonly HttpClientInterface $httpClient,
    )
    {
    }

    #[Route('/map', name: 'app_map')]
    public function index(): Response
    {
        $map = (new Map())
            // on centre la carte sur Paris
            ->center(new Point(48.856614, 2.352222))
            ->zoom(12)
           
        ;

        // On récupère les données des JO
        $fichier = $this->httpClient->request('GET', 'https://www.data.gouv.fr/fr/datasets/r/1d61b1f4-4730-4dfa-aa44-34220f67f493');
        $points = json_decode($fichier->getContent(), true);

        // On ajoute les marqueurs
        foreach ($points as $record) {
            $map->addMarker(
                new Marker(
                    position: new Point($record['point_geo']['lat'], $record['point_geo']['lon']),
                    title: $record['nom_site'],
                    infoWindow: new InfoWindow(
                        headerContent: '<b>'.$record['nom_site'].'</b>',
                        content: $record['sports']
                    )
                )
            );
        }

        return $this->render('map/index.html.twig', [
            'map' => $map,
        ]);
    }
}

C’est tout ! Vous avez maintenant une carte interactive avec les sites des épreuves des JO de Paris 2024 !