Merge pull request #289 from itk-dev/feature/maps-element

Make map element work

Author: rimi-itk

CHANGELOG.md

@@ -11,6 +11,9 @@ before starting to add changes. Use example [placed in the end of the page](#exa
 
 ## [Unreleased]
 
+- [PR-289](https://github.com/OS2Forms/os2forms/pull/289)
+  Added required "Zoom control position" to map element
+
 ## [5.0.0] 2025-11-18
 
 - [PR-192](https://github.com/OS2Forms/os2forms/pull/192)

modules/os2forms_webform_maps/os2forms_webform_maps.libraries.yml

@@ -1,8 +1,5 @@
 webformmap:
   version: 1.x
-  css:
-    theme:
-      css/webform_map.css: {}
   js:
     js/webform_map.js: {}
   dependencies:

modules/os2forms_webform_maps/src/Element/WebformLeafletMapField.php

@@ -5,6 +5,7 @@
 use Drupal\Core\Form\FormStateInterface;
 use Drupal\Core\Render\Element\FormElement;
 use Drupal\webform\Element\WebformCompositeFormElementTrait;
+use Drupal\os2forms_webform_maps\Plugin\WebformElement\WebformLeafletMapField as WebformLeafletMapElement;
 
 /**
  * Provides a webform_map_field.
@@ -36,7 +37,7 @@ public function getInfo() {
       '#minZoom' => 1,
       '#maxZoom' => 18,
       '#zoomFiner' => 0,
-      '#position' => 'topleft',
+      '#position' => WebformLeafletMapElement::LEAFLET_POSITION_TOP_LEFT,
       '#marker' => 'defaultMarker',
       '#drawPolyline' => 0,
       '#drawRectangle' => 0,
@@ -90,6 +91,7 @@ public static function processWebformMapElement(&$element, FormStateInterface $f
       'zoomFiner' => $element['#zoomFiner'],
       'minZoom' => $element['#minZoom'],
       'maxZoom' => $element['#maxZoom'],
+      'zoomControlPosition' => $element['#zoomControlPosition'] ?? WebformLeafletMapElement::LEAFLET_POSITION_TOP_LEFT,
       'center' => [
         'lat' => (float) $element['#lat'],
         'lon' => (float) $element['#lon'],

modules/os2forms_webform_maps/src/Plugin/WebformElement/WebformLeafletMapField.php

@@ -20,6 +20,13 @@ class WebformLeafletMapField extends WebformElementBase {
 
   use LeafletSettingsElementsTrait;
 
+  // Valid Leaflet control positions (cf.
+  // https://github.com/Leaflet/Leaflet/blob/main/src/control/Control.js).
+  const string LEAFLET_POSITION_TOP_LEFT = 'topleft';
+  const string LEAFLET_POSITION_TOP_RIGHT = 'topright';
+  const string LEAFLET_POSITION_BOTTOM_LEFT = 'bottomleft';
+  const string LEAFLET_POSITION_BOTTOM_RIGHT = 'bottomright';
+
   /**
    * {@inheritdoc}
    */
@@ -33,10 +40,11 @@ public function defineDefaultProperties(): array {
       'minZoom' => 1,
       'maxZoom' => 18,
       'zoomFiner' => 0,
+      'zoomControlPosition' => self::LEAFLET_POSITION_TOP_LEFT,
       'scrollWheelZoom' => 0,
       'doubleClickZoom' => 1,
 
-      'position' => 'topleft',
+      'position' => self::LEAFLET_POSITION_TOP_LEFT,
       'marker' => 'defaultMarker',
       'drawPolyline' => 0,
       'drawRectangle' => 0,
@@ -72,6 +80,13 @@ public function form(array $form, FormStateInterface $form_state) {
     $form = parent::form($form, $form_state);
     $map_keys = array_keys(leaflet_map_get_info());
 
+    $positionOptions = [
+      self::LEAFLET_POSITION_TOP_LEFT => $this->t('topleft'),
+      self::LEAFLET_POSITION_TOP_RIGHT => $this->t('topright'),
+      self::LEAFLET_POSITION_BOTTOM_LEFT => $this->t('bottomleft'),
+      self::LEAFLET_POSITION_BOTTOM_RIGHT => $this->t('bottomright'),
+    ];
+
     $form['mapstyles'] = [
       '#type' => 'fieldset',
       '#title' => $this->t('Map settings'),
@@ -139,6 +154,11 @@ public function form(array $form, FormStateInterface $form_state) {
         '#step' => 1,
         '#description' => $this->t('Value that might/will be added to default Fit Elements Bounds Zoom. (-5 / +5)'),
       ],
+      'zoomControlPosition' => [
+        '#type' => 'select',
+        '#title' => $this->t('Zoom control position'),
+        '#options' => $positionOptions,
+      ],
       'scrollWheelZoom' => [
         '#type' => 'checkbox',
         '#title' => $this->t('Enable Scroll Wheel Zoom on click'),
@@ -159,12 +179,7 @@ public function form(array $form, FormStateInterface $form_state) {
       'position' => [
         '#type' => 'select',
         '#title' => $this->t('Toolbar position.'),
-        '#options' => [
-          'topleft' => $this->t('topleft'),
-          'topright' => $this->t('topright'),
-          'bottomleft' => $this->t('bottomleft'),
-          'bottomright' => $this->t('bottomright'),
-        ],
+        '#options' => $positionOptions,
       ],
       'marker' => [
         '#type' => 'radios',