Feature to update current map view in OSM

src/components/map/MapboxGlMap.jsx

@@ -66,6 +66,7 @@ export default class MapboxGlMap extends React.Component {
     onMapLoaded: () => {},
     onDataChange: () => {},
     onLayerSelect: () => {},
+    onChange: () => {},
     mapboxAccessToken: tokens.mapbox,
     options: {},
   }
@@ -128,12 +129,21 @@ export default class MapboxGlMap extends React.Component {
 
     const map = new MapboxGl.Map(mapOpts);
 
+    const center = map.getCenter();
+    const zoom = map.getZoom();
+
+    this.setState({
+      center,
+      zoom,
+    });
+    this.props.onChange({center, zoom});
+
     map.showTileBoundaries = mapOpts.showTileBoundaries;
     map.showCollisionBoxes = mapOpts.showCollisionBoxes;
     map.showOverdrawInspector = mapOpts.showOverdrawInspector;
 
-    const zoom = new ZoomControl;
-    map.addControl(zoom, 'top-right');
+    const zoomControl = new ZoomControl;
+    map.addControl(zoomControl, 'top-right');
 
     const nav = new MapboxGl.NavigationControl({visualizePitch:true});
     map.addControl(nav, 'top-right');
@@ -189,7 +199,21 @@ export default class MapboxGlMap extends React.Component {
       this.setState({
         zoom: map.getZoom()
       });
-    })
+    });
+
+    map.on("dragend", e => {
+      this.props.onChange({
+        center: map.getCenter(),
+        zoom: this.state.zoom,
+      })
+    });
+
+    map.on("zoomend", e => {
+      this.props.onChange({
+        center: this.state.center,
+        zoom: map.getZoom(),
+      })
+    });
   }
 
   render() {

src/components/map/OpenLayersMap.jsx

@@ -61,7 +61,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 +95,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 +126,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) => {