{"id":14983998,"url":"https://github.com/symfony/ux-leaflet-map","last_synced_at":"2025-10-19T11:31:50.213Z","repository":{"id":252092506,"uuid":"839399547","full_name":"symfony/ux-leaflet-map","owner":"symfony","description":"Symfony UX Map Leaflet Bridge","archived":false,"fork":false,"pushed_at":"2024-12-09T22:01:48.000Z","size":104,"stargazers_count":10,"open_issues_count":1,"forks_count":1,"subscribers_count":3,"default_branch":"2.x","last_synced_at":"2025-01-29T14:38:53.207Z","etag":null,"topics":["javascript","leaflet","map","symfony","symfony-ux","ux"],"latest_commit_sha":null,"homepage":"https://symfony.com/bundles/ux-leaflet-map","language":"PHP","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/symfony.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"fabpot","tidelift":"packagist/symfony/symfony","custom":"https://symfony.com/sponsor"}},"created_at":"2024-08-07T14:28:03.000Z","updated_at":"2024-12-30T23:52:28.000Z","dependencies_parsed_at":"2024-08-20T17:06:44.472Z","dependency_job_id":"f639ea73-33a5-42ae-afec-f4350cc26289","html_url":"https://github.com/symfony/ux-leaflet-map","commit_stats":{"total_commits":16,"total_committers":2,"mean_commits":8.0,"dds":0.125,"last_synced_commit":"ba957b5e04652177b00284200455610bff4d1b45"},"previous_names":["symfony/ux-leaflet-map"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/symfony%2Fux-leaflet-map","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/symfony%2Fux-leaflet-map/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/symfony%2Fux-leaflet-map/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/symfony%2Fux-leaflet-map/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/symfony","download_url":"https://codeload.github.com/symfony/ux-leaflet-map/tar.gz/refs/heads/2.x","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237117146,"owners_count":19258361,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","leaflet","map","symfony","symfony-ux","ux"],"created_at":"2024-09-24T14:08:17.853Z","updated_at":"2025-10-19T11:31:50.208Z","avatar_url":"https://github.com/symfony.png","language":"PHP","funding_links":["https://github.com/sponsors/fabpot","https://tidelift.com/funding/github/packagist/symfony/symfony","https://symfony.com/sponsor"],"categories":[],"sub_categories":[],"readme":"# Symfony UX Map: Leaflet\n\n[Leaflet](https://leafletjs.com/) integration for Symfony UX Map.\n\n## Installation\n\nInstall the bridge using Composer and Symfony Flex:\n\n```shell\ncomposer require symfony/ux-leaflet-map\n```\n\nIf you're using WebpackEncore, install your assets and restart Encore (not\nneeded if you're using AssetMapper):\n\n```shell\nnpm install --force\nnpm run watch\n```\n\n\u003e [!NOTE]\n\u003e 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.\n\n## DSN example\n\n```dotenv\nUX_MAP_DSN=leaflet://default\n```\n\n## Map options\n\nYou can use the `LeafletOptions` class to configure your `Map`::\n\n```php\nuse Symfony\\UX\\Map\\Bridge\\Leaflet\\LeafletOptions;\nuse Symfony\\UX\\Map\\Bridge\\Leaflet\\Option\\AttributionControlOptions;\nuse Symfony\\UX\\Map\\Bridge\\Leaflet\\Option\\ControlPosition;\nuse Symfony\\UX\\Map\\Bridge\\Leaflet\\Option\\TileLayer;\nuse Symfony\\UX\\Map\\Bridge\\Leaflet\\Option\\ZoomControlOptions;\nuse Symfony\\UX\\Map\\Point;\nuse Symfony\\UX\\Map\\Map;\n\n$map = (new Map())\n    -\u003ecenter(new Point(48.8566, 2.3522))\n    -\u003ezoom(6);\n\n$leafletOptions = (new LeafletOptions())\n    -\u003etileLayer(new TileLayer(\n        url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',\n        attribution: '© \u003ca href=\"https://www.openstreetmap.org/copyright\"\u003eOpenStreetMap\u003c/a\u003e',\n        options: [\n            'minZoom' =\u003e 5,\n            'maxZoom' =\u003e 10,\n        ]\n    ))\n    -\u003eattributionControl(false)\n    -\u003eattributionControlOptions(new AttributionControlOptions(ControlPosition::BOTTOM_LEFT))\n    -\u003ezoomControl(false)\n    -\u003ezoomControlOptions(new ZoomControlOptions(ControlPosition::TOP_LEFT))\n;\n\n// Add the custom options to the map\n$map-\u003eoptions($leafletOptions);\n```\n\n## Use cases\n\nBelow are some common or advanced use cases when using a map.\n\n### Customize the marker\n\nA 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.\n\nAssuming you have a map with a custom controller:\n```twig\n{{ ux_map(map, {'data-controller': 'my-map' }) }}\n```\n\nYou can create a Stimulus controller to customize the markers before they are created:\n```js\n// assets/controllers/my_map_controller.js\nimport {Controller} from \"@hotwired/stimulus\";\n\nexport default class extends Controller\n{\n    connect() {\n        this.element.addEventListener('ux:map:marker:before-create', this._onMarkerBeforeCreate);\n    }\n\n    disconnect() {\n        // Always remove listeners when the controller is disconnected\n        this.element.removeEventListener('ux:map:marker:before-create', this._onMarkerBeforeCreate);\n    }\n\n    _onMarkerBeforeCreate(event) {\n        // You can access the marker definition and the Leaflet object\n        // Note: `definition.bridgeOptions` is the raw options object that will be passed to the `L.marker` constructor.\n        const { definition, L } = event.detail;\n\n        // Use a custom icon for the marker\n        const redIcon = L.icon({\n          // Note: instead of using a hardcoded URL, you can use the `extra` parameter from `new Marker()` (PHP) and access it here with `definition.extra`.\n          iconUrl: 'https://leafletjs.com/examples/custom-icons/leaf-red.png',\n          shadowUrl: 'https://leafletjs.com/examples/custom-icons/leaf-shadow.png',\n          iconSize: [38, 95], // size of the icon\n          shadowSize: [50, 64], // size of the shadow\n          iconAnchor: [22, 94], // point of the icon which will correspond to marker's location\n          shadowAnchor: [4, 62],  // the same for the shadow\n          popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor\n        })\n\n        definition.bridgeOptions = {\n          icon: redIcon,\n        }\n    }\n}\n```\n\n### Disable the default tile layer\n\nIf you need to use a custom tiles layer rendering engine that is not compatible with the `L.tileLayer().addTo(map)` method\n(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`:\n\n```php\nuse Symfony\\UX\\Map\\Bridge\\Leaflet\\LeafletOptions;\n\n$leafletOptions = new LeafletOptions(tileLayer: false);\n// or\n$leafletOptions = (new LeafletOptions())\n    -\u003etileLayer(false);\n```\n\n## Known issues\n\n### Unable to find `leaflet/dist/leaflet.min.css` file when using Webpack Encore\n\nWhen using Webpack Encore with the Leaflet bridge, you may encounter the following error:\n```\nModule build failed: Module not found:\n\"./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\".\nThis file can not be found, please check it for typos or update it if the file got moved.\n\nEntrypoint app = runtime.67292354.js 488.0777101a.js app.b75294ae.css app.0975a86d.js\nwebpack compiled with 1 error\n ELIFECYCLE  Command failed with exit code 1.\n```\n\nThat's because the Leaflet's Stimulus controller references the `leaflet/dist/leaflet.min.css` file,\nwhich exists on [jsDelivr](https://www.jsdelivr.com/package/npm/leaflet) (used by the Symfony AssetMapper component),\nbut does not in the [`leaflet` npm package](https://www.npmjs.com/package/leaflet).\nThe correct path is `leaflet/dist/leaflet.css`, but it is not possible to fix it because it would break compatibility\nwith the Symfony AssetMapper component.\n\nAs a workaround, you can configure Webpack Encore to add an alias for the `leaflet/dist/leaflet.min.css` file:\n```js\nEncore.addAliases({\n  'leaflet/dist/leaflet.min.css': 'leaflet/dist/leaflet.css',\n})\n```\n\n## Resources\n\n- [Documentation](https://symfony.com/bundles/ux-map/current/index.html)\n- [Report issues](https://github.com/symfony/ux/issues) and\n  [send Pull Requests](https://github.com/symfony/ux/pulls)\n  in the [main Symfony UX repository](https://github.com/symfony/ux)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsymfony%2Fux-leaflet-map","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsymfony%2Fux-leaflet-map","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsymfony%2Fux-leaflet-map/lists"}