Added settings to lock a map in place

closes gh-3

Author: Htbaa

CHANGELOG.md

@@ -1,3 +1,4 @@
+- De shortcode ondersteund nu de instellingen `enable_controls=0` en `enable_interactions=0` om een kaart te fixeren. Door `enable_controls` op `0` te zetten verdwijnen de buttons voor zoomen. Met `enable_interactions=0` verdwijnt de mogelijkheid om met touch, muis of toetsenbord te navigeren door de kaart. Standaard staan deze instellingen op `1` (dit komt overeen met de vorige versies). Hiermee kan een kaart gefixeerd worden.
 - Update naar OpenLayers 10.
 - Update naar React 18.
 - De kaart krijgt nu niet meer automatisch focus wanneer de muis er overheen gaat. Op schermen waar de kaart niet volledig paste gaf dit een hinderlijke gebruikerservaring.

plugins/gh-datainmap/SHORTCODE.md

@@ -46,4 +46,8 @@ Met `toggler_description` is het mogelijk om de standaard tekst (DataInMap -> In
 
 `[datainmap layers=1,2 types=1,2,3,4 enable_toggler=1 toggler_description="U kunt hier kaartlagen in- of uitschakelen."]`
 
-Om de container waar DataInMap wordt geplaatst te voorzien van een of meerdere CSS classes kan gebruik gemaakt worden van `css_class`, bijv. `[datainmap css_class="kaart-groot"]`. Deze CSS classes dienen in de stylesheet van het gebruikte thema te staan.
+Om de container waar DataInMap wordt geplaatst te voorzien van een of meerdere CSS classes kan gebruik gemaakt worden van `css_class`, bijv. `[datainmap css_class="kaart-groot"]`. Deze CSS classes dienen in de stylesheet van het gebruikte thema te staan.
+
+Het is mogelijk om de kaart te fixeren door de zogenaamde controls (knoppen voor zoomen) en interactions (zoomen met muis, touch en toetsenbordpijltjes etc.) uit te schakelen. Dit geeft dan een kaart waarop de gebruiker niet kan inzoomen of kan verplaatsen. Let op, als de zoekfunctie ingeschakeld blijft zal deze inzoomen op de locatie en kan de gebruiker niet uitzoomen. De standaard waardes voor `enable_controls` en `enable_interactions` is `1`.
+
+`[datainmap layers=1 types=1 enable_controls=0 enable_interactions=0 enable_search=0]`

plugins/gh-datainmap/includes/shortcode.php

@@ -34,6 +34,8 @@ function gh_dim_shortcode($atts, $content = null) {
             'enable_filter' => 0,
             'enable_features_listbox' => 1,
             'enable_toggler' => 0,
+            'enable_controls' => 1,
+            'enable_interactions' => 1,
             'toggle_layers' => null,
             'untoggled_layers' => null,
             'toggle_types' => 'ALL',
@@ -57,6 +59,8 @@ function gh_dim_shortcode($atts, $content = null) {
     $settings['enable_tooltip'] = $args['enable_tooltip'] == 1 ? true : false;
     $settings['enable_filter'] = $args['enable_filter'] == 1 ? true : false;
     $settings['enable_features_listbox'] = $args['enable_features_listbox'] == 1 ? true : false;
+    $settings['enable_controls'] = $args['enable_controls'] == 1 ? true : false;
+    $settings['enable_interactions'] = $args['enable_interactions'] == 1 ? true : false;
     $settings['enable_toggler'] = $args['enable_toggler'] == 1 ? true : false;
     $settings['toggler_description'] = $args['toggler_description'];
     $settings['dynamic_loading'] = $args['dynamic_loading'] == 1 ? true : false;

src/components/map.js

@@ -14,6 +14,9 @@
 import 'ol/ol.css';
 import Map from 'ol/Map';
 import View from 'ol/View';
+import { defaults as defaultInteractions } from 'ol/interaction';
+import { defaults as defaultControls } from 'ol/control';
+import Collection from 'ol/Collection';
 import React, {Component} from 'react';
 import _ from 'lodash';
 import { zoomTo, zoomToMax } from '../util/map-animations';
@@ -38,10 +41,16 @@ export class MapComponent extends Component {
         const olView = new View(this.props.viewSettings);
         const mapElement = this.refMap.current;
         const tooltipElement = this.refTooltip.current;
+        // Remove all controls if desired
+        const controls = this.props.enableControls ? defaultControls() : new Collection();
+        // Remove all interactions if desired
+        const interactions = this.props.enableInteractions ? defaultInteractions() : new Collection();
         this.olMap = new Map({
             view: olView,
             target: mapElement,
             layers: this.props.layers,
+            controls,
+            interactions,
         });
         // Get zoom elements so we can provide them with a proper aria-label
         this.olMap.getControls().forEach((control) => {

src/datainmap.js

@@ -475,7 +475,7 @@ else {
 const App = () => {
     return (
         <Provider store={store}>
-            <MapComponentLink enableTooltip={settings.enable_tooltip} enableFeaturesListbox={settings.enable_features_listbox}>
+            <MapComponentLink enableTooltip={settings.enable_tooltip} enableFeaturesListbox={settings.enable_features_listbox} enableControls={settings.enable_controls} enableInteractions={settings.enable_interactions}>
                 { settings.enable_search && <SearchComponentLink /> }
                 { settings.enable_toggler && <TogglerComponentLink /> }
                 { settings.enable_filter && <FilterComponentLink /> }