feature #2792 [Map] Add option to configure attribution and zoom control (Danny van Wijk)

This PR was merged into the 2.x branch.

Discussion
----------

[Map] Add option to configure attribution and zoom control

| Q             | A
| ------------- | ---
| Bug fix?      | no
| New feature?  | yes <!-- please update src/**/CHANGELOG.md files -->
| Docs?         | yes <!-- required for new features -->
| Issues        | Fix #... <!-- prefix each issue number with "Fix #", no need to create an issue if none exist, explain below instead -->
| License       | MIT

<!--
Replace this notice by a description of your feature/bugfix.
This will help reviewers and should be a good start for the documentation.

Additionally (see https://symfony.com/releases):
 - Always add tests and ensure they pass.
 - For new features, provide some code snippets to help understand usage.
 - Features and deprecations must be submitted against branch main.
 - Update/add documentation as required (we can help!)
 - Changelog entry should follow https://symfony.com/doc/current/contributing/code/conventions.html#writing-a-changelog-entry
 - Never break backward compatibility (see https://symfony.com/bc).
-->

Add option to configure attribution and zoom control for leaflet

Commits
-------

6851e76 [Map][Leaflet] Add options `attributionControl`, `attributionControlOptions`, `zoomControl` and `zoomControlOptions`

Author: Kocal

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

@@ -1,5 +1,12 @@
 # CHANGELOG
 
+## 2.27
+
+-  Add `attributionControl` and `attributionControlOptions` to `LeafletOptions`,
+   to configure [attribution control](https://leafletjs.com/reference.html#map-attributioncontrol) and its options
+-  Add `zoomControl` and `zoomControlOptions` to `LeafletOptions`,
+   to configure [zoom control](https://leafletjs.com/reference.html#map-zoomcontrol) and its options
+
 ## 2.26
 
 -  Using `new LeafletOptions(tileLayer: false)` will now disable the default `TileLayer`.

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,19 @@ 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;
+        prefix: string | false;
+    };
+    zoomControlOptions?: {
+        position: ControlPosition;
+        zoomInText: string;
+        zoomInTitle: string;
+        zoomOutText: string;
+        zoomOutTitle: string;
+    };
     tileLayer: {
         url: string;
         attribution: string;

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

@@ -144,13 +144,21 @@ class map_controller extends default_1 {
             ...options,
             center: center === null ? undefined : center,
             zoom: zoom === null ? undefined : zoom,
+            attributionControl: false,
+            zoomControl: false,
         });
         if (options.tileLayer) {
             L.tileLayer(options.tileLayer.url, {
                 attribution: options.tileLayer.attribution,
                 ...options.tileLayer.options,
             }).addTo(map);
         }
+        if (typeof options.attributionControlOptions !== 'undefined') {
+            L.control.attribution({ ...options.attributionControlOptions }).addTo(map);
+        }
+        if (typeof options.zoomControlOptions !== 'undefined') {
+            L.control.zoom({ ...options.zoomControlOptions }).addTo(map);
+        }
         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,15 @@ import type {
     PopupOptions,
 } from 'leaflet';
 
-type MapOptions = Pick<LeafletMapOptions, 'center' | 'zoom'> & {
+type MapOptions = Pick<LeafletMapOptions, 'center' | 'zoom' | 'attributionControl' | 'zoomControl'> & {
+    attributionControlOptions?: { position: ControlPosition; prefix: string | false };
+    zoomControlOptions?: {
+        position: ControlPosition;
+        zoomInText: string;
+        zoomInTitle: string;
+        zoomOutText: string;
+        zoomOutTitle: string;
+    };
     tileLayer: { url: string; attribution: string; options: Record<string, unknown> } | false;
 };
 
@@ -79,6 +88,8 @@ export default class extends AbstractMapController<
             ...options,
             center: center === null ? undefined : center,
             zoom: zoom === null ? undefined : zoom,
+            attributionControl: false,
+            zoomControl: false,
         });
 
         if (options.tileLayer) {
@@ -88,6 +99,14 @@ export default class extends AbstractMapController<
             }).addTo(map);
         }
 
+        if (typeof options.attributionControlOptions !== 'undefined') {
+            L.control.attribution({ ...options.attributionControlOptions }).addTo(map);
+        }
+
+        if (typeof options.zoomControlOptions !== 'undefined') {
+            L.control.zoom({ ...options.zoomControlOptions }).addTo(map);
+        }
+
         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,48 @@
+<?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,
+        private readonly string|false $prefix = 'Leaflet',
+    ) {
+    }
+
+    /**
+     * @internal
+     */
+    public static function fromArray(array $array): self
+    {
+        return new self(
+            position: ControlPosition::from($array['position']),
+            prefix: $array['prefix'],
+        );
+    }
+
+    /**
+     * @internal
+     */
+    public function toArray(): array
+    {
+        return [
+            'position' => $this->position->value,
+            'prefix' => $this->prefix,
+        ];
+    }
+}

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,55 @@
+<?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,
+        private readonly string $zoomInText = '<span aria-hidden="true">+</span>',
+        private readonly string $zoomInTitle = 'Zoom in',
+        private readonly string $zoomOutText = '<span aria-hidden="true">&#x2212;</span>',
+        private readonly string $zoomOutTitle = 'Zoom out',
+    ) {
+    }
+
+    /**
+     * @internal
+     */
+    public static function fromArray(array $array): self
+    {
+        if (isset($array['position'])) {
+            $array['position'] = ControlPosition::from($array['position']);
+        }
+
+        return new self(...$array);
+    }
+
+    /**
+     * @internal
+     */
+    public function toArray(): array
+    {
+        return [
+            'position' => $this->position->value,
+            'zoomInText' => $this->zoomInText,
+            'zoomInTitle' => $this->zoomInTitle,
+            'zoomOutText' => $this->zoomOutText,
+            'zoomOutTitle' => $this->zoomOutTitle,
+        ];
+    }
+}