Merge pull request #604 from orangemug/feature/issue-82

Link to OSM from debug panel

src/components/App.jsx

@@ -212,6 +212,13 @@ export default class App extends React.Component {
       vectorLayers: {},
       mapState: "map",
       spec: latest,
+      mapView: {
+        zoom: 0,
+        center: {
+          lng: 0,
+          lat: 0,
+        },
+      },
       isOpen: {
         settings: false,
         sources: false,
@@ -531,11 +538,22 @@ export default class App extends React.Component {
     return metadata['maputnik:renderer'] || 'mbgljs';
   }
 
+  onMapChange = (mapView) => {
+    this.setState({
+      mapView,
+    });
+  }
+
   mapRenderer() {
     const metadata = this.state.mapStyle.metadata || {};
 
     const mapProps = {
-      mapStyle: style.replaceAccessTokens(this.state.mapStyle, {allowFallback: true}),
+      mapStyle: this.state.mapStyle,
+      replaceAccessTokens: (mapStyle) => {
+        return style.replaceAccessTokens(mapStyle, {
+          allowFallback: true
+        });
+      },
       onDataChange: (e) => {
         this.layerWatcher.analyzeMap(e.map)
         this.fetchSources();
@@ -550,11 +568,13 @@ export default class App extends React.Component {
     if(renderer === 'ol') {
       mapElement = <OpenLayersMap
         {...mapProps}
+        onChange={this.onMapChange}
         debugToolbox={this.state.openlayersDebugOptions.debugToolbox}
         onLayerSelect={this.onLayerSelect}
       />
     } else {
       mapElement = <MapboxGlMap {...mapProps}
+        onChange={this.onMapChange}
         options={this.state.mapboxGlDebugOptions}
         inspectModeEnabled={this.state.mapState === "inspect"}
         highlightedLayer={this.state.mapStyle.layers[this.state.selectedLayerIndex]}
@@ -676,6 +696,7 @@ export default class App extends React.Component {
         onChangeOpenlayersDebug={this.onChangeOpenlayersDebug}
         isOpen={this.state.isOpen.debug}
         onOpenToggle={this.toggleModal.bind(this, 'debug')}
+        mapView={this.state.mapView}
       />
       <ShortcutsModal
         ref={(el) => this.shortcutEl = el}

src/components/map/MapboxGlMap.jsx

@@ -60,12 +60,15 @@ export default class MapboxGlMap extends React.Component {
     inspectModeEnabled: PropTypes.bool.isRequired,
     highlightedLayer: PropTypes.object,
     options: PropTypes.object,
+    replaceAccessTokens: PropTypes.func.isRequired,
+    onChange: PropTypes.func.isRequired,
   }
 
   static defaultProps = {
     onMapLoaded: () => {},
     onDataChange: () => {},
     onLayerSelect: () => {},
+    onChange: () => {},
     mapboxAccessToken: tokens.mapbox,
     options: {},
   }
@@ -88,7 +91,10 @@ export default class MapboxGlMap extends React.Component {
 
     //Mapbox GL now does diffing natively so we don't need to calculate
     //the necessary operations ourselves!
-    this.state.map.setStyle(props.mapStyle, {diff: true})
+    this.state.map.setStyle(
+      this.props.replaceAccessTokens(props.mapStyle),
+      {diff: true}
+    )
   }
 
   componentDidUpdate(prevProps) {
@@ -128,12 +134,19 @@ export default class MapboxGlMap extends React.Component {
 
     const map = new MapboxGl.Map(mapOpts);
 
+    const mapViewChange = () => {
+      const center = map.getCenter();
+      const zoom = map.getZoom();
+      this.props.onChange({center, zoom});
+    }
+    mapViewChange();
+
     map.showTileBoundaries = mapOpts.showTileBoundaries;
     map.showCollisionBoxes = mapOpts.showCollisionBoxes;
     map.showOverdrawInspector = mapOpts.showOverdrawInspector;
 
-    const zoom = new ZoomControl;
+    const zoomControl = new ZoomControl;
-    map.addControl(zoom, 'top-right');
+    map.addControl(zoomControl, 'top-right');
 
     const nav = new MapboxGl.NavigationControl({visualizePitch:true});
     map.addControl(nav, 'top-right');
@@ -189,7 +202,10 @@ export default class MapboxGlMap extends React.Component {
       this.setState({
         zoom: map.getZoom()
       });
-    })
+    });
+
+    map.on("dragend", mapViewChange);
+    map.on("zoomend", mapViewChange);
   }
 
   render() {

src/components/map/OpenLayersMap.jsx

@@ -32,6 +32,8 @@ export default class OpenLayersMap extends React.Component {
     style: PropTypes.object,
     onLayerSelect: PropTypes.func.isRequired,
     debugToolbox: PropTypes.bool.isRequired,
+    replaceAccessTokens: PropTypes.func.isRequired,
+    onChange: PropTypes.func.isRequired,
   }
 
   static defaultProps = {
@@ -61,7 +63,9 @@ export default class OpenLayersMap extends React.Component {
 
   componentDidUpdate(prevProps) {
     if (this.props.mapStyle !== prevProps.mapStyle) {
-      this.updateStyle(this.props.mapStyle);
+      this.updateStyle(
+        this.props.replaceAccessTokens(this.props.mapStyle)
+      );
     }
   }
 
@@ -93,6 +97,22 @@ export default class OpenLayersMap extends React.Component {
       })
     })
 
+    const onMoveEnd = () => {
+      const zoom = map.getView().getZoom();
+      const center = toLonLat(map.getView().getCenter());
+
+      this.props.onChange({
+        zoom,
+        center: {
+          lng: center[0],
+          lat: center[1],
+        },
+      });
+    }
+
+    onMoveEnd();
+    map.on('moveend', onMoveEnd);
+
     map.on('postrender', (evt) => {
       const center = toLonLat(map.getView().getCenter());
       this.setState({
@@ -108,7 +128,9 @@ export default class OpenLayersMap extends React.Component {
 
 
     this.map = map;
-    this.updateStyle(this.props.mapStyle);
+    this.updateStyle(
+      this.props.replaceAccessTokens(this.props.mapStyle)
+    );
   }
 
   closeOverlay = (e) => {

src/components/modals/DebugModal.js

@@ -13,9 +13,16 @@ class DebugModal extends React.Component {
     onOpenToggle: PropTypes.func.isRequired,
     mapboxGlDebugOptions: PropTypes.object,
     openlayersDebugOptions: PropTypes.object,
+    mapView: PropTypes.object,
   }
 
   render() {
+    const {mapView} = this.props;
+
+    const osmZoom = Math.round(mapView.zoom)+1;
+    const osmLon = Number.parseFloat(mapView.center.lng).toFixed(5);
+    const osmLat = Number.parseFloat(mapView.center.lat).toFixed(5);
+
     return <Modal
       data-wd-key="debug-modal"
       isOpen={this.props.isOpen}
@@ -23,6 +30,7 @@ class DebugModal extends React.Component {
       title={'Debug'}
     >
       <div className="maputnik-modal-section maputnik-modal-shortcuts">
+        <h4>Options</h4>
         {this.props.renderer === 'mbgljs' &&
           <ul>
             {Object.entries(this.props.mapboxGlDebugOptions).map(([key, val]) => {
@@ -46,6 +54,18 @@ class DebugModal extends React.Component {
           </ul>
         }
       </div>
+      <div className="maputnik-modal-section">
+        <h4>Links</h4>
+        <p>
+          <a
+            target="_blank"
+            rel="noopener noreferrer"
+            href={`https://www.openstreetmap.org/#map=${osmZoom}/${osmLat}/${osmLon}`}
+          >
+            Open in OSM
+          </a> &mdash; Opens the current view on openstreetmap.org
+        </p>
+      </div>
     </Modal>
   }
 }