Refactor permalink and cache + Add baselayer in permalink (#9)

geo6 · Sep 8, 2020 · fbfcec1 · fbfcec1
1 parent ded8ece
commit fbfcec1
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 45 deletions.
diff --git a/resources/javascript/Cache.ts b/resources/javascript/Cache.ts
@@ -3,9 +3,14 @@
 import { customKey } from "./main";
 
 export class Cache {
-  baselayer: string;
-  map: { latitude: number; longitude: number; zoom: number };
-  storageKey: string;
+  private storageKey: string;
+
+  public baselayer: string | null = null;
+  public map: {
+    latitude: number;
+    longitude: number;
+    zoom: number;
+  } | null = null;
 
   constructor() {
     if (customKey !== null) {

diff --git a/resources/javascript/map/index.ts b/resources/javascript/map/index.ts
@@ -11,7 +11,7 @@ import {
 } from "ol/control";
 import { Coordinate } from "ol/coordinate";
 import Map from "ol/Map";
-import { fromLonLat } from "ol/proj";
+import { fromLonLat, toLonLat } from "ol/proj";
 import View from "ol/View";
 
 import initDraw from "../sidebar/draw";
@@ -20,7 +20,7 @@ import initInfo from "../info";
 import GeolocationControl from "./control/GeolocationControl";
 import MapExportControl from "./control/MapExportControl";
 import MeasureControl from "./control/MeasureControl";
-import { init as initPermalink, getFromCache, getFromHash } from "./permalink";
+import { init as initPermalink, getFromHash } from "./permalink";
 import singleClick from "./singleclick";
 import BaseLayer from "../BaseLayer";
 import BaseLayerOptions from "../_interface/BaseLayerOptions";
@@ -39,15 +39,12 @@ export default function (
     $("#map").height($(window).height() - $("body > nav.navbar").outerHeight());
   });
 
-  let view = getFromHash();
-  if (view.zoom === null || view.center === null) {
-    view = getFromCache();
-  }
-  if (view.zoom === null || view.center === null) {
-    view = {
-      center: fromLonLat(lnglat),
-      zoom,
-    };
+  const hash = getFromHash();
+
+  const view = new View({ constrainResolution: true });
+  if (cache.map !== null) {
+    view.setCenter(fromLonLat([cache.map.longitude, cache.map.latitude]));
+    view.setZoom(cache.map.zoom);
   }
 
   const map = new Map({
@@ -64,11 +61,7 @@ export default function (
       new MeasureControl(),
     ]),
     layers: [],
-    view: new View({
-      center: view.center,
-      constrainResolution: true,
-      zoom: view.zoom,
-    }),
+    view,
   });
 
   const baselayers = {};

diff --git a/resources/javascript/map/permalink.ts b/resources/javascript/map/permalink.ts
@@ -1,43 +1,47 @@
 "use strict";
 
 import { Coordinate } from "ol/coordinate";
-import { fromLonLat, toLonLat } from "ol/proj";
+import { toLonLat } from "ol/proj";
+
+import CacheParams from "../_interface/CacheParams";
 
 import { cache, map } from "../main";
 
-export function getFromHash(): {
-  center: Coordinate | null;
-  zoom: number | null;
-} {
-  let zoom = null;
-  let center = null;
+export function getFromHash(): CacheParams {
+  let baselayer: string | null = null;
+  let coordinate: Coordinate | null = null;
+  let zoom: number | null = null;
 
   if (window.location.hash !== "") {
-    const hash = window.location.hash.replace("#map=", "");
-    const parts = hash.split("/");
+    const params: { map?: string; baselayer?: string } = {};
+    window.location.hash
+      .substr(1)
+      .split("&")
+      .forEach((param) => {
+        const [key, value] = param.split("=");
 
-    if (parts.length === 3) {
-      zoom = parseInt(parts[0], 10);
-      center = fromLonLat([parseFloat(parts[2]), parseFloat(parts[1])]);
-    }
-  }
+        params[key] = value;
+      });
 
-  return { center, zoom };
-}
+    if (typeof params.map !== "undefined") {
+      const parts = params.map.split("/");
 
-export function getFromCache(): {
-  center: Coordinate | null;
-  zoom: number | null;
-} {
-  let zoom = null;
-  let center = null;
+      if (parts.length === 3) {
+        coordinate = [parseFloat(parts[2]), parseFloat(parts[1])];
+        zoom = parseInt(parts[0], 10);
 
-  if (typeof cache.map !== "undefined" && cache.map !== null) {
-    zoom = cache.map.zoom;
-    center = fromLonLat([cache.map.longitude, cache.map.latitude]);
+        cache.setMap(zoom, coordinate[0], coordinate[1]);
+      }
+    }
+
+    if (typeof params.baselayer !== "undefined") {
+      baselayer = params.baselayer;
+
+      cache.setBaselayer(baselayer);
+    }
   }
 
-  return { center, zoom };
+  return { baselayer, coordinate, zoom };
 }
 
 export function init(): void {