PHPackages symfony/ux-leaflet-map - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. symfony/ux-leaflet-map ActiveSymfony-ux-map-bridge[Utility & Helpers](/categories/utility) symfony/ux-leaflet-map ====================== Symfony UX Map Leaflet Bridge v2.34.0(1mo ago)13146.6k↓13.7%1[1 PRs](https://github.com/symfony/ux-leaflet-map/pulls)1MITPHPPHP >=8.1 Since Aug 9Pushed 1mo ago3 watchersCompare [ Source](https://github.com/symfony/ux-leaflet-map)[ Packagist](https://packagist.org/packages/symfony/ux-leaflet-map)[ Docs](https://symfony.com)[ Fund](https://symfony.com/sponsor)[ GitHub Sponsors](https://github.com/fabpot)[ RSS](/packages/symfony-ux-leaflet-map/feed)WikiDiscussions 2.x Synced 1mo ago READMEChangelog (2)Dependencies (12)Versions (28)Used By (1) Symfony UX Map: Leaflet ======================= [](#symfony-ux-map-leaflet) [Leaflet](https://leafletjs.com/) integration for Symfony UX Map. Installation ------------ [](#installation) Install the bridge using Composer and Symfony Flex: ``` composer require symfony/ux-leaflet-map ``` If you're using WebpackEncore, install your assets and restart Encore (not needed if you're using AssetMapper): ``` npm install --force npm run watch ``` Note Alternatively, [@symfony/ux-leaflet-map package](https://www.npmjs.com/package/@symfony/ux-leaflet-map) can be used to install the JavaScript assets without requiring PHP. DSN example ----------- [](#dsn-example) ``` UX_MAP_DSN=leaflet://default ``` Map options ----------- [](#map-options) You can use the `LeafletOptions` class to configure your `Map`:: ``` use Symfony\UX\Map\Bridge\Leaflet\LeafletOptions; use Symfony\UX\Map\Bridge\Leaflet\Option\AttributionControlOptions; use Symfony\UX\Map\Bridge\Leaflet\Option\ControlPosition; use Symfony\UX\Map\Bridge\Leaflet\Option\TileLayer; use Symfony\UX\Map\Bridge\Leaflet\Option\ZoomControlOptions; use Symfony\UX\Map\Point; use Symfony\UX\Map\Map; $map = (new Map()) ->center(new Point(48.8566, 2.3522)) ->zoom(6); $leafletOptions = (new LeafletOptions()) ->tileLayer(new TileLayer( url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', attribution: '© OpenStreetMap', options: [ 'minZoom' => 5, 'maxZoom' => 10, ] )) ->attributionControl(false) ->attributionControlOptions(new AttributionControlOptions(ControlPosition::BOTTOM_LEFT)) ->zoomControl(false) ->zoomControlOptions(new ZoomControlOptions(ControlPosition::TOP_LEFT)) ; // Add the custom options to the map $map->options($leafletOptions); ``` Use cases --------- [](#use-cases) Below are some common or advanced use cases when using a map. ### Customize the marker [](#customize-the-marker) A common use case is to customize the marker. You can listen to the `ux:map:marker:before-create` event to customize the marker before it is created. Assuming you have a map with a custom controller: ``` {{ ux_map(map, {'data-controller': 'my-map' }) }} ``` You can create a Stimulus controller to customize the markers before they are created: ``` // assets/controllers/my_map_controller.js import { Controller } from '@hotwired/stimulus'; export default class extends Controller { connect() { this.element.addEventListener('ux:map:marker:before-create', this._onMarkerBeforeCreate); } disconnect() { // Always remove listeners when the controller is disconnected this.element.removeEventListener('ux:map:marker:before-create', this._onMarkerBeforeCreate); } _onMarkerBeforeCreate(event) { // You can access the marker definition and the Leaflet object // Note: `definition.bridgeOptions` is the raw options object that will be passed to the `L.marker` constructor. const { definition, L } = event.detail; // Use a custom icon for the marker const redIcon = L.icon({ // Note: instead of using a hardcoded URL, you can use the `extra` parameter from `new Marker()` (PHP) and access it here with `definition.extra`. iconUrl: 'https://leafletjs.com/examples/custom-icons/leaf-red.png', shadowUrl: 'https://leafletjs.com/examples/custom-icons/leaf-shadow.png', iconSize: [38, 95], // size of the icon shadowSize: [50, 64], // size of the shadow iconAnchor: [22, 94], // point of the icon which will correspond to marker's location shadowAnchor: [4, 62], // the same for the shadow popupAnchor: [-3, -76], // point from which the popup should open relative to the iconAnchor }); definition.bridgeOptions = { icon: redIcon, }; } } ``` ### Disable the default tile layer [](#disable-the-default-tile-layer) If you need to use a custom tiles layer rendering engine that is not compatible with the `L.tileLayer().addTo(map)` method (e.g. [Esri/esri-leaflet-vector](https://github.com/Esri/esri-leaflet-vector)), you can disable the default tile layer by passing `tileLayer: false` to the `LeafletOptions`: ``` use Symfony\UX\Map\Bridge\Leaflet\LeafletOptions; $leafletOptions = new LeafletOptions(tileLayer: false); // or $leafletOptions = (new LeafletOptions()) ->tileLayer(false); ``` Known issues ------------ [](#known-issues) ### Unable to find `leaflet/dist/leaflet.min.css` file when using Webpack Encore [](#unable-to-find-leafletdistleafletmincss-file-when-using-webpack-encore) When using Webpack Encore with the Leaflet bridge, you may encounter the following error: ``` Module build failed: Module not found: "./node_modules/.pnpm/file+vendor+symfony+ux-leaflet-map+assets_@hotwired+stimulus@3.0.0_leaflet@1.9.4/node_modules/@symfony/ux-leaflet-map/dist/map_controller.js" contains a reference to the file "leaflet/dist/leaflet.min.css". This file can not be found, please check it for typos or update it if the file got moved. Entrypoint app = runtime.67292354.js 488.0777101a.js app.b75294ae.css app.0975a86d.js webpack compiled with 1 error  ELIFECYCLE  Command failed with exit code 1. ``` That's because the Leaflet's Stimulus controller references the `leaflet/dist/leaflet.min.css` file, which exists on [jsDelivr](https://www.jsdelivr.com/package/npm/leaflet) (used by the Symfony AssetMapper component), but does not in the [`leaflet` npm package](https://www.npmjs.com/package/leaflet). The correct path is `leaflet/dist/leaflet.css`, but it is not possible to fix it because it would break compatibility with the Symfony AssetMapper component. As a workaround, you can configure Webpack Encore to add an alias for the `leaflet/dist/leaflet.min.css` file: ``` Encore.addAliases({ 'leaflet/dist/leaflet.min.css': 'leaflet/dist/leaflet.css', }); ``` Resources --------- [](#resources) - [Documentation](https://symfony.com/bundles/ux-map/current/index.html) - [Report issues](https://github.com/symfony/ux/issues) and [send Pull Requests](https://github.com/symfony/ux/pulls)in the [main Symfony UX repository](https://github.com/symfony/ux) ### Health Score 55 — FairBetter than 98% of packages Maintenance89 Actively maintained with recent releases Popularity40 Moderate usage in the ecosystem Community22 Small or concentrated contributor base Maturity59 Maturing project, gaining track record Bus Factor1 Top contributor holds 73.8% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~21 days Total 28 Last Release 56d ago Major Versions 2.x-dev → 3.x-dev2026-03-23 PHP version history (3 changes)v2.19.0PHP >=8.3 v2.25.0PHP >=8.1 3.x-devPHP >=8.2 ### Community Maintainers ![](https://avatars.githubusercontent.com/u/47313?v=4)[Fabien Potencier](/maintainers/fabpot)[@fabpot](https://github.com/fabpot) --- Top Contributors [![Kocal](https://avatars.githubusercontent.com/u/2103975?v=4)](https://github.com/Kocal "Kocal (90 commits)")[![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)](https://github.com/github-actions[bot] "github-actions[bot] (9 commits)")[![kbond](https://avatars.githubusercontent.com/u/127811?v=4)](https://github.com/kbond "kbond (3 commits)")[![sblondeau](https://avatars.githubusercontent.com/u/6573541?v=4)](https://github.com/sblondeau "sblondeau (3 commits)")[![Valmonzo](https://avatars.githubusercontent.com/u/105214243?v=4)](https://github.com/Valmonzo "Valmonzo (3 commits)")[![rrr63](https://avatars.githubusercontent.com/u/46089601?v=4)](https://github.com/rrr63 "rrr63 (2 commits)")[![dannyvw](https://avatars.githubusercontent.com/u/1218389?v=4)](https://github.com/dannyvw "dannyvw (2 commits)")[![smnandre](https://avatars.githubusercontent.com/u/1359581?v=4)](https://github.com/smnandre "smnandre (2 commits)")[![nicolas-grekas](https://avatars.githubusercontent.com/u/243674?v=4)](https://github.com/nicolas-grekas "nicolas-grekas (1 commits)")[![javiereguiluz](https://avatars.githubusercontent.com/u/73419?v=4)](https://github.com/javiereguiluz "javiereguiluz (1 commits)")[![ker0x](https://avatars.githubusercontent.com/u/5331654?v=4)](https://github.com/ker0x "ker0x (1 commits)")[![mart-insiders](https://avatars.githubusercontent.com/u/144009141?v=4)](https://github.com/mart-insiders "mart-insiders (1 commits)")[![chadyred](https://avatars.githubusercontent.com/u/5954673?v=4)](https://github.com/chadyred "chadyred (1 commits)")[![raphael-geffroy](https://avatars.githubusercontent.com/u/81738559?v=4)](https://github.com/raphael-geffroy "raphael-geffroy (1 commits)")[![StevenRenaux](https://avatars.githubusercontent.com/u/59167761?v=4)](https://github.com/StevenRenaux "StevenRenaux (1 commits)")[![tacman](https://avatars.githubusercontent.com/u/619585?v=4)](https://github.com/tacman "tacman (1 commits)") --- Tags javascriptleafletmapsymfonysymfony-uxuxsymfony-uxmapleaflet ### Code Quality TestsPHPUnit ### Embed Badge ![Health badge](/badges/symfony-ux-leaflet-map/health.svg) ``` [![Health](https://phpackages.com/badges/symfony-ux-leaflet-map/health.svg)](https://phpackages.com/packages/symfony-ux-leaflet-map) ``` ### Alternatives [symfony/ux-turbo Hotwire Turbo integration for Symfony 3906.8M47](/packages/symfony-ux-turbo)[symfony/ux-chartjs Chart.js integration for Symfony 1003.2M18](/packages/symfony-ux-chartjs)[symfony/ux-map Easily embed interactive maps in your Symfony application 18178.5k4](/packages/symfony-ux-map)[symfony/ux-react Integration of React in Symfony 371.4M3](/packages/symfony-ux-react)[symfony/ux-vue Integration of Vue.js in Symfony 35834.3k4](/packages/symfony-ux-vue)[symfony/ux-svelte Integration of Svelte in Symfony 30117.0k](/packages/symfony-ux-svelte) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)