8000 [Map] Optional leaflet tilelayer · symfony/ux@90d40b3 · GitHub
[go: up one dir, main page]
Skip to content

Commit 90d40b3

Browse files
Danny van WijkKocal
Danny van Wijk
authored and
Kocal
committed
[Map] Optional leaflet tilelayer
1 parent 59e840d commit 90d40b3

File tree

7 files changed

+53
-18
lines changed

7 files changed

+53
-18
lines changed

‎src/Map/src/Bridge/Leaflet/CHANGELOG.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
# CHANGELOG
22

3+
## 2.26
4+
5+
- Using `new LeafletOptions(tileLayer: false)` will now disable the default `TileLayer`.
6+
Useful when using a custom tiles layer rendering engine not configurable with `L.tileLayer().addTo(map)` method
7+
(e.g.: [Esri/esri-leaflet-vector](https://github.com/Esri/esri-leaflet-vector))
8+
39
## 2.25
410

511
- Downgrade PHP requirement from 8.3 to 8.1

‎src/Map/src/Bridge/Leaflet/README.md

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ export default class extends Controller
8787

8888
_onMarkerBeforeCreate(event) {
8989
// You can access the marker definition and the Leaflet object
90-
// Note: `definition.rawOptions` is the raw options object that will be passed to the `L.marker` constructor.
90+
// Note: `definition.rawOptions` is the raw options object that will be passed to the `L.marker` constructor.
9191
const { definition, L } = event.detail;
9292

9393
// Use a custom icon for the marker
@@ -101,14 +101,28 @@ export default class extends Controller
101101
shadowAnchor: [4, 62], // the same for the shadow
102102
popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
103103
})
104-
104+
105105
definition.rawOptions = {
106106
icon: redIcon,
107107
}
108108
}
109109
}
110110
```
111111

112+
### Disable the default tile layer
113+
114+
If you need to use a custom tiles layer rendering engine that is not compatible with the `L.tileLayer().addTo(map)` method
115+
(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`:
116+
117+
```php
118+
use Symfony\UX\Map\Bridge\Leaflet\LeafletOptions;
119+
120+
$leafletOptions = new LeafletOptions(tileLayer: false);
121+
// or
122+
$leafletOptions = (new LeafletOptions())
123+
->tileLayer(false);
124+
```
125+
112126
## Known issues
113127

114128
### Unable to find `leaflet/dist/leaflet.min.css` file when using Webpack Encore
@@ -124,10 +138,10 @@ webpack compiled with 1 error
124138
 ELIFECYCLE  Command failed with exit code 1.
125139
```
126140

127-
That's because the Leaflet's Stimulus controller references the `leaflet/dist/leaflet.min.css` file,
141+
That's because the Leaflet's Stimulus controller references the `leaflet/dist/leaflet.min.css` file,
128142
which exists on [jsDelivr](https://www.jsdelivr.com/package/npm/leaflet) (used by the Symfony AssetMapper component),
129143
but does not in the [`leaflet` npm package](https://www.npmjs.com/package/leaflet).
130-
The correct path is `leaflet/dist/leaflet.css`, but it is not possible to fix it because it would break compatibility
144+
The correct path is `leaflet/dist/leaflet.css`, but it is not possible to fix it because it would break compatibility
131145
with the Symfony AssetMapper component.
132146

133147
As a workaround, you can configure Webpack Encore to add an alias for the `leaflet/dist/leaflet.min.css` file:

‎src/Map/src/Bridge/Leaflet/assets/dist/map_controller.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ type MapOptions = Pick<LeafletMapOptions, 'center' | 'zoom'> & {
88
url: string;
99
attribution: string;
1010
options: Record<string, unknown>;
11-
};
11+
} | false;
1212
};
1313
export default class extends AbstractMapController<MapOptions, L.Map, MarkerOptions, L.Marker, PopupOptions, L.Popup, PolygonOptions, L.Polygon, PolylineOptions, L.Polyline> {
1414
map: L.Map;

‎src/Map/src/Bridge/Leaflet/assets/dist/map_controller.js

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -145,10 +145,12 @@ class map_controller extends default_1 {
145145
center: center === null ? undefined : center,
146146
zoom: zoom === null ? undefined : zoom,
147147
});
148-
L.tileLayer(options.tileLayer.url, {
149-
attribution: options.tileLayer.attribution,
150-
...options.tileLayer.options,
151-
}).addTo(map);
148+
if (options.tileLayer) {
149+
L.tileLayer(options.tileLayer.url, {
150+
attribution: options.tileLayer.attribution,
151+
...options.tileLayer.options,
152+
}).addTo(map);
153+
}
152154
return map;
153155
}
154156
doCreateMarker({ definition }) {

‎src/Map/src/Bridge/Leaflet/assets/src/map_controller.ts

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import type {
1919
} from 'leaflet';
2020

2121
type MapOptions = Pick<LeafletMapOptions, 'center' | 'zoom'> & {
22-
tileLayer: { url: string; attribution: string; options: Record<string, unknown> };
22+
tileLayer: { url: string; attribution: string; options: Record<string, unknown> } | false;
2323
};
2424

2525
export default class extends AbstractMapController<
@@ -81,10 +81,12 @@ export default class extends AbstractMapController<
8181
zoom: zoom === null ? undefined : zoom,
8282
});
8383

84-
L.tileLayer(options.tileLayer.url, {
85-
attribution: options.tileLayer.attribution,
86-
...options.tileLayer.options,
87-
}).addTo(map);
84+
if (options.tileLayer) {
85+
L.tileLayer(options.tileLayer.url, {
86+
attribution: options.tileLayer.attribution,
87+
...options.tileLayer.options,
88+
}).addTo(map);
89+
}
8890

8991
return map;
9092
}

‎src/Map/src/Bridge/Leaflet/src/LeafletOptions.php

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,14 @@
2020
final class LeafletOptions implements MapOptionsInterface
2121
{
2222
public function __construct(
23-
private TileLayer $tileLayer = new TileLayer(
23+
private TileLayer|false $tileLayer = new TileLayer(
2424
url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
2525
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
2626
),
2727
) {
2828
}
2929

30-
public function tileLayer(TileLayer $tileLayer): self
30+
public function tileLayer(TileLayer|false $tileLayer): self
3131
{
3232
$this->tileLayer = $tileLayer;
3333

@@ -40,7 +40,7 @@ public function tileLayer(TileLayer $tileLayer): self
4040
public static function fromArray(array $array): MapOptionsInterface
4141
{
4242
return new self(
43-
tileLayer: TileLayer::fromArray($array['tileLayer']),
43+
tileLayer: $array['tileLayer'] ? TileLayer::fromArray($array['tileLayer']) : false,
4444
);
4545
}
4646

@@ -50,7 +50,7 @@ public static function fromArray(array $array): MapOptionsInterface
5050
public function toArray(): array
5151
{
5252
return [
53-
'tileLayer' => $this->tileLayer->toArray(),
53+
'tileLayer' => $this->tileLayer ? $this->tileLayer->toArray() : false,
5454
];
5555
}
5656
}

‎src/Map/src/Bridge/Leaflet/tests/LeafletOptionsTest.php

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,4 +62,15 @@ public function testWithMaximumConfiguration(): void
6262

6363
self::assertEquals($leafletOptions, LeafletOptions::fromArray($leafletOptions->toArray()));
6464
}
65+
66+
public function testWithTileLayerFalse(): void
67+
{
68+
$leafletOptions = new LeafletOptions(tileLayer: false);
69+
70+
self::assertSame([
71+
'tileLayer' => false,
72+
], $leafletOptions->toArray());
73+
74+
self::assertEquals($leafletOptions, LeafletOptions::fromArray($leafletOptions->toArray()));
75+
}
6576
}

0 commit comments

Comments
 (0)
0