[Map] Add option to configure attribution and zoom control position

Author: Danny van Wijk

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

@@ -5,6 +5,7 @@
 -  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))
+-  Added option to configure attribution and zoom control position.
 
 ## 2.25
 

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

@@ -33,7 +33,10 @@ You can use the `LeafletOptions` class to configure your `Map`::
 
 ```php
 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;
 
@@ -50,6 +53,10 @@ $leafletOptions = (new LeafletOptions())
             '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

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

@@ -2,8 +2,14 @@ import AbstractMapController from '@symfony/ux-map';
 import type { Icon, InfoWindowWithoutPositionDefinition, MarkerDefinition, Point, PolygonDefinition, PolylineDefinition } from '@symfony/ux-map';
 import 'leaflet/dist/leaflet.min.css';
 import * as L from 'leaflet';
-import type { MapOptions as LeafletMapOptions, MarkerOptions, PolylineOptions as PolygonOptions, PolylineOptions, PopupOptions } from 'leaflet';
-type MapOptions = Pick<LeafletMapOptions, 'center' | 'zoom'> & {
+import type { ControlPosition, MapOptions as LeafletMapOptions, MarkerOptions, PolylineOptions as PolygonOptions, PolylineOptions, PopupOptions } from 'leaflet';
+type MapOptions = Pick<LeafletMapOptions, 'center' | 'zoom' | 'attributionControl' | 'zoomControl'> & {
+    attributionControlOptions?: {
+        position: ControlPosition;
+    };
+    zoomControlOptions?: {
+        position: ControlPosition;
+    };
     tileLayer: {
         url: string;
         attribution: string;

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

@@ -140,6 +140,8 @@ class map_controller extends default_1 {
         });
     }
     doCreateMap({ center, zoom, options, }) {
+        options.attributionControl = typeof options.attributionControlOptions !== 'undefined';
+        options.zoomControl = typeof options.zoomControlOptions !== 'undefined';
         const map = L.map(this.element, {
             ...options,
             center: center === null ? undefined : center,
@@ -151,6 +153,12 @@ class map_controller extends default_1 {
                 ...options.tileLayer.options,
             }).addTo(map);
         }
+        if (options.attributionControl && options.attributionControlOptions?.position) {
+            map.attributionControl.setPosition(options.attributionControlOptions.position);
+        }
+        if (options.zoomControl && options.zoomControlOptions?.position) {
+            map.zoomControl.setPosition(options.zoomControlOptions.position);
+        }
         return map;
     }
     doCreateMarker({ definition }) {

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

@@ -10,6 +10,7 @@ import type {
 import 'leaflet/dist/leaflet.min.css';
 import * as L from 'leaflet';
 import type {
+    ControlPosition,
     LatLngBoundsExpression,
     MapOptions as LeafletMapOptions,
     MarkerOptions,
@@ -18,7 +19,9 @@ import type {
     PopupOptions,
 } from 'leaflet';
 
-type MapOptions = Pick<LeafletMapOptions, 'center' | 'zoom'> & {
+type MapOptions = Pick<LeafletMapOptions, 'center' | 'zoom' | 'attributionControl' | 'zoomControl'> & {
+    attributionControlOptions?: { position: ControlPosition };
+    zoomControlOptions?: { position: ControlPosition };
     tileLayer: { url: string; attribution: string; options: Record<string, unknown> } | false;
 };
 
@@ -75,6 +78,10 @@ export default class extends AbstractMapController<
         zoom,
         options,
     }: { center: Point | null; zoom: number | null; options: MapOptions }): L.Map {
+        // We assume the following control options are enabled if their options are set
+        options.attributionControl = typeof options.attributionControlOptions !== 'undefined';
+        options.zoomControl = typeof options.zoomControlOptions !== 'undefined';
+
         const map = L.map(this.element, {
             ...options,
             center: center === null ? undefined : center,
@@ -88,6 +95,14 @@ export default class extends AbstractMapController<
             }).addTo(map);
         }
 
+        if (options.attributionControl && options.attributionControlOptions?.position) {
+            map.attributionControl.setPosition(options.attributionControlOptions.position);
+        }
+
+        if (options.zoomControl && options.zoomControlOptions?.position) {
+            map.zoomControl.setPosition(options.zoomControlOptions.position);
+        }
+
         return map;
     }
 

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

@@ -11,7 +11,9 @@
 
 namespace Symfony\UX\Map\Bridge\Leaflet;
 
+use Symfony\UX\Map\Bridge\Leaflet\Option\AttributionControlOptions;
 use Symfony\UX\Map\Bridge\Leaflet\Option\TileLayer;
+use Symfony\UX\Map\Bridge\Leaflet\Option\ZoomControlOptions;
 use Symfony\UX\Map\MapOptionsInterface;
 
 /**
@@ -24,6 +26,10 @@ public function __construct(
             url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
             attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
         ),
+        private bool $attributionControl = true,
+        private AttributionControlOptions $attributionControlOptions = new AttributionControlOptions(),
+        private bool $zoomControl = true,
+        private ZoomControlOptions $zoomControlOptions = new ZoomControlOptions(),
     ) {
     }
 
@@ -34,23 +40,77 @@ public function tileLayer(TileLayer|false $tileLayer): self
         return $this;
     }
 
+    public function attributionControl(bool $enable = true): self
+    {
+        $this->attributionControl = $enable;
+
+        return $this;
+    }
+
+    public function attributionControlOptions(AttributionControlOptions $attributionControlOptions): self
+    {
+        $this->attributionControl = true;
+        $this->attributionControlOptions = $attributionControlOptions;
+
+        return $this;
+    }
+
+    public function zoomControl(bool $enable = true): self
+    {
+        $this->zoomControl = $enable;
+
+        return $this;
+    }
+
+    public function zoomControlOptions(ZoomControlOptions $zoomControlOptions): self
+    {
+        $this->zoomControl = true;
+        $this->zoomControlOptions = $zoomControlOptions;
+
+        return $this;
+    }
+
     /**
      * @internal
      */
     public static function fromArray(array $array): MapOptionsInterface
     {
-        return new self(
-            tileLayer: $array['tileLayer'] ? TileLayer::fromArray($array['tileLayer']) : false,
-        );
+        $array += ['attributionControl' => false, 'zoomControl' => false, 'tileLayer' => false];
+
+        if ($array['tileLayer']) {
+            $array['tileLayer'] = TileLayer::fromArray($array['tileLayer']);
+        }
+
+        if (isset($array['attributionControlOptions'])) {
+            $array['attributionControl'] = true;
+            $array['attributionControlOptions'] = AttributionControlOptions::fromArray($array['attributionControlOptions']);
+        }
+
+        if (isset($array['zoomControlOptions'])) {
+            $array['zoomControl'] = true;
+            $array['zoomControlOptions'] = ZoomControlOptions::fromArray($array['zoomControlOptions']);
+        }
+
+        return new self(...$array);
     }
 
     /**
      * @internal
      */
     public function toArray(): array
     {
-        return [
+        $array = [
             'tileLayer' => $this->tileLayer ? $this->tileLayer->toArray() : false,
         ];
+
+        if ($this->attributionControl) {
+            $array['attributionControlOptions'] = $this->attributionControlOptions->toArray();
+        }
+
+        if ($this->zoomControl) {
+            $array['zoomControlOptions'] = $this->zoomControlOptions->toArray();
+        }
+
+        return $array;
     }
 }

src/Map/src/Bridge/Leaflet/src/Option/AttributionControlOptions.php

@@ -0,0 +1,45 @@
+<?php
+
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <[email protected]>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace Symfony\UX\Map\Bridge\Leaflet\Option;
+
+/**
+ * Options for the rendering of the attribution control.
+ *
+ * @see https://leafletjs.com/reference.html#control-zoom
+ */
+final class AttributionControlOptions
+{
+    public function __construct(
+        private readonly ControlPosition $position = ControlPosition::BOTTOM_RIGHT,
+    ) {
+    }
+
+    /**
+     * @internal
+     */
+    public static function fromArray(array $array): self
+    {
+        return new self(
+            position: ControlPosition::from($array['position']),
+        );
+    }
+
+    /**
+     * @internal
+     */
+    public function toArray(): array
+    {
+        return [
+            'position' => $this->position->value,
+        ];
+    }
+}

src/Map/src/Bridge/Leaflet/src/Option/ControlPosition.php

@@ -0,0 +1,23 @@
+<?php
+
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <[email protected]>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace Symfony\UX\Map\Bridge\Leaflet\Option;
+
+/**
+ * @see https://leafletjs.com/reference.html#control-position
+ */
+enum ControlPosition: string
+{
+    case TOP_LEFT = 'topleft';
+    case TOP_RIGHT = 'topright';
+    case BOTTOM_LEFT = 'bottomleft';
+    case BOTTOM_RIGHT = 'bottomright';
+}

src/Map/src/Bridge/Leaflet/src/Option/ZoomControlOptions.php

@@ -0,0 +1,45 @@
+<?php
+
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <[email protected]>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace Symfony\UX\Map\Bridge\Leaflet\Option;
+
+/**
+ * Options for the rendering of the zoom control.
+ *
+ * @see https://leafletjs.com/reference.html#control-zoom
+ */
+final class ZoomControlOptions
+{
+    public function __construct(
+        private readonly ControlPosition $position = ControlPosition::TOP_LEFT,
+    ) {
+    }
+
+    /**
+     * @internal
+     */
+    public static function fromArray(array $array): self
+    {
+        return new self(
+            position: ControlPosition::from($array['position']),
+        );
+    }
+
+    /**
+     * @internal
+     */
+    public function toArray(): array
+    {
+        return [
+            'position' => $this->position->value,
+        ];
+    }
+}

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

@@ -27,6 +27,12 @@ public function testWithMinimalConfiguration(): void
                 'attribution' => '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
                 'options' => [],
             ],
+            'attributionControlOptions' => [
+                'position' => 'bottomright',
+            ],
+            'zoomControlOptions' => [
+                'position' => 'topleft',
+            ],
         ], $leafletOptions->toArray());
 
         self::assertEquals($leafletOptions, LeafletOptions::fromArray($leafletOptions->toArray()));
@@ -58,6 +64,12 @@ public function testWithMaximumConfiguration(): void
                     'zoomOffset' => 0,
                 ],
             ],
+            'attributionControlOptions' => [
+                'position' => 'bottomright',
+            ],
+            'zoomControlOptions' => [
+                'position' => 'topleft',
+            ],
         ], $leafletOptions->toArray());
 
         self::assertEquals($leafletOptions, LeafletOptions::fromArray($leafletOptions->toArray()));
@@ -69,6 +81,30 @@ public function testWithTileLayerFalse(): void
 
         self::assertSame([
             'tileLayer' => false,
+            'attributionControlOptions' => [
+                'position' => 'bottomright',
+            ],
+            'zoomControlOptions' => [
+                'position' => 'topleft',
+            ],
+        ], $leafletOptions->toArray());
+
+        self::assertEquals($leafletOptions, LeafletOptions::fromArray($leafletOptions->toArray()));
+    }
+
+    public function testWithoutControls(): void
+    {
+        $leafletOptions = new LeafletOptions(
+            attributionControl: false,
+            zoomControl: false,
+        );
+
+        self::assertSame([
+            'tileLayer' => [
+                'url' => 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
+                'attribution' => '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+                'options' => [],
+            ],
         ], $leafletOptions->toArray());
 
         self::assertEquals($leafletOptions, LeafletOptions::fromArray($leafletOptions->toArray()));