From de9a7a1f1f74d78731838d62983facf4b55e143e Mon Sep 17 00:00:00 2001 From: Mikkel Ricky Date: Wed, 11 Mar 2026 09:49:03 +0100 Subject: [PATCH 1/5] =?UTF-8?q?Added=20=E2=80=9CDisplay=20on=E2=80=9C=20op?= =?UTF-8?q?tions=20to=20Map=20element?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- modules/os2forms_webform_maps/README.md | 6 + .../os2forms_webform_maps.module | 44 ------- .../WebformElement/WebformLeafletMapField.php | 109 ++++++++++++++++++ ...ent-base-html--webform-map-field.html.twig | 18 --- 4 files changed, 115 insertions(+), 62 deletions(-) delete mode 100644 modules/os2forms_webform_maps/templates/webform-element-base-html--webform-map-field.html.twig diff --git a/modules/os2forms_webform_maps/README.md b/modules/os2forms_webform_maps/README.md index c36b901e..1fee0ea2 100644 --- a/modules/os2forms_webform_maps/README.md +++ b/modules/os2forms_webform_maps/README.md @@ -14,3 +14,9 @@ the map. The data can be exported to PDF. ## Installation The module can be installed using the standard Drupal installation procedure. + +## Fetching GeoJSON using the API + +``` shell +@todo +``` diff --git a/modules/os2forms_webform_maps/os2forms_webform_maps.module b/modules/os2forms_webform_maps/os2forms_webform_maps.module index af545a5d..17d33aab 100644 --- a/modules/os2forms_webform_maps/os2forms_webform_maps.module +++ b/modules/os2forms_webform_maps/os2forms_webform_maps.module @@ -5,22 +5,6 @@ * Module file for os2forms_webform_maps. */ -/** - * Implements hook_theme(). - */ -function os2forms_webform_maps_theme() { - return [ - 'webform_element_base_html__webform_map_field' => [ - 'variables' => [ - 'element' => [], - 'value' => NULL, - 'webform_submission' => NULL, - 'options' => [], - ], - ], - ]; -} - /** * Implements hook_locale_translation_projects_alter(). */ @@ -29,31 +13,3 @@ function os2forms_webform_maps_locale_translation_projects_alter(&$projects) { $path = $module_handler->getModule('os2forms_webform_maps')->getPath(); $projects['os2forms_webform_maps']['info']['interface translation server pattern'] = $path . '/translations/%language.po'; } - -/** - * Implements hook_preprocess_webform_element_base_html__webform_map_field(). - */ -function os2forms_webform_maps_preprocess_webform_element_base_html__webform_map_field(array &$variables) { - // Decode the plain text value once. - $decoded_value = json_decode($variables['value']['#plain_text']); - - // Use the decoded geojson property. - $variables['value']['#plain_text'] = $decoded_value->geojson; - - // Load the webform element base HTML template. - \Drupal::moduleHandler()->loadInclude('webform', 'inc', 'includes/webform.theme.template'); - template_preprocess_webform_element_base_html($variables); - - // Generate a unique ID for the map image. - $map_image_id = 'map-image-' . $variables['element']['#webform_key']; - - $variables['map_image'] = [ - '#type' => 'html_tag', - '#tag' => 'img', - '#attributes' => [ - 'class' => ['handler-help-message'], - 'id' => [$map_image_id], - 'src' => $decoded_value->image ?? '', - ], - ]; -} diff --git a/modules/os2forms_webform_maps/src/Plugin/WebformElement/WebformLeafletMapField.php b/modules/os2forms_webform_maps/src/Plugin/WebformElement/WebformLeafletMapField.php index 3b6aa405..f0619e56 100644 --- a/modules/os2forms_webform_maps/src/Plugin/WebformElement/WebformLeafletMapField.php +++ b/modules/os2forms_webform_maps/src/Plugin/WebformElement/WebformLeafletMapField.php @@ -5,6 +5,7 @@ use Drupal\Core\Form\FormStateInterface; use Drupal\leaflet\LeafletSettingsElementsTrait; use Drupal\webform\Plugin\WebformElementBase; +use Drupal\webform\WebformSubmissionInterface; /** * Provides a 'webform_map_field' element. @@ -70,6 +71,10 @@ public function defineDefaultProperties(): array { 'circle_color' => '#3388FF', 'rectangle_color' => '#3388FF', + // Display settings. + 'display_image_on' => ['html', 'pdf'], + 'display_geojson_on' => ['text', 'html'], + ] + parent::defineDefaultProperties(); } @@ -344,7 +349,111 @@ public function form(array $form, FormStateInterface $form_state) { ], ]; + $form['display_settings'] = [ + '#type' => 'fieldset', + '#title' => $this->t('Display settings'), + ]; + $form['display_settings']['display_settings_container'] = [ + 'display_image_on' => [ + '#type' => 'checkboxes', + '#title' => $this->t('Display image on'), + '#options' => [ + 'html' => $this->t('HTML'), + 'pdf' => $this->t('PDF'), + ], + ], + + 'display_geojson_on' => [ + '#type' => 'checkboxes', + '#title' => $this->t('Display GeoJSON on'), + '#options' => [ + 'html' => $this->t('HTML'), + 'pdf' => $this->t('PDF'), + 'text' => $this->t('Text'), + ], + ], + ]; + return $form; } + /** + * {@inheritdoc} + */ + protected function formatHtmlItem(array $element, WebformSubmissionInterface $webform_submission, array $options = []): array { + $value = $this->getMapValue($element, $webform_submission, $options); + + $imageId = 'map-image-' . $this->getKey($element); + + $build = []; + + $viewMode = $options['view_mode'] ?? 'overview'; + if ('table' === $viewMode) { + $viewMode = 'html'; + } + if ('html' === $viewMode && $options['pdf']) { + $viewMode = 'pdf'; + } + + // @todo Is this (i.e. $element['#display_image_on']) really the way to get element configuration? + $showImageOn = array_filter((array) ($element['#display_image_on'] ?? NULL)); + $includeImage = isset($showImageOn[$viewMode]); + + $showGeoJsonOn = array_filter((array) ($element['#display_geojson_on'] ?? NULL)); + $includeGeoJson = isset($showGeoJsonOn[$viewMode]); + + if ($includeImage) { + $build['image'] = [ + '#type' => 'html_tag', + '#tag' => 'img', + '#attributes' => [ + 'class' => ['handler-help-message'], + 'id' => $imageId, + 'src' => $value['image'], + ], + ]; + } + + if ($includeGeoJson) { + $build['geojson'] = [ + '#markup' => $value['geojson'], + ]; + } + + return $build; + } + + /** + * {@inheritdoc} + */ + protected function formatTextItem(array $element, WebformSubmissionInterface $webform_submission, array $options = []) { + $value = $this->getMapValue($element, $webform_submission, $options); + + return $value['geojson']; + } + + /** + * Get structured map value. + * + * @return array{ + * image: string, + * geojson: string + * } + */ + private function getMapValue(array $element, WebformSubmissionInterface $webform_submission, array $options = []): array { + $value = $this->getValue($element, $webform_submission, $options); + + try { + $data = json_decode($value, associative: TRUE, flags: JSON_THROW_ON_ERROR); + } + catch (\JsonException) { + $data = []; + } + + return $data + [ + 'image' => '', + 'geojson' => 'null', + ]; + } + } diff --git a/modules/os2forms_webform_maps/templates/webform-element-base-html--webform-map-field.html.twig b/modules/os2forms_webform_maps/templates/webform-element-base-html--webform-map-field.html.twig deleted file mode 100644 index cd3a19bd..00000000 --- a/modules/os2forms_webform_maps/templates/webform-element-base-html--webform-map-field.html.twig +++ /dev/null @@ -1,18 +0,0 @@ -{# -/** - * @file - * Default theme implementation for a webform base element as html. - * - * Available variables: - * - element: The element. - * - title: The label for the element. - * - value: The content for the element. - * - item: The form item used to display the element. - * - options Associative array of options for element. - * - multiline: Flag to determine if value spans multiple lines. - * - email: Flag to determine if element is for an email. - */ -#} - {{ map_image }} - {{ item }} - From 7c5e04ea4a249c564a7d6a524c557f66be271dc0 Mon Sep 17 00:00:00 2001 From: Mikkel Ricky Date: Wed, 11 Mar 2026 10:42:26 +0100 Subject: [PATCH 2/5] Added documentation on fetching GeoJSON using the API --- modules/os2forms_webform_maps/README.md | 53 ++++++++++++++++++++++++- 1 file changed, 51 insertions(+), 2 deletions(-) diff --git a/modules/os2forms_webform_maps/README.md b/modules/os2forms_webform_maps/README.md index 1fee0ea2..6c9e6300 100644 --- a/modules/os2forms_webform_maps/README.md +++ b/modules/os2forms_webform_maps/README.md @@ -17,6 +17,55 @@ The module can be installed using the standard Drupal installation procedure. ## Fetching GeoJSON using the API -``` shell -@todo +Assume that we have a webform with ID `my_webform` and the webform has a Map element with ID `my_map`. We can then fetch +the data for a submission with UUID `c34d01c5-7bd9-4b15-8b01-5787959453c0` on the webform with a HTTP `GET` request (cf. +[OS2Forms REST API](https://github.com/itk-dev/os2forms_rest_api/blob/main/README.md)): + +``` shell name=api-fetch-submission-data +curl --silent --location --header 'api-key: my-api-key' http://127.0.0.1:8000/webform_rest/my_webform/submission/c34d01c5-7bd9-4b15-8b01-5787959453c0 +# {"entity":{"serial":[{"value":1}],"sid":[{"value":2}],"uuid":[{"value":"c34d01c5-7bd9-4b15-8b01-5787959453c0"}],…``` +``` + +The result, however, contains a lot of data and we need a little more work the extract just the GeoJSON data. + +Using [`jq`](https://jqlang.org/) (or similar tools), we can drill down into the full submission data to extract just +the GeoJSON data from the Map element (JSON decoding twice along the way): + +``` shell name=api-extract-map-element-data +curl --silent --location --header 'api-key: my-api-key' http://127.0.0.1:8000/webform_rest/my_webform/submission/c34d01c5-7bd9-4b15-8b01-5787959453c0 | jq '.data.my_map | fromjson | .geojson | fromjson' +``` + +The final result will be something like + +``` json +{ + "type": "FeatureCollection", + "features": [ + { + "type": "Feature", + "properties": {}, + "geometry": { + "type": "LineString", + "coordinates": [ + [ + 10.193674, + 56.158929 + ], + [ + 10.241758, + 56.155296 + ], + [ + 10.242788, + 56.130048 + ], + [ + 10.189209, + 56.129283 + ] + ] + } + } + ] +} ``` From ff515e3c4416480e31744535c3619a1e831d4b0f Mon Sep 17 00:00:00 2001 From: Mikkel Ricky Date: Wed, 11 Mar 2026 10:45:15 +0100 Subject: [PATCH 3/5] Updated changelog --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4fabc6c1..075e7d98 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,8 @@ before starting to add changes. Use example [placed in the end of the page](#exa ## [Unreleased] +- [PR-315](https://github.com/OS2Forms/os2forms/pull/315) + Added “Display on“ options to Map element - [#251](https://github.com/OS2Forms/os2forms/issues/251) Webform encrypt uninstall problem fix - git actions check From 3c9dffb1c3e7cd17e27b6d0a91cac8da5b44341e Mon Sep 17 00:00:00 2001 From: Mikkel Ricky Date: Wed, 11 Mar 2026 12:40:14 +0100 Subject: [PATCH 4/5] Handled "mail" display --- .../WebformElement/WebformLeafletMapField.php | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/modules/os2forms_webform_maps/src/Plugin/WebformElement/WebformLeafletMapField.php b/modules/os2forms_webform_maps/src/Plugin/WebformElement/WebformLeafletMapField.php index f0619e56..00327dcf 100644 --- a/modules/os2forms_webform_maps/src/Plugin/WebformElement/WebformLeafletMapField.php +++ b/modules/os2forms_webform_maps/src/Plugin/WebformElement/WebformLeafletMapField.php @@ -72,9 +72,8 @@ public function defineDefaultProperties(): array { 'rectangle_color' => '#3388FF', // Display settings. - 'display_image_on' => ['html', 'pdf'], + 'display_image_on' => ['email', 'html', 'pdf'], 'display_geojson_on' => ['text', 'html'], - ] + parent::defineDefaultProperties(); } @@ -358,6 +357,7 @@ public function form(array $form, FormStateInterface $form_state) { '#type' => 'checkboxes', '#title' => $this->t('Display image on'), '#options' => [ + 'email' => $this->t('Email'), 'html' => $this->t('HTML'), 'pdf' => $this->t('PDF'), ], @@ -367,6 +367,7 @@ public function form(array $form, FormStateInterface $form_state) { '#type' => 'checkboxes', '#title' => $this->t('Display GeoJSON on'), '#options' => [ + 'email' => $this->t('Email'), 'html' => $this->t('HTML'), 'pdf' => $this->t('PDF'), 'text' => $this->t('Text'), @@ -387,11 +388,14 @@ protected function formatHtmlItem(array $element, WebformSubmissionInterface $we $build = []; - $viewMode = $options['view_mode'] ?? 'overview'; + $viewMode = $options['view_mode'] ?? 'results'; if ('table' === $viewMode) { $viewMode = 'html'; } - if ('html' === $viewMode && $options['pdf']) { + elseif ($options['email'] ?? FALSE) { + $viewMode = 'email'; + } + elseif ($options['pdf'] ?? FALSE) { $viewMode = 'pdf'; } @@ -411,12 +415,16 @@ protected function formatHtmlItem(array $element, WebformSubmissionInterface $we 'id' => $imageId, 'src' => $value['image'], ], + '#prefix' => '
', + '#suffix' => '
', ]; } if ($includeGeoJson) { $build['geojson'] = [ '#markup' => $value['geojson'], + '#prefix' => '
', + '#suffix' => '
', ]; } From 31f4ca5c1725e878bd9f4072159db188025604d1 Mon Sep 17 00:00:00 2001 From: Mikkel Ricky Date: Thu, 12 Mar 2026 09:57:42 +0100 Subject: [PATCH 5/5] Updated URL --- modules/os2forms_webform_maps/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/os2forms_webform_maps/README.md b/modules/os2forms_webform_maps/README.md index 6c9e6300..d93aa5d4 100644 --- a/modules/os2forms_webform_maps/README.md +++ b/modules/os2forms_webform_maps/README.md @@ -19,7 +19,7 @@ The module can be installed using the standard Drupal installation procedure. Assume that we have a webform with ID `my_webform` and the webform has a Map element with ID `my_map`. We can then fetch the data for a submission with UUID `c34d01c5-7bd9-4b15-8b01-5787959453c0` on the webform with a HTTP `GET` request (cf. -[OS2Forms REST API](https://github.com/itk-dev/os2forms_rest_api/blob/main/README.md)): +[OS2Forms REST API](https://github.com/OS2Forms/os2forms_rest_api/blob/main/README.md)): ``` shell name=api-fetch-submission-data curl --silent --location --header 'api-key: my-api-key' http://127.0.0.1:8000/webform_rest/my_webform/submission/c34d01c5-7bd9-4b15-8b01-5787959453c0