Show a map marker if position given in URL hash.

If the location URL contains a hash of either:

* #z/x/y
* #x/y

In the first case it will zoom and pan to the location;
in the second case it will only pan while maintaining the
current (or last used) zoom level.

If the location URL does not contain a hash in one of those
formats, the marker will be removed from the map.

lib/www/client/source/src/router/index.js

@@ -147,6 +147,7 @@ Vue.use(VueRouter)
       },
       {
         path: "map",
+        name: "map",
         component: Map
       }
     ]

lib/www/client/source/src/views/Map.vue

@@ -31,6 +31,7 @@ import 'leaflet-arrowheads'
 import { mapActions, mapGetters, mapState } from 'vuex';
 import ftstamp from '@/lib/FormatTimestamp'
 import zoomFitIcon from '@/assets/zoom-fit-best.svg'
+import crosshairsIcon from '@/assets/crosshairs.svg'
 import { markdown, markdownInline } from '@/lib/markdown';
 
 var map;
@@ -339,7 +340,8 @@ export default {
               : `/project/${this.$route.params.project}/gis/final/point?${query.toString()}`;
           }
         }
-      ]
+      ],
+      hashMarker: null
     };
   },
 
@@ -380,6 +382,12 @@ export default {
       } else if (event.channel == "event" && event.payload.schema == this.projectSchema) {
         //console.log("EVENT", event);
       }
+    },
+    
+    $route (to, from) {
+      if (to.name == "map") {
+        this.setHashMarker();
+      }
     }
   },
 
@@ -587,6 +595,48 @@ export default {
       map.on('layerremove', this.updateURL);
 
     },
+    
+    setHashMarker () {
+      
+      const crosshairsMarkerIcon = L.divIcon({
+        iconSize:   [20, 20],
+        iconAnchor: [10, 10],
+        className: 'svgmarker',
+        html: `
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+<path style="fill:inherit;fill-opacity:1;stroke:none"
+    d="M 7 3 L 7 4.03125 A 4.5 4.5 0 0 0 3.0332031 8 L 2 8 L 2 9 L 3.03125 9 A 4.5 4.5 0 0 0 7 12.966797 L 7 14 L 8 14 L 8 12.96875 A 4.5 4.5 0 0 0 11.966797 9 L 13 9 L 13 8 L 11.96875 8 A 4.5 4.5 0 0 0 8 4.0332031 L 8 3 L 7 3 z M 7 5.0390625 L 7 8 L 4.0410156 8 A 3.5 3.5 0 0 1 7 5.0390625 z M 8 5.0410156 A 3.5 3.5 0 0 1 10.960938 8 L 8 8 L 8 5.0410156 z M 4.0390625 9 L 7 9 L 7 11.958984 A 3.5 3.5 0 0 1 4.0390625 9 z M 8 9 L 10.958984 9 A 3.5 3.5 0 0 1 8 11.960938 L 8 9 z "
+    />
+</svg>
+      `
+      });
+      
+      const updateMarker = (latlng) => {
+        if (this.hashMarker) {
+          if (latlng) {
+            this.hashMarker.setLatLng(latlng);
+          } else {
+            map.removeLayer(this.hashMarker);
+            this.hashMarker = null;
+          }
+        } else if (latlng) {
+          this.hashMarker = L.marker(latlng, {icon: crosshairsMarkerIcon, interactive: false});
+          this.hashMarker.addTo(map).getElement().style.fill = "fuchsia";
+        }
+      }
+      
+      const parts = document.location.hash.substring(1).split(":")[0].split("/").map(p => decodeURIComponent(p));
+      if (parts.length == 3) {
+        setTimeout(() => map.setView(parts.slice(1).reverse(), parts[0]), 500);
+        updateMarker(parts.slice(1).reverse());
+      } else if (parts.length == 2) {
+        parts.reverse();
+        setTimeout(() => map.panTo(parts), 500);
+        updateMarker(parts);
+      } else {
+        updateMarker();
+      }
+    },
 
     ...mapActions(["api"])
 
@@ -745,6 +795,9 @@ export default {
     });
 
     (new LoadingControl({position: "bottomright"})).addTo(map);
+    
+    // Decode a position if one given in the hash
+    this.setHashMarker();
   }
 
 }