This PR was squashed before being merged into the 2.x branch. Discussion ---------- [Map] Create Map component | Q | A | ------------- | --- | Bug fix? | no | New feature? | yes  | Issues | Fix symfony#38  | License | MIT Hi :) This PR is a proposal for symfony#38 a replacement for symfony#39. Symfony UX Map is a new Symfony UX component that makes it easy to create, customize and use interactive JavaScript maps. The package ships with: - a simple and generic way to create a map, with markers and info-windows - two Bridge, [Leaflet](https://leafletjs.com/index.html) and [Google Maps](https://developers.google.com/maps/documentation/javascript) - a way to define provider-specific options - a nice and fluent API - Flex recipes are also ready: symfony/recipes#1329 # Example ## Bridge configuration ```env # .env UX_MAP_DSN=leaflet://default ``` ```yaml # config/packages/ux_map.yaml ux_map: renderer: '%env(UX_MAP_DSN)%' ``` ## Map creation An example to render a map, custom center and zoom, some markers and info windows: ```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\InfoWindow; use Symfony\UX\Map\MapFactoryInterface; use Symfony\UX\Map\Marker; use Symfony\UX\Map\Point; final class ContactController extends AbstractController { #[Route('/contact')] public function __invoke(): Response { // 1. Create a new map instance $myMap = (new Map()); ->center(new Point(46.903354, 1.888334)) ->zoom(6) ; // 2. You can add markers, with an optional info window $myMap ->addMarker(new Marker( position: new Point(48.8566, 2.3522), title: 'Paris' )) ->addMarker(new Marker( position: new Point(45.7640, 4.8357), title: 'Lyon', // With an info window infoWindow: new InfoWindow( headerContent: '<b>Lyon</b>', content: 'The French town in the historic Rhône-Alpes region, located at the junction of the Rhône and Saône rivers.' ) )); // 3. And inject the map in your template to render it return $this->render('contact/index.html.twig', [ 'my_map' => $myMap, ]); } } ``` ## Map rendering You must call `render_map(map)` to render the map: ```twig {{ render_map(map, { style: 'height: 700px; width: 1024px; margin: 10px' }) }} ``` It gives you this interactive Leaflet map: <img width="1524" alt="image" src="https://github.com/user-attachments/assets/cd0f64f3-5bf2-45c6-8b8d-8ad23c6ce183"> Commits ------- 212e61d [Map] Create Map component

Uh oh!

Proposal: map component #38

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions