From 90d40b3dc898659b2247f2bc16fccda1ae4ab76c Mon Sep 17 00:00:00 2001 From: Danny van Wijk Date: Wed, 28 May 2025 11:31:46 +0200 Subject: [PATCH] [Map] Optional leaflet tilelayer --- src/Map/src/Bridge/Leaflet/CHANGELOG.md | 6 +++++ src/Map/src/Bridge/Leaflet/README.md | 22 +++++++++++++++---- .../Leaflet/assets/dist/map_controller.d.ts | 2 +- .../Leaflet/assets/dist/map_controller.js | 10 +++++---- .../Leaflet/assets/src/map_controller.ts | 12 +++++----- .../src/Bridge/Leaflet/src/LeafletOptions.php | 8 +++---- .../Leaflet/tests/LeafletOptionsTest.php | 11 ++++++++++ 7 files changed, 53 insertions(+), 18 deletions(-) diff --git a/src/Map/src/Bridge/Leaflet/CHANGELOG.md b/src/Map/src/Bridge/Leaflet/CHANGELOG.md index 3d6ee0fc587..62c9e93e09c 100644 --- a/src/Map/src/Bridge/Leaflet/CHANGELOG.md +++ b/src/Map/src/Bridge/Leaflet/CHANGELOG.md @@ -1,5 +1,11 @@ # CHANGELOG +## 2.26 + +- Using `new LeafletOptions(tileLayer: false)` will now disable the default `TileLayer`. + Useful when using a custom tiles layer rendering engine not configurable with `L.tileLayer().addTo(map)` method + (e.g.: [Esri/esri-leaflet-vector](https://github.com/Esri/esri-leaflet-vector)) + ## 2.25 - Downgrade PHP requirement from 8.3 to 8.1 diff --git a/src/Map/src/Bridge/Leaflet/README.md b/src/Map/src/Bridge/Leaflet/README.md index d3cc9308f11..a6d0501e770 100644 --- a/src/Map/src/Bridge/Leaflet/README.md +++ b/src/Map/src/Bridge/Leaflet/README.md @@ -87,7 +87,7 @@ export default class extends Controller _onMarkerBeforeCreate(event) { // You can access the marker definition and the Leaflet object - // Note: `definition.rawOptions` is the raw options object that will be passed to the `L.marker` constructor. + // Note: `definition.rawOptions` 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 @@ -101,7 +101,7 @@ export default class extends Controller shadowAnchor: [4, 62], // the same for the shadow popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor }) - + definition.rawOptions = { icon: redIcon, } @@ -109,6 +109,20 @@ export default class extends Controller } ``` +### 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. 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`: + +```php +use Symfony\UX\Map\Bridge\Leaflet\LeafletOptions; + +$leafletOptions = new LeafletOptions(tileLayer: false); +// or +$leafletOptions = (new LeafletOptions()) + ->tileLayer(false); +``` + ## Known issues ### Unable to find `leaflet/dist/leaflet.min.css` file when using Webpack Encore @@ -124,10 +138,10 @@ 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, +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 +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: diff --git a/src/Map/src/Bridge/Leaflet/assets/dist/map_controller.d.ts b/src/Map/src/Bridge/Leaflet/assets/dist/map_controller.d.ts index 8c10b168d5f..f0d9085f83c 100644 --- a/src/Map/src/Bridge/Leaflet/assets/dist/map_controller.d.ts +++ b/src/Map/src/Bridge/Leaflet/assets/dist/map_controller.d.ts @@ -8,7 +8,7 @@ type MapOptions = Pick & { url: string; attribution: string; options: Record; - }; + } | false; }; export default class extends AbstractMapController { map: L.Map; diff --git a/src/Map/src/Bridge/Leaflet/assets/dist/map_controller.js b/src/Map/src/Bridge/Leaflet/assets/dist/map_controller.js index 208cf321f2f..5529e713951 100644 --- a/src/Map/src/Bridge/Leaflet/assets/dist/map_controller.js +++ b/src/Map/src/Bridge/Leaflet/assets/dist/map_controller.js @@ -145,10 +145,12 @@ class map_controller extends default_1 { center: center === null ? undefined : center, zoom: zoom === null ? undefined : zoom, }); - L.tileLayer(options.tileLayer.url, { - attribution: options.tileLayer.attribution, - ...options.tileLayer.options, - }).addTo(map); + if (options.tileLayer) { + L.tileLayer(options.tileLayer.url, { + attribution: options.tileLayer.attribution, + ...options.tileLayer.options, + }).addTo(map); + } return map; } doCreateMarker({ definition }) { diff --git a/src/Map/src/Bridge/Leaflet/assets/src/map_controller.ts b/src/Map/src/Bridge/Leaflet/assets/src/map_controller.ts index 53333592a58..dbc733b96c9 100644 --- a/src/Map/src/Bridge/Leaflet/assets/src/map_controller.ts +++ b/src/Map/src/Bridge/Leaflet/assets/src/map_controller.ts @@ -19,7 +19,7 @@ import type { } from 'leaflet'; type MapOptions = Pick & { - tileLayer: { url: string; attribution: string; options: Record }; + tileLayer: { url: string; attribution: string; options: Record } | false; }; export default class extends AbstractMapController< @@ -81,10 +81,12 @@ export default class extends AbstractMapController< zoom: zoom === null ? undefined : zoom, }); - L.tileLayer(options.tileLayer.url, { - attribution: options.tileLayer.attribution, - ...options.tileLayer.options, - }).addTo(map); + if (options.tileLayer) { + L.tileLayer(options.tileLayer.url, { + attribution: options.tileLayer.attribution, + ...options.tileLayer.options, + }).addTo(map); + } return map; } diff --git a/src/Map/src/Bridge/Leaflet/src/LeafletOptions.php b/src/Map/src/Bridge/Leaflet/src/LeafletOptions.php index b0c85a82904..4edcdca23ff 100644 --- a/src/Map/src/Bridge/Leaflet/src/LeafletOptions.php +++ b/src/Map/src/Bridge/Leaflet/src/LeafletOptions.php @@ -20,14 +20,14 @@ final class LeafletOptions implements MapOptionsInterface { public function __construct( - private TileLayer $tileLayer = new TileLayer( + private TileLayer|false $tileLayer = new TileLayer( url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', attribution: '© OpenStreetMap', ), ) { } - public function tileLayer(TileLayer $tileLayer): self + public function tileLayer(TileLayer|false $tileLayer): self { $this->tileLayer = $tileLayer; @@ -40,7 +40,7 @@ public function tileLayer(TileLayer $tileLayer): self public static function fromArray(array $array): MapOptionsInterface { return new self( - tileLayer: TileLayer::fromArray($array['tileLayer']), + tileLayer: $array['tileLayer'] ? TileLayer::fromArray($array['tileLayer']) : false, ); } @@ -50,7 +50,7 @@ public static function fromArray(array $array): MapOptionsInterface public function toArray(): array { return [ - 'tileLayer' => $this->tileLayer->toArray(), + 'tileLayer' => $this->tileLayer ? $this->tileLayer->toArray() : false, ]; } } diff --git a/src/Map/src/Bridge/Leaflet/tests/LeafletOptionsTest.php b/src/Map/src/Bridge/Leaflet/tests/LeafletOptionsTest.php index 4c22f97689f..5559133649d 100644 --- a/src/Map/src/Bridge/Leaflet/tests/LeafletOptionsTest.php +++ b/src/Map/src/Bridge/Leaflet/tests/LeafletOptionsTest.php @@ -62,4 +62,15 @@ public function testWithMaximumConfiguration(): void self::assertEquals($leafletOptions, LeafletOptions::fromArray($leafletOptions->toArray())); } + + public function testWithTileLayerFalse(): void + { + $leafletOptions = new LeafletOptions(tileLayer: false); + + self::assertSame([ + 'tileLayer' => false, + ], $leafletOptions->toArray()); + + self::assertEquals($leafletOptions, LeafletOptions::fromArray($leafletOptions->toArray())); + } }