Merge pull request #66 from kreis-viersen/params

Implement lat/lon URL parameters

README.md

@@ -2,19 +2,6 @@ Wenn Sie eine Verwaltung aus NRW sind, binden wir auch Ihre WMS Dienste ggf. ger
 https://kreis-viersen.github.io/quattromap/<br>
 Kontaktieren Sie uns dazu gerne per E-Mail unter [[email protected]]( mailto:[email protected]?subject=QuattroMap ).
 
-# Inhaltsverzeichnis
-
-- [QuattroMap](#quattromap)
-    - [Messwerkzeuge](#messwerkzeuge)
-  - [Aktuell verfügbare Dienste](#aktuell-verfügbare-dienste)
-    - [Layer](#layer)
-    - [Overlays](#overlays)
-  - [Permalink](#permalink)
-  - [Konfiguration](#konfiguration)
-  - [Testen von Pull Requests](#testen-von-pull-requests)
-  - [Develop](#develop)
-    - [Search](#search)
-
 # QuattroMap
 
 [![GitHub CI status](https://github.com/kreis-viersen/quattromap/workflows/ci/badge.svg)][github-action-ci]
@@ -142,6 +129,13 @@ Zusätzlich zu den unter [Layer](https://github.com/kreis-viersen/quattromap#lay
 
 Die URL enthält die derzeitige Einstellung der QuattroMap (Permalink). Dazu gehört die Anzahl und Einstellung der Kartenfenster inkl. Layerdefinitionen, das Kartenzentrum, die Zoomstufe und die Farbe des Gitterkreuzes (Zentrumsmarkierung). Über den Permalink können so vordefinierte Einstellungen für bestimmte Anwendungszwecke als Lesezeichen gespeichert oder weitergegeben werden. Über die Schaltfläche *Permalink in die Zwischenablage kopieren* am linken Bildschirmrand wird die derzeitige URL in die Zwischenablage kopiert und kann dann bspw. per Mail geteilt werden.
 
+## URL-Parameter lat / lon 
+
+Es können mit den URL-Parametern `lat` / `lon` geographische Koordinaten (EPSG:4326) übergeben werden, welche dann beim Aufruf der Karte für den Kartenmittelpunkt verwendet werden.  
+
+Beispiel:
+https://kreis-viersen.github.io/quattromap?lat=51.34119&lon=6.35583
+
 ## Konfiguration
 
 Über die [config.json](./src/config.json) können einige Standardeinstellungen der QuattroMap vorgenommen werden.

package.json

@@ -1,7 +1,7 @@
 {
   "name": "quattromap",
   "description": "Compare up to 4 maps at once",
-  "version": "1.13.0",
+  "version": "1.14.0",
   "license": "MIT",
   "scripts": {
     "start": "webpack serve",

src/index.js

@@ -29,7 +29,7 @@ if (document.fullscreenEnabled) {
   console.log('Fullscreen: NOT supported!');
 }
 
-// settings for layer and overlays
+// settings for layer and overlays and position from URL params
 var settings = {};
 if ('URLSearchParams' in window) {
   var searchParams = new URLSearchParams(window.location.search);
@@ -53,6 +53,12 @@ if ('URLSearchParams' in window) {
       "op4": config.map_4.overlay_opacity || 0.5
     }
   }
+  const lonParam = parseFloat(searchParams.get("lon"));
+  const latParam = parseFloat(searchParams.get("lat"));
+
+  if (!isNaN(lonParam) && !isNaN(latParam)) {
+    config.center = [lonParam, latParam];
+  }
 }
 
 // status of compact attributions
@@ -73,6 +79,8 @@ function updateURLSearchParams() {
     var searchParams = new URLSearchParams(window.location.search);
     searchParams.set("settings", settingString);
     var locationHash = window.location.hash
+    searchParams.delete("lon")
+    searchParams.delete("lat")
     window.history.pushState('', '', "?" + searchParams.toString() + locationHash);
     currentURL = window.location.href;
   }