Fix to reset map state on renderer change.

package-lock.json

@@ -8356,6 +8356,11 @@
       "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=",
       "dev": true
     },
+    "lodash.get": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
+      "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk="
+    },
     "lodash.isequal": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",

package.json

@@ -32,6 +32,7 @@
     "lodash.capitalize": "^4.2.1",
     "lodash.clamp": "^4.0.3",
     "lodash.clonedeep": "^4.5.0",
+    "lodash.get": "^4.4.2",
     "lodash.isequal": "^4.5.0",
     "lodash.throttle": "^4.1.1",
     "mapbox-gl": "^0.53.1",

src/components/App.jsx

@@ -2,6 +2,7 @@ import autoBind from 'react-autobind';
 import React from 'react'
 import cloneDeep from 'lodash.clonedeep'
 import clamp from 'lodash.clamp'
+import get from 'lodash.get'
 import {arrayMove} from 'react-sortable-hoc'
 import url from 'url'
 
@@ -279,6 +280,27 @@ export default class App extends React.Component {
     })
   }
 
+  onChangeMetadataProperty = (property, value) => {
+    // If we're changing renderer reset the map state.
+    if (
+      property === 'maputnik:renderer' &&
+      value !== get(this.state.mapStyle, ['metadata', 'maputnik:renderer'], 'mbgljs')
+    ) {
+      this.setState({
+        mapState: 'map'
+      });
+    }
+
+    const changedStyle = {
+      ...this.state.mapStyle,
+      metadata: {
+        ...this.state.mapStyle.metadata,
+        [property]: value
+      }
+    }
+    this.onStyleChanged(changedStyle)
+  }
+
   onStyleChanged = (newStyle, save=true) => {
 
     const errors = validate(newStyle, latest)
@@ -634,6 +656,7 @@ export default class App extends React.Component {
       <SettingsModal
         mapStyle={this.state.mapStyle}
         onStyleChanged={this.onStyleChanged}
+        onChangeMetadataProperty={this.onChangeMetadataProperty}
         isOpen={this.state.isOpen.settings}
         onOpenToggle={this.toggleModal.bind(this, 'settings')}
         openlayersDebugOptions={this.state.openlayersDebugOptions}

src/components/modals/SettingsModal.jsx

@@ -11,6 +11,7 @@ class SettingsModal extends React.Component {
   static propTypes = {
     mapStyle: PropTypes.object.isRequired,
     onStyleChanged: PropTypes.func.isRequired,
+    onChangeMetadataProperty: PropTypes.func.isRequired,
     isOpen: PropTypes.bool.isRequired,
     onOpenToggle: PropTypes.func.isRequired,
   }
@@ -23,19 +24,9 @@ class SettingsModal extends React.Component {
     this.props.onStyleChanged(changedStyle)
   }
 
-  changeMetadataProperty(property, value) {
-    const changedStyle = {
-      ...this.props.mapStyle,
-      metadata: {
-        ...this.props.mapStyle.metadata,
-        [property]: value
-      }
-    }
-    this.props.onStyleChanged(changedStyle)
-  }
-
   render() {
     const metadata = this.props.mapStyle.metadata || {}
+    const {onChangeMetadataProperty} = this.props;
     const inputProps = { }
     return <Modal
       data-wd-key="modal-settings"
@@ -78,7 +69,7 @@ class SettingsModal extends React.Component {
         <StringInput {...inputProps}
           data-wd-key="modal-settings.maputnik:mapbox_access_token" 
           value={metadata['maputnik:mapbox_access_token']}
-          onChange={this.changeMetadataProperty.bind(this, "maputnik:mapbox_access_token")}
+          onChange={onChangeMetadataProperty.bind(this, "maputnik:mapbox_access_token")}
         />
       </InputBlock>
 
@@ -86,7 +77,7 @@ class SettingsModal extends React.Component {
         <StringInput {...inputProps}
           data-wd-key="modal-settings.maputnik:openmaptiles_access_token" 
           value={metadata['maputnik:openmaptiles_access_token']}
-          onChange={this.changeMetadataProperty.bind(this, "maputnik:openmaptiles_access_token")}
+          onChange={onChangeMetadataProperty.bind(this, "maputnik:openmaptiles_access_token")}
         />
       </InputBlock>
 
@@ -94,7 +85,7 @@ class SettingsModal extends React.Component {
         <StringInput {...inputProps}
           data-wd-key="modal-settings.maputnik:thunderforest_access_token" 
           value={metadata['maputnik:thunderforest_access_token']}
-          onChange={this.changeMetadataProperty.bind(this, "maputnik:thunderforest_access_token")}
+          onChange={onChangeMetadataProperty.bind(this, "maputnik:thunderforest_access_token")}
         />
       </InputBlock>
 
@@ -106,7 +97,7 @@ class SettingsModal extends React.Component {
             ['ol', 'Open Layers (experimental)'],
           ]}
           value={metadata['maputnik:renderer'] || 'mbgljs'}
-          onChange={this.changeMetadataProperty.bind(this, 'maputnik:renderer')}
+          onChange={onChangeMetadataProperty.bind(this, 'maputnik:renderer')}
         />
       </InputBlock>