new url format: viewport bounds and/or basemap

js/CoordsDisplay.js

@@ -1,6 +1,6 @@
 import * as L from'leaflet';
 import React, {Component} from 'react';
-import * as Util from './Util';
+import {intCoords} from './Util';
 
 export default class CoordsDisplay extends Component {
   constructor(props, context) {
@@ -13,7 +13,7 @@ export default class CoordsDisplay extends Component {
   }
 
   render() {
-    const [z, x] = Util.intCoords(this.state.cursor);
+    const [x, z] = intCoords(this.state.cursor);
     return <div className='coords-display control-box leaflet-control leaflet-bar'>
       {'X ' + x + ' ' + z + ' Z'}</div>;
   }

js/Main.js

@@ -33,6 +33,7 @@ import CoordsDisplay from './CoordsDisplay';
 import CustomToggle from './CustomToggle';
 import {PluginApi} from './PluginApi';
 import * as Util from './Util';
+import {hashToView, viewToHash} from './Url';
 import {WaypointsPluginInfo} from './Waypoints';
 
 L.Icon.Default.imagePath = 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/images/';
@@ -81,7 +82,8 @@ export class Main extends Component {
       this.state = _.merge(this.state, props.options);
     }
 
-    this.mapView = Util.hashToView(location.hash);
+    this.mapView = hashToView(location.hash, this.props, this.state);
+    this.state.basemap = this.mapView.basemap;
 
     this.pluginApi = new PluginApi(this);
 
@@ -110,6 +112,7 @@ export class Main extends Component {
     if (!this.map) {
       this.map = map;
       this.pluginApi.map = map;
+      map.fitBounds(this.mapView.bounds);
     }
   }
 
@@ -181,11 +184,11 @@ export class Main extends Component {
               className="map"
               ref={ref => {if (ref) this.onMapCreated(ref.leafletElement)}}
               crs={mcCRS}
-              center={[this.mapView.z, this.mapView.x]}
-              zoom={this.mapView.zoom}
+              center={[0, 0]}
+              zoom={minZoom}
               maxZoom={5}
               minZoom={minZoom}
-              onmoveend={e => history.replaceState({}, document.title, '#' + Util.viewToHash(e.target))}
+              onmoveend={e => history.replaceState({}, document.title, viewToHash(e.target, this.state))}
               onmousemove={e => this.coordsDisplay && this.coordsDisplay.setCursor(e.latlng)}
               >
 

js/Url.js

@@ -0,0 +1,41 @@
+import {intCoords, radiusToBounds, xz} from './Util';
+
+export function viewToHash(leaf, appState) {
+  let boundsObj = leaf.getBounds();
+  let [e, n] = intCoords(boundsObj.getNorthEast());
+  let [w, s] = intCoords(boundsObj.getSouthWest());
+  return '#b=' + [w, n, e, s].join(',')
+    + '#t=' + appState.basemap;
+}
+
+export function hashToView(hash, appProps, appState) {
+  var view = {
+    bounds: radiusToBounds(appProps.borderCircleRadius || appProps.borderSquareRadius),
+    basemap: appState.basemap,
+  };
+  if (!hash) return view;
+
+  // backwards compatibility
+  let oldUrlMatch = hash.match(/^#([-0-9]+)x?\/([-0-9]+)z?\/?([-0-9]*)/);
+  if (oldUrlMatch) {
+    let [fullMatch, x, z, zoom] = oldUrlMatch;
+    [x, z, zoom] = [x, z, zoom || 0].map(parseFloat);
+    let radius = Math.pow(2, -zoom) * 500;
+    view.bounds = [
+      [x - radius, z - radius],
+      [x + radius, z + radius],
+    ];
+    return view;
+  }
+
+  hash.slice(1).split('#').map(part => {
+    let [key, vals] = part.split('=', 2);
+    if (key == 'b') {
+      let [w, n, e, s] = vals.split(',', 4).map(parseFloat);
+      view.bounds = [xz(w, n), xz(e, s)];
+    }
+    else if (key == 't') view.basemap = vals;
+  });
+
+  return view;
+}

js/Util.js

@@ -31,44 +31,15 @@ export function intCoords(point) {
   var z = parseInt(point.lat);
   if (point.lng < 0) x -= 1;
   if (point.lat < 0) z -= 1;
-  return [z, x];
-}
-
-export function viewToHash(leaf) {
-  var [z, x] = intCoords(leaf.getCenter());
-  return  '' + x + 'x/' + z + 'z/' + leaf.getZoom() + 'zoom';
-}
-
-export function hashToView(hash) {
-  if (!hash) return {x: 0, z: 0, zoom: -4};
-  var [x, z, zoom] = hash.slice(1).split('/', 3)
-    .concat([0,0,0]);
-  return {x: parseFloat(x), z: parseFloat(z), zoom: parseFloat(zoom)};
+  return [x, z];
 }
 
 export function radiusToBounds(radius) {
-  return [xz(-radius, -radius), xz(radius, radius)];
+  return [[-radius, -radius], [radius, radius]];
 }
 
 export function deepLatLngToArr(o) {
   if (Array.isArray(o))
     return o.map(e => deepLatLngToArr(e));
   return [Math.round(o.lat), Math.round(o.lng)];
 }
-
-export function updateJsonObject(oInto, oFrom) {
-  if (!oInto) return oFrom;
-  if (!oFrom) return oInto;
-  for (var key in oFrom) {
-    oInto[key] = oFrom[key];
-  }
-  return oInto;
-}
-
-export function mapObj(obj, fn) {
-  var results = [];
-  for (var key in obj) {
-    results.push(fn(obj[key], key));
-  }
-  return results;
-}