Add Leaflet.js package #39
Conversation
There was a problem hiding this comment.
Thanks for your PR, that would be an awesome addition to Symfony UX! I did a quick review, only a small comment. My only concern for now is options and features.
UX Chart.js (which I guess you took inspiration from) has the advantage of relying on a quite simple library: almost everything is defined through an array of options that can be encoded as JSON, meaning 90% of the features of Chart.js are accessible through PHP.
I'd like for UX Leaflet.js to be usable as much as possible in PHP, but I think that's not yet the case. For instance, we should be able to define markers, or to change which provider to use (OSM/...). Some other ideas I didn't think of yet could be important as well.
To summarize: a great start, but I think we need to think deeply about what need to be put inside this :) !
| import { Application, Controller } from 'stimulus'; | ||
| import { getByTestId, waitFor } from '@testing-library/dom'; | ||
| import { clearDOM, mountDOM } from '@symfony/stimulus-testing'; | ||
| // import LeafletjsController from '../dist/controller'; |
There was a problem hiding this comment.
This should probably be removed
|
After thinking about it and following a proposal of @tarlepp I think there is an interesting idea relative to maps in UX: providing a way to choose a provider and display a map based on it (Leaflet, OSM, Google Maps, Mapbox, ...). This would be very useful, especially as I think there are only 2 key usages we need to provide for this package to make sense:
Then, additional options could be provided for specific implementations. I feel having such package could be a great addition to UX! |
|
|
||
| this.map = L.map(this.placeholderTarget, mapOptions).setView(this._coordinates(), this.data.get('zoom')); | ||
|
|
||
| let layer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { |
There was a problem hiding this comment.
I think it's good to also make the tile server configurable, to allow other map styles (or other OSM tile servers if e.g. their usage policy doesn't comply with your usage).
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 <!-- please update src/**/CHANGELOG.md files --> | Issues | Fix #38 <!-- prefix each issue number with "Fix #", no need to create an issue if none exist, explain below instead --> | License | MIT Hi :) This PR is a proposal for #38 a replacement for #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
This is a basic implementation for rendering a map with Leaflet, which allows further customization in a custom user controller.
This implementation adds a new Map with one Layer based on OpenStreetMap and displays the provided coordinates from PHP.