PR for #38 permalink

app-starter/static/app-conf-projected.json

@@ -27,6 +27,15 @@
     ]
   ],
 
+  "permalink": {
+    "location": "search",
+    "layers": true,
+    "extent": true,
+    "paramPrefix": "pl_",
+    "history": true,
+    "precision": 6
+  },
+
   "tileGridDefs": {
     "dutch_rd": {
       "extent": [-285401.920, 22598.080, 595401.920, 903401.920],

app-starter/static/app-conf.json

@@ -14,6 +14,15 @@
   "mapZoom": 2,
   "mapCenter": [0, 0],
 
+  "permalink": {
+    "location": "hash",
+    "layers": true,
+    "extent": false,
+    "projection": "EPSG:4326",
+    "paramPrefix": "",
+    "history": true
+  },
+
   "mapLayers": [
 
     {

src/components/ol/Map.vue

@@ -19,6 +19,7 @@ import Overlay from 'ol/Overlay';
 import { WguEventBus } from '../../WguEventBus.js';
 import { LayerFactory } from '../../factory/Layer.js';
 import ColorUtil from '../../util/Color';
+import PermalinkController from './PermalinkController';
 
 export default {
   name: 'wgu-map',
@@ -32,9 +33,11 @@ export default {
       zoom: this.$appConfig.mapZoom,
       center: this.$appConfig.mapCenter,
       projection: this.$appConfig.mapProjection,
+      projectionObj: null,
       projectionDefs: this.$appConfig.projectionDefs,
       tileGridDefs: this.$appConfig.tileGridDefs || {},
-      tileGrids: {}
+      tileGrids: {},
+      permalink: this.$appConfig.permalink
     }
   },
   mounted () {
@@ -58,57 +61,63 @@ export default {
     }, 200);
   },
   created () {
-    var me = this;
-
     // make map rotateable according to property
     const interactions = defaultInteractions({
-      altShiftDragRotate: me.rotateableMap,
-      pinchRotate: me.rotateableMap
+      altShiftDragRotate: this.rotateableMap,
+      pinchRotate: this.rotateableMap
     });
     let controls = [
       new Zoom(),
       new Attribution({
-        collapsible: me.collapsibleAttribution
+        collapsible: this.collapsibleAttribution
       })
     ];
     // add a button control to reset rotation to 0, if map is rotateable
-    if (me.rotateableMap) {
+    if (this.rotateableMap) {
       controls.push(new RotateControl());
     }
 
     // Optional projection (EPSG) definitions for Proj4
-    if (me.projectionDefs) {
+    if (this.projectionDefs) {
       // Add all (array of array)
-      proj4.defs(me.projectionDefs);
+      proj4.defs(this.projectionDefs);
       // Register with OpenLayers
       olproj4(proj4);
     }
 
     // Projection for Map, default is Web Mercator
-    if (!me.projection) {
-      me.projection = {code: 'EPSG:3857', units: 'm'}
+    if (!this.projection) {
+      this.projection = {code: 'EPSG:3857', units: 'm'}
     }
-    const projection = new Projection(me.projection);
+
+    const projection = new Projection(this.projection);
 
     // Optional TileGrid definitions by name, for ref in Layers
-    Object.keys(me.tileGridDefs).map(name => {
-      me.tileGrids[name] = new TileGrid(me.tileGridDefs[name]);
+    Object.keys(this.tileGridDefs).map(name => {
+      this.tileGrids[name] = new TileGrid(this.tileGridDefs[name]);
     });
 
-    me.map = new Map({
+    this.map = new Map({
       layers: [],
       controls: controls,
       interactions: interactions,
       view: new View({
-        center: me.center || [0, 0],
-        zoom: me.zoom,
+        center: this.center,
+        zoom: this.zoom,
         projection: projection
       })
     });
 
     // create layers from config and add them to map
-    const layers = me.createLayers();
-    me.map.getLayers().extend(layers);
+    const layers = this.createLayers();
+    this.map.getLayers().extend(layers);
+
+    if (this.$appConfig.permalink) {
+      this.permalinkController = this.createPermalinkController();
+      this.map.set('permalinkcontroller', this.permalinkController, true);
+      this.permalinkController.apply();
+      this.permalinkController.setup();
+    }
   },
 
   methods: {
@@ -150,6 +159,16 @@ export default {
 
       return layers;
     },
+
+    /**
+     * Creates a PermalinkController, override in subclass for specializations.
+     *
+     * @return {PermalinkController} PermalinkController instance.
+     */
+    createPermalinkController () {
+      return new PermalinkController(this.map, this.$appConfig.permalink);
+    },
+
     /**
      * Sets the background color of the OL buttons to the color property.
      */
@@ -213,7 +232,6 @@ export default {
       // show tooltip if a hoverable feature gets hit with the mouse
       map.on('pointermove', me.onPointerMove, me);
     },
-
     /**
      * Shows the hover tooltip on the map if an appropriate feature of a
      * 'hoverable' layer was hit with the mouse.