hideResetControl and staticMode props (#41)

theopensystemslab · Aug 17, 2021 · 2d2857d · 2d2857d
1 parent f0c2201
commit 2d2857d
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -29,11 +29,11 @@ osVectorTilesApiKey = "";
 
 We want to use the most detailed base map possible, so `disableVectorTiles` is false by default. If you configure it to true & you provide an API key, we'll render the OS raster base map. If there is no API key, regardless of the value of `disableVectorTiles`, we'll fallback to the OpenStreetMap tile server.
 
-#### Example: load static geojson
+#### Example: load geojson on a static map
 
 ```html
 <body>
-  <my-map geojsonBuffer="10" />
+  <my-map geojsonBuffer="10" hideResetControl staticMode />
   <script>
     const map = document.querySelector("my-map");
     map.geojsonData = { ... }
@@ -54,12 +54,20 @@ geojsonColor = "#ff0000";
 
 @property({ type: Number })
 geojsonBuffer = 15;
+
+@property({ type: Boolean })
+hideResetControl = false;
+
+@property({ type: Boolean })
+staticMode = false;
 ```
 
 `geojsonData` is required, and should be of type "FeatureCollection" or "Feature". The default is an empty geojson object so that we can initialize a VectorLayer & VectorSource regardless. This is currently optimized for geojson containing a single polygon feature.
 
 `geojsonColor` & `geojsonBuffer` are optional style properties. Color sets the stroke of the displayed data and buffer is used to fit the map view to the extent of the geojson features. `geojsonBuffer` corresponds to "value" param in OL documentation [here](https://openlayers.org/en/latest/apidoc/module-ol_extent.html).
 
+`hideResetControl` hides the `↻` button, which when clicked would re-center your map if you've zoomed or panned away from the default view. `staticMode` additionally hides the `+/-` buttons, and disables mouse and keyboard zoom and pan/drag interactions.
+
 #### Example: draw a custom polygon & calculate its' area
 
 ```html

diff --git a/src/my-map.ts b/src/my-map.ts
@@ -1,8 +1,9 @@
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import { Control } from "ol/control";
+import { Control, defaults as defaultControls } from "ol/control";
 import { buffer } from "ol/extent";
 import { GeoJSON } from "ol/format";
+import { defaults as defaultInteractions } from "ol/interaction";
 import { Vector as VectorLayer } from "ol/layer";
 import Map from "ol/Map";
 import { fromLonLat, transformExtent } from "ol/proj";
@@ -98,6 +99,12 @@ export class MyMap extends LitElement {
   @property({ type: String })
   osFeaturesApiKey = import.meta.env.VITE_APP_OS_FEATURES_API_KEY || "";
 
+  @property({ type: Boolean })
+  hideResetControl = false;
+
+  @property({ type: Boolean })
+  staticMode = false;
+
   // runs after the initial render
   firstUpdated() {
     const target = this.shadowRoot?.querySelector("#map") as HTMLElement;
@@ -127,6 +134,15 @@ export class MyMap extends LitElement {
         zoom: this.zoom,
         enableRotation: false,
       }),
+      controls: defaultControls({
+        attribution: true,
+        zoom: !this.staticMode,
+      }),
+      interactions: defaultInteractions({
+        doubleClickZoom: !this.staticMode,
+        dragPan: !this.staticMode,
+        mouseWheelZoom: !this.staticMode,
+      }),
     });
 
     // add a custom 'reset' control below zoom
@@ -160,7 +176,10 @@ export class MyMap extends LitElement {
     element.appendChild(button);
 
     var ResetControl = new Control({ element: element });
-    map.addControl(ResetControl);
+
+    if (!this.hideResetControl) {
+      map.addControl(ResetControl);
+    }
 
     // define cursors for dragging/panning and moving
     map.on("pointerdrag", () => {