1.7.0-beta2

Only scroll to selected item in <LayerList/> if not already in view.

README.md

@@ -18,6 +18,7 @@ A free and open visual editor for the [Mapbox GL styles](https://www.mapbox.com/
 targeted at developers and map designers.
 
 - :link: Design your maps online at **<https://maputnik.github.io/editor/>** (all in local storage)
+- :link: Try out the v1.7.0-beta release at: https://maputnik.github.io/releases/v1.7.0-beta/
 - :link: Use the [Maputnik CLI](https://github.com/maputnik/editor/wiki/Maputnik-CLI) for local style development
 
 Mapbox has built one of the best and most amazing OSS ecosystems. A key component to ensure its longevity and independence is an OSS map designer.

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "maputnik",
-  "version": "1.7.0-beta",
+  "version": "1.7.0-beta2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1514,9 +1514,9 @@
       "dev": true
     },
     "@mdi/react": {
-      "version": "1.3.0",
+      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/@mdi/react/-/react-1.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/@mdi/react/-/react-1.4.0.tgz",
-      "integrity": "sha512-RmdB3gsAW4iXOTTHaEaGQ//2w0sxGWiZEoIDteXcf1qTkDkaA+LBu6ub4nNi4VcmSKjcceGHnYHqHENh8fky7A=="
+      "integrity": "sha512-OUH9RhfDJPhybQL3owwrSDIXz2yVKXg5lYeOZjyRCiT9wqywNK0FeYyDByOwNIZnnIQoQYmuSrMv+pOX0Uqkmw=="
     },
     "@nodelib/fs.scandir": {
       "version": "2.1.3",
@@ -2490,6 +2490,11 @@
         "is-string": "^1.0.5"
       }
     },
+    "array-move": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/array-move/-/array-move-2.2.1.tgz",
+      "integrity": "sha512-qQpEHBnVT6HAFgEVUwRdHVd8TYJThrZIT5wSXpEUTPwBaYhPLclw12mEpyUvRWVdl1VwPOqnIy6LqTFN3cSeUQ=="
+    },
     "array-union": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
@@ -5783,9 +5788,9 @@
       "dev": true
     },
     "fastq": {
-      "version": "1.6.1",
+      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.6.1.tgz",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.7.0.tgz",
-      "integrity": "sha512-mpIH5sKYueh3YyeJwqtVo8sORi0CgtmkVbK6kZStpQlZBYQuTzG2CZ7idSiJuA7bY0SFCWUc5WIs+oYumGCQNw==",
+      "integrity": "sha512-YOadQRnHd5q6PogvAR/x62BGituF2ufiEA6s8aavQANw5YKHERI4AREboX6KotzP8oX2klxYF2wcV/7bn1clfQ==",
       "dev": true,
       "requires": {
         "reusify": "^1.0.4"
@@ -6426,9 +6431,9 @@
       }
     },
     "gl-matrix": {
-      "version": "3.2.1",
+      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.3.0.tgz",
-      "integrity": "sha512-YYVO8jUSf6+SakL4AJmx9Jc7zAZhkJQ+WhdtX3VQe5PJdCOX6/ybY4x1vk+h94ePnjRn6uml68+QxTAJneUpvA=="
+      "integrity": "sha512-COb7LDz+SXaHtl/h4LeaFcNdJdAQSDeVqjiIihSXNrkWObZLhDI4hIkZC11Aeqp7bcE72clzB0BnDXr2SmslRA=="
     },
     "glob": {
       "version": "7.1.6",
@@ -6535,18 +6540,18 @@
       }
     },
     "gonzales-pe": {
-      "version": "4.2.4",
+      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/gonzales-pe/-/gonzales-pe-4.2.4.tgz",
+      "resolved": "https://registry.npmjs.org/gonzales-pe/-/gonzales-pe-4.3.0.tgz",
-      "integrity": "sha512-v0Ts/8IsSbh9n1OJRnSfa7Nlxi4AkXIsWB6vPept8FDbL4bXn3FNuxjYtO/nmBGu7GDkL9MFeGebeSu6l55EPQ==",
+      "integrity": "sha512-otgSPpUmdWJ43VXyiNgEYE4luzHCL2pz4wQ0OnDluC6Eg4Ko3Vexy/SrSynglw/eR+OhkzmqFCZa/OFa/RgAOQ==",
       "dev": true,
       "requires": {
-        "minimist": "1.1.x"
+        "minimist": "^1.2.5"
       },
       "dependencies": {
         "minimist": {
-          "version": "1.1.3",
+          "version": "1.2.5",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.1.3.tgz",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-          "integrity": "sha1-O+39kaktOQFvz6ocaB6Pqhoe/ag=",
+          "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
           "dev": true
         }
       }
@@ -8841,9 +8846,9 @@
       }
     },
     "mapbox-gl": {
-      "version": "1.9.0",
+      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-1.9.0.tgz",
+      "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-1.9.1.tgz",
-      "integrity": "sha512-PKpoiB2pPUMrqFfBJpt/oA8On3zcp0adEoDS2YIC2RA6o4EZ9Sq2NPZocb64y7ra3mLUvEb7ps1pLVlPMh6y7w==",
+      "integrity": "sha512-jpBcqh+4qpOkj8RdxRdvwKPA8gzNYyMQ8HOcXgZYuEM5nKevRDjD3cEs+rUxi1JuYj4t8bIk68Lfh7aQQC1MjQ==",
       "requires": {
         "@mapbox/geojson-rewind": "^0.4.0",
         "@mapbox/geojson-types": "^1.0.2",
@@ -9180,9 +9185,9 @@
       }
     },
     "mkdirp": {
-      "version": "1.0.3",
+      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
-      "integrity": "sha512-6uCP4Qc0sWsgMLy1EOqqS/3rjDHOEnsStVr/4vtAIK2Y5i2kA7lFFejYrpIyiN9w0pYf4ckeCYT9f1r1P9KX5g==",
+      "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
       "dev": true
     },
     "mocha": {
@@ -9990,9 +9995,9 @@
       "dev": true
     },
     "ol": {
-      "version": "6.2.1",
+      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/ol/-/ol-6.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/ol/-/ol-6.3.1.tgz",
-      "integrity": "sha512-CT2szew/COd7Zf9Bls+pdzewBYZNgyfxFivJ3L4Jv9Th7JdWjcQAT+pqMPH25L9SbVT+T17RCMq2H2m9uBCl1A==",
+      "integrity": "sha512-cSSYizzUJQ7AhFSrLPAKopjDXPCHtJsXSmjf3xutPG+iyBeD9IOepQGSgpOSZavPI1gsYh9wowiH+NZwVJ/NYQ==",
       "requires": {
         "elm-pep": "^1.0.4",
         "pbf": "3.2.1",
@@ -10723,12 +10728,12 @@
       }
     },
     "postcss-sass": {
-      "version": "0.4.2",
+      "version": "0.4.4",
-      "resolved": "https://registry.npmjs.org/postcss-sass/-/postcss-sass-0.4.2.tgz",
+      "resolved": "https://registry.npmjs.org/postcss-sass/-/postcss-sass-0.4.4.tgz",
-      "integrity": "sha512-hcRgnd91OQ6Ot9R90PE/khUDCJHG8Uxxd3F7Y0+9VHjBiJgNv7sK5FxyHMCBtoLmmkzVbSj3M3OlqUfLJpq0CQ==",
+      "integrity": "sha512-BYxnVYx4mQooOhr+zer0qWbSPYnarAy8ZT7hAQtbxtgVf8gy+LSLT/hHGe35h14/pZDTw1DsxdbrwxBN++H+fg==",
       "dev": true,
       "requires": {
-        "gonzales-pe": "^4.2.4",
+        "gonzales-pe": "^4.3.0",
         "postcss": "^7.0.21"
       }
     },
@@ -13246,12 +13251,12 @@
       "dev": true
     },
     "stylelint": {
-      "version": "13.2.1",
+      "version": "13.3.0",
-      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-13.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-13.3.0.tgz",
-      "integrity": "sha512-461ZV4KpUe7pEHHgMOsH4kkjF7qsjkCIMJYOf7QQC4cvgPUJ0z4Nj+ah5fvKl1rzqBqc5EZa6P0nna4CGoJX+A==",
+      "integrity": "sha512-ehNzQu9JAbxuiNhUhmoyPgMjIdz7Fg1AxC5urPVhKotto/faF5GxwljSoLvQa6pB6yd+BVuofApWjWT/6/rBMQ==",
       "dev": true,
       "requires": {
-        "autoprefixer": "^9.7.4",
+        "autoprefixer": "^9.7.5",
         "balanced-match": "^1.0.0",
         "chalk": "^3.0.0",
         "cosmiconfig": "^6.0.0",
@@ -13271,7 +13276,7 @@
         "lodash": "^4.17.15",
         "log-symbols": "^3.0.0",
         "mathml-tag-names": "^2.1.3",
-        "meow": "^6.0.1",
+        "meow": "^6.1.0",
         "micromatch": "^4.0.2",
         "normalize-selector": "^0.2.0",
         "postcss": "^7.0.27",
@@ -13282,7 +13287,7 @@
         "postcss-media-query-parser": "^0.2.3",
         "postcss-reporter": "^6.0.1",
         "postcss-resolve-nested-selector": "^0.1.1",
-        "postcss-safe-parser": "^4.0.1",
+        "postcss-safe-parser": "^4.0.2",
         "postcss-sass": "^0.4.2",
         "postcss-scss": "^2.0.0",
         "postcss-selector-parser": "^6.0.2",
@@ -13318,9 +13323,9 @@
           "dev": true
         },
         "camelcase-keys": {
-          "version": "6.2.1",
+          "version": "6.2.2",
-          "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-6.2.1.tgz",
+          "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-6.2.2.tgz",
-          "integrity": "sha512-BPCNVH56RVIxQQIXskp5tLQXUNGQ6sXr7iCv1FHDt81xBOQ/1r6H8SPxf19InVP6DexWar4s87q9thfuk8X9HA==",
+          "integrity": "sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==",
           "dev": true,
           "requires": {
             "camelcase": "^5.3.1",
@@ -14526,9 +14531,9 @@
       "dev": true
     },
     "uuid": {
-      "version": "7.0.2",
+      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-7.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-7.0.3.tgz",
-      "integrity": "sha512-vy9V/+pKG+5ZTYKf+VcphF5Oc6EFiu3W8Nv3P3zIh0EqVI80ZxOzuPfe9EHjkFNvf8+xuTHVeei4Drydlx4zjw==",
+      "integrity": "sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg==",
       "dev": true
     },
     "v8-compile-cache": {
@@ -14606,9 +14611,9 @@
       "dev": true
     },
     "vfile-message": {
-      "version": "2.0.3",
+      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-2.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-2.0.4.tgz",
-      "integrity": "sha512-qQg/2z8qnnBHL0psXyF72kCjb9YioIynvyltuNKFaUhRtqTIcIMP3xnBaPzirVZNuBrUe1qwFciSx2yApa4byw==",
+      "integrity": "sha512-DjssxRGkMvifUOJre00juHoP9DPWuzjxKuMDrhNbk2TdaYYBNMStsNhEOt3idrtI12VQYM/1+iM0KOzXi4pxwQ==",
       "dev": true,
       "requires": {
         "@types/unist": "^2.0.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "maputnik",
-  "version": "1.7.0-beta",
+  "version": "1.7.0-beta2",
   "description": "A MapboxGL visual style editor",
   "main": "''",
   "scripts": {
@@ -25,7 +25,8 @@
     "@babel/runtime": "^7.8.4",
     "@mapbox/mapbox-gl-rtl-text": "^0.2.3",
     "@mapbox/mapbox-gl-style-spec": "^13.12.0",
-    "@mdi/react": "^1.3.0",
+    "@mdi/react": "^1.4.0",
+    "array-move": "^2.2.1",
     "classnames": "^2.2.6",
     "codemirror": "^5.52.0",
     "color": "^3.1.2",
@@ -40,10 +41,10 @@
     "lodash.get": "^4.4.2",
     "lodash.isequal": "^4.5.0",
     "lodash.throttle": "^4.1.1",
-    "mapbox-gl": "^1.9.0",
+    "mapbox-gl": "^1.9.1",
     "mapbox-gl-inspect": "^1.3.1",
     "maputnik-design": "github:maputnik/design#f7a2b4d",
-    "ol": "^6.2.1",
+    "ol": "^6.3.1",
     "ol-mapbox-style": "^6.0.1",
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
@@ -102,6 +103,11 @@
         "experimentalObjectRestSpread": true,
         "jsx": true
       }
+    },
+    "settings": {
+      "react": {
+        "version": "detect"
+      }
     }
   },
   "devDependencies": {
@@ -135,19 +141,19 @@
     "is-docker": "^2.0.0",
     "istanbul": "^0.4.5",
     "istanbul-lib-coverage": "^3.0.0",
-    "mkdirp": "^1.0.3",
+    "mkdirp": "^1.0.4",
     "mocha": "^7.0.1",
     "node-sass": "^4.13.1",
     "react-hot-loader": "^4.12.19",
     "sass-loader": "^8.0.2",
     "selenium-standalone": "^6.17.0",
     "style-loader": "^1.1.3",
-    "stylelint": "^13.2.0",
+    "stylelint": "^13.3.0",
     "stylelint-config-recommended-scss": "^4.2.0",
     "stylelint-scss": "^3.14.2",
     "svg-inline-loader": "^0.8.2",
     "transform-loader": "^0.2.4",
-    "uuid": "^7.0.2",
+    "uuid": "^7.0.3",
     "webdriverio": "^6.0.5",
     "webpack": "^4.41.6",
     "webpack-bundle-analyzer": "^3.6.0",

src/components/App.jsx

@@ -4,7 +4,7 @@ import cloneDeep from 'lodash.clonedeep'
 import clamp from 'lodash.clamp'
 import get from 'lodash.get'
 import {unset} from 'lodash'
-import {arrayMove} from 'react-sortable-hoc'
+import arrayMove from 'array-move'
 import url from 'url'
 
 import MapboxGlMap from './map/MapboxGlMap'
@@ -36,6 +36,7 @@ import tokens from '../config/tokens.json'
 import isEqual from 'lodash.isequal'
 import Debug from '../libs/debug'
 import queryUtil from '../libs/query-util'
+import {formatLayerId} from './util/format';
 
 import MapboxGl from 'mapbox-gl'
 
@@ -325,7 +326,42 @@ export default class App extends React.Component {
     };
 
     const errors = validate(newStyle, latest) || [];
-    const mappedErrors = errors.map(error => {
+
+    // The validate function doesn't give us errors for duplicate error with
+    // empty string for layer.id, manually deal with that here.
+    const layerErrors = [];
+    if (newStyle && newStyle.layers) {
+      const foundLayers = new Map();
+      newStyle.layers.forEach((layer, index) => {
+        if (layer.id === "" && foundLayers.has(layer.id)) {
+          const message = `Duplicate layer: ${formatLayerId(layer.id)}`;
+          const error = new Error(
+            `layers[${index}]: duplicate layer id [empty_string], previously used`
+          );
+          layerErrors.push(error);
+        }
+        foundLayers.set(layer.id, true);
+      });
+    }
+
+    const mappedErrors = layerErrors.concat(errors).map(error => {
+      const dupMatch = error.message.match(/layers\[(\d+)\]: (duplicate layer id "?(.*)"?, previously used)/);
+      if (dupMatch) {
+        const [matchStr, index, message] = dupMatch;
+        return {
+          message: error.message,
+          parsed: {
+            type: "layer",
+            data: {
+              index: parseInt(index, 10),
+              key: "id",
+              message,
+            }
+          }
+        }
+      }
+
+      // duplicate layer id
       const layerMatch = error.message.match(/layers\[(\d+)\]\.(?:(\S+)\.)?(\S+): (.*)/);
       if (layerMatch) {
         const [matchStr, index, group, property, message] = layerMatch;
@@ -335,7 +371,7 @@ export default class App extends React.Component {
           parsed: {
             type: "layer",
             data: {
-              index,
+              index: parseInt(index, 10),
               key,
               message
             }
@@ -347,7 +383,7 @@ export default class App extends React.Component {
           message: error.message,
         };
       }
-    })
+    });
 
     let dirtyMapStyle = undefined;
     if (errors.length > 0) {
@@ -437,56 +473,50 @@ export default class App extends React.Component {
     this.onStyleChanged(changedStyle)
   }
 
-  onLayerDestroy = (layerId) => {
+  onLayerDestroy = (index) => {
     let layers = this.state.mapStyle.layers;
     const remainingLayers = layers.slice(0);
-    const idx = style.indexOfLayer(remainingLayers, layerId)
+    remainingLayers.splice(index, 1);
-    remainingLayers.splice(idx, 1);
     this.onLayersChange(remainingLayers);
   }
 
-  onLayerCopy = (layerId) => {
+  onLayerCopy = (index) => {
     let layers = this.state.mapStyle.layers;
     const changedLayers = layers.slice(0)
-    const idx = style.indexOfLayer(changedLayers, layerId)
 
-    const clonedLayer = cloneDeep(changedLayers[idx])
+    const clonedLayer = cloneDeep(changedLayers[index])
     clonedLayer.id = clonedLayer.id + "-copy"
-    changedLayers.splice(idx, 0, clonedLayer)
+    changedLayers.splice(index, 0, clonedLayer)
     this.onLayersChange(changedLayers)
   }
 
-  onLayerVisibilityToggle = (layerId) => {
+  onLayerVisibilityToggle = (index) => {
     let layers = this.state.mapStyle.layers;
     const changedLayers = layers.slice(0)
-    const idx = style.indexOfLayer(changedLayers, layerId)
 
-    const layer = { ...changedLayers[idx] }
+    const layer = { ...changedLayers[index] }
     const changedLayout = 'layout' in layer ? {...layer.layout} : {}
     changedLayout.visibility = changedLayout.visibility === 'none' ? 'visible' : 'none'
 
     layer.layout = changedLayout
-    changedLayers[idx] = layer
+    changedLayers[index] = layer
     this.onLayersChange(changedLayers)
   }
 
 
-  onLayerIdChange = (oldId, newId) => {
+  onLayerIdChange = (index, oldId, newId) => {
     const changedLayers = this.state.mapStyle.layers.slice(0)
-    const idx = style.indexOfLayer(changedLayers, oldId)
+    changedLayers[index] = {
-
+      ...changedLayers[index],
-    changedLayers[idx] = {
-      ...changedLayers[idx],
       id: newId
     }
 
     this.onLayersChange(changedLayers)
   }
 
-  onLayerChanged = (layer) => {
+  onLayerChanged = (index, layer) => {
     const changedLayers = this.state.mapStyle.layers.slice(0)
-    const idx = style.indexOfLayer(changedLayers, layer.id)
+    changedLayers[index] = layer
-    changedLayers[idx] = layer
 
     this.onLayersChange(changedLayers)
   }
@@ -645,9 +675,8 @@ export default class App extends React.Component {
     </div>
   }
 
-  onLayerSelect = (layerId) => {
+  onLayerSelect = (index) => {
-    const idx = style.indexOfLayer(this.state.mapStyle.layers, layerId)
+    this.setState({ selectedLayerIndex: index })
-    this.setState({ selectedLayerIndex: idx })
   }
 
   setModal(modalName, value) {
@@ -735,6 +764,7 @@ export default class App extends React.Component {
 
     const bottomPanel = (this.state.errors.length + this.state.infos.length) > 0 ? <MessagePanel
       currentLayer={selectedLayer}
+      selectedLayerIndex={this.state.selectedLayerIndex}
       onLayerSelect={this.onLayerSelect}
       mapStyle={this.state.mapStyle}
       errors={this.state.errors}

src/components/AppLayout.jsx

@@ -26,9 +26,7 @@ class AppLayout extends React.Component {
     return <div className="maputnik-layout">
       {this.props.toolbar}
       <div className="maputnik-layout-list">
-        <ScrollContainer>
+        {this.props.layerList}
-          {this.props.layerList}
-        </ScrollContainer>
       </div>
       <div className="maputnik-layout-drawer">
         <ScrollContainer>

src/components/MessagePanel.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import {formatLayerId} from './util/format';
 
 class MessagePanel extends React.Component {
   static propTypes = {
@@ -8,6 +9,7 @@ class MessagePanel extends React.Component {
     mapStyle: PropTypes.object,
     onLayerSelect: PropTypes.func,
     currentLayer: PropTypes.object,
+    selectedLayerIndex: PropTypes.number,
   }
 
   static defaultProps = {
@@ -15,6 +17,7 @@ class MessagePanel extends React.Component {
   }
 
   render() {
+    const {selectedLayerIndex} = this.props;
     const errors = this.props.errors.map((error, idx) => {
       let content;
       if (error.parsed && error.parsed.type === "layer") {
@@ -23,13 +26,13 @@ class MessagePanel extends React.Component {
         const layerId = mapStyle.layers[parsed.data.index].id;
         content = (
           <>
-            Layer <span>&apos;{layerId}&apos;</span>: {parsed.data.message}
+            Layer <span>{formatLayerId(layerId)}</span>: {parsed.data.message}
-            {currentLayer.id !== layerId &&
+            {selectedLayerIndex !== parsed.data.index &&
               <>
                 &nbsp;&mdash;&nbsp;
                 <button
                   className="maputnik-message-panel__switch-button"
-                  onClick={() => this.props.onLayerSelect(layerId)}
+                  onClick={() => this.props.onLayerSelect(parsed.data.index)}
                 >
                   switch to layer
                 </button>

src/components/fields/DocLabel.jsx

@@ -9,8 +9,8 @@ export default class DocLabel extends React.Component {
       PropTypes.object,
       PropTypes.string
     ]).isRequired,
-    fieldSpec: PropTypes.object.isRequired,
+    fieldSpec: PropTypes.object,
-    onToggleDoc: PropTypes.func.isRequired,
+    onToggleDoc: PropTypes.func,
   }
 
   constructor (props) {

src/components/filter/FilterEditor.jsx

@@ -223,7 +223,7 @@ export default class CombiningFilterEditor extends React.Component {
         const error = errors[`filter[${idx+1}]`];
 
         return (
-          <>
+          <div key={`block-${idx}`}>
             <FilterEditorBlock key={idx} onDelete={this.deleteFilterItem.bind(this, idx)}>
               <SingleFilterEditor
                 properties={this.props.properties}
@@ -232,9 +232,9 @@ export default class CombiningFilterEditor extends React.Component {
               />
             </FilterEditorBlock>
             {error &&
-              <div className="maputnik-inline-error">{error.message}</div>
+              <div key="error" className="maputnik-inline-error">{error.message}</div>
             }
-          </>
+          </div>
         );
       })
 

src/components/inputs/NumberInput.jsx

@@ -31,7 +31,7 @@ class NumberInput extends React.Component {
   }
 
   static getDerivedStateFromProps(props, state) {
-    if (!state.editing) {
+    if (!state.editing && props.value !== state.value) {
       return {
         value: props.value,
         dirtyValue: props.value,
@@ -49,12 +49,17 @@ class NumberInput extends React.Component {
     if(this.isValid(value) && hasChanged) {
       this.props.onChange(value)
       this.setState({
-        dirtyValue: newValue,
+        value: newValue,
+      });
+    }
+    else if (!this.isValid(value) && hasChanged) {
+      this.setState({
+        value: undefined,
       });
     }
 
     this.setState({
-      value: newValue,
+      dirtyValue: newValue === "" ? undefined : newValue,
     })
   }
 
@@ -87,11 +92,13 @@ class NumberInput extends React.Component {
     }
 
     // If set value is invalid fall back to the last valid value from props or at last resort the default value
-    if(!this.isValid(this.state.value)) {
+    if (!this.isValid(this.state.value)) {
       if(this.isValid(this.props.value)) {
         this.changeValue(this.props.value)
+        this.setState({dirtyValue: this.props.value});
       } else {
         this.changeValue(undefined);
+        this.setState({dirtyValue: undefined});
       }
     }
   }
@@ -144,8 +151,15 @@ class NumberInput extends React.Component {
       this.props.min !== undefined && this.props.max !== undefined &&
       this.props.allowRange
     ) {
-      const dirtyValue = this.state.dirtyValue === undefined ? this.props.default : this.state.dirtyValue
+      const value = this.state.editing ? this.state.dirtyValue : this.state.value;
-      const value = this.state.value === undefined ? "" : this.state.value;
+      const defaultValue = this.props.default === undefined ? "" : this.props.default;
+      let inputValue;
+      if (this.state.editingRange) {
+        inputValue = this.state.value;
+      }
+      else {
+        inputValue = value;
+      }
 
       return <div className="maputnik-number-container">
         <input
@@ -156,21 +170,25 @@ class NumberInput extends React.Component {
           min={this.props.min}
           step="any"
           spellCheck="false"
-          value={dirtyValue}
+          value={value === undefined ? defaultValue : value}
           aria-hidden="true"
           onChange={this.onChangeRange}
           onKeyDown={() => {
             this._keyboardEvent = true;
           }}
           onPointerDown={() => {
-            this.setState({editing: true});
+            this.setState({editing: true, editingRange: true});
           }}
           onPointerUp={() => {
             // Safari doesn't get onBlur event
-            this.setState({editing: false});
+            this.setState({editing: false, editingRange: false});
           }}
           onBlur={() => {
-            this.setState({editing: false});
+            this.setState({
+              editing: false,
+              editingRange: false,
+              dirtyValue: this.state.value,
+            });
           }}
         />
         <input
@@ -179,25 +197,32 @@ class NumberInput extends React.Component {
           spellCheck="false"
           className="maputnik-number"
           placeholder={this.props.default}
-          value={value}
+          value={inputValue === undefined ? "" : inputValue}
-          onChange={e => {
+          onFocus={e => {
-            if (!this.state.editing) {
+            this.setState({editing: true});
-              this.changeValue(e.target.value);
+          }}
-            }
+          onChange={e => {
+            this.changeValue(e.target.value);
+          }}
+          onBlur={e => {
+            this.setState({editing: false});
+            this.resetValue()
           }}
-          onBlur={this.resetValue}
         />
       </div>
     }
     else {
-      const value = this.state.value === undefined ? "" : this.state.value;
+      const value = this.state.editing ? this.state.dirtyValue : this.state.value;
 
       return <input
         spellCheck="false"
         className="maputnik-number"
         placeholder={this.props.default}
-        value={value}
+        value={value === undefined ? "" : value}
         onChange={e => this.changeValue(e.target.value)}
+        onFocus={() => {
+          this.setState({editing: true});
+        }}
         onBlur={this.resetValue}
         required={this.props.required}
       />

src/components/inputs/StringInput.jsx

@@ -33,6 +33,7 @@ class StringInput extends React.Component {
         value: props.value
       };
     }
+    return {};
   }
 
   render() {
@@ -79,6 +80,11 @@ class StringInput extends React.Component {
           this.props.onChange(this.state.value);
         }
       },
+      onKeyDown: (e) => {
+        if (e.keyCode === 13) {
+          this.props.onChange(this.state.value);
+        }
+      },
       required: this.props.required,
     });
   }

src/components/layers/LayerEditor.jsx

@@ -19,6 +19,7 @@ import {MdMoreVert} from 'react-icons/md'
 
 import { changeType, changeProperty } from '../../libs/layer'
 import layout from '../../config/layout.json'
+import {formatLayerId} from '../util/format';
 
 
 function getLayoutForType (type) {
@@ -108,7 +109,10 @@ export default class LayerEditor extends React.Component {
   }
 
   changeProperty(group, property, newValue) {
-    this.props.onLayerChanged(changeProperty(this.props.layer, group, property, newValue))
+    this.props.onLayerChanged(
+      this.props.layerIndex,
+      changeProperty(this.props.layer, group, property, newValue)
+    )
   }
 
   onGroupToggle(groupTitle, active) {
@@ -152,13 +156,16 @@ export default class LayerEditor extends React.Component {
           value={this.props.layer.id}
           wdKey="layer-editor.layer-id"
           error={errorData.id}
-          onChange={newId => this.props.onLayerIdChange(this.props.layer.id, newId)}
+          onChange={newId => this.props.onLayerIdChange(this.props.layerIndex, this.props.layer.id, newId)}
         />
         <LayerTypeBlock
           disabled={true}
           error={errorData.type}
           value={this.props.layer.type}
-          onChange={newType => this.props.onLayerChanged(changeType(this.props.layer, newType))}
+          onChange={newType => this.props.onLayerChanged(
+            this.props.layerIndex,
+            changeType(this.props.layer, newType)
+          )}
         />
         {this.props.layer.type !== 'background' && <LayerSourceBlock
           error={errorData.sources}
@@ -210,7 +217,12 @@ export default class LayerEditor extends React.Component {
       />
       case 'jsoneditor': return <JSONEditor
         layer={this.props.layer}
-        onChange={this.props.onLayerChanged}
+        onChange={(layer) => {
+          this.props.onLayerChanged(
+            this.props.layerIndex,
+            layer
+          );
+        }}
       />
     }
   }
@@ -247,15 +259,15 @@ export default class LayerEditor extends React.Component {
     const items = {
       delete: {
         text: "Delete",
-        handler: () => this.props.onLayerDestroy(this.props.layer.id)
+        handler: () => this.props.onLayerDestroy(this.props.layerIndex)
       },
       duplicate: {
         text: "Duplicate",
-        handler: () => this.props.onLayerCopy(this.props.layer.id)
+        handler: () => this.props.onLayerCopy(this.props.layerIndex)
       },
       hide: {
         text: (layout.visibility === "none") ? "Show" : "Hide",
-        handler: () => this.props.onLayerVisibilityToggle(this.props.layer.id)
+        handler: () => this.props.onLayerVisibilityToggle(this.props.layerIndex)
       },
       moveLayerUp: {
         text: "Move layer up",
@@ -281,7 +293,7 @@ export default class LayerEditor extends React.Component {
       <header>
         <div className="layer-header">
           <h2 className="layer-header__title">
-            Layer: {this.props.layer.id}
+            Layer: {formatLayerId(this.props.layer.id)}
           </h2>
           <div className="layer-header__info">
             <Wrapper

src/components/layers/LayerIdBlock.jsx

@@ -10,11 +10,13 @@ class LayerIdBlock extends React.Component {
     value: PropTypes.string.isRequired,
     wdKey: PropTypes.string.isRequired,
     onChange: PropTypes.func.isRequired,
+    error: PropTypes.object,
   }
 
   render() {
     return <InputBlock label={"ID"} fieldSpec={latest.layer.id}
       data-wd-key={this.props.wdKey}
+      error={this.props.error}
     >
       <StringInput
         value={this.props.value}

src/components/layers/LayerList.jsx

@@ -42,11 +42,16 @@ class LayerListContainer extends React.Component {
     onLayerSelect: () => {},
   }
 
-  state = {
+  constructor(props) {
-    collapsedGroups: {},
+    super(props);
-    areAllGroupsExpanded: false,
+    this.selectedItemRef = React.createRef();
-    isOpen: {
+    this.scrollContainerRef = React.createRef();
-      add: false,
+    this.state = {
+      collapsedGroups: {},
+      areAllGroupsExpanded: false,
+      isOpen: {
+        add: false,
+      }
     }
   }
 
@@ -161,16 +166,40 @@ class LayerListContainer extends React.Component {
     return propsChanged;
   }
 
+  componentDidUpdate (prevProps) {
+    if (prevProps.selectedLayerIndex !== this.props.selectedLayerIndex) {
+      const selectedItemNode = this.selectedItemRef.current;
+      if (selectedItemNode && selectedItemNode.node) {
+        const target = selectedItemNode.node;
+        const options = {
+          root: this.scrollContainerRef.current,
+          threshold: 1.0
+        }
+        const observer = new IntersectionObserver(entries => {
+          observer.unobserve(target);
+          if (entries.length > 0 && entries[0].intersectionRatio < 1) {
+            target.scrollIntoView();
+          }
+        }, options);
+
+        observer.observe(target);
+      }
+    }
+  }
+
   render() {
 
     const listItems = []
     let idx = 0
-    this.groupedLayers().forEach(layers => {
+    const layerIdCount = new Map();
+
+    const layersByGroup = this.groupedLayers();
+    layersByGroup.forEach(layers => {
       const groupPrefix = layerPrefix(layers[0].id)
       if(layers.length > 1) {
         const grp = <LayerListGroup
           data-wd-key={[groupPrefix, idx].join('-')}
-          key={[groupPrefix, idx].join('-')}
+          key={`group-${groupPrefix}-${idx}`}
           title={groupPrefix}
           isActive={!this.isCollapsed(groupPrefix, idx) || idx === this.props.selectedLayerIndex}
           onActiveToggle={this.toggleLayerGroup.bind(this, groupPrefix, idx)}
@@ -189,6 +218,15 @@ class LayerListContainer extends React.Component {
           );
         });
 
+        const additionalProps = {};
+        if (idx === this.props.selectedLayerIndex) {
+          additionalProps.ref = this.selectedItemRef;
+        }
+
+        layerIdCount.set(layer.id,
+          layerIdCount.has(layer.id) ? layerIdCount.get(layer.id) + 1 : 0
+        );
+        const key = `${layer.id}-${layerIdCount.get(layer.id)}`;
         const listItem = <LayerListItem
           className={classnames({
             'maputnik-layer-list-item-collapsed': layers.length > 1 && this.isCollapsed(groupPrefix, groupIdx) && idx !== this.props.selectedLayerIndex,
@@ -196,8 +234,9 @@ class LayerListContainer extends React.Component {
             'maputnik-layer-list-item--error': !!layerError
           })}
           index={idx}
-          key={layer.id}
+          key={key}
           layerId={layer.id}
+          layerIndex={idx}
           layerType={layer.type}
           visibility={(layer.layout || {}).visibility}
           isSelected={idx === this.props.selectedLayerIndex}
@@ -205,13 +244,14 @@ class LayerListContainer extends React.Component {
           onLayerDestroy={this.props.onLayerDestroy.bind(this)}
           onLayerCopy={this.props.onLayerCopy.bind(this)}
           onLayerVisibilityToggle={this.props.onLayerVisibilityToggle.bind(this)}
+          {...additionalProps}
         />
         listItems.push(listItem)
         idx += 1
       })
     })
 
-    return <div className="maputnik-layer-list">
+    return <div className="maputnik-layer-list" ref={this.scrollContainerRef}>
       <AddModal
           layers={this.props.layers}
           sources={this.props.sources}

src/components/layers/LayerListItem.jsx

@@ -62,6 +62,7 @@ class IconAction extends React.Component {
 
 class LayerListItem extends React.Component {
   static propTypes = {
+    layerIndex: PropTypes.number.isRequired,
     layerId: PropTypes.string.isRequired,
     layerType: PropTypes.string.isRequired,
     isSelected: PropTypes.bool,
@@ -97,7 +98,7 @@ class LayerListItem extends React.Component {
 
     return <li
       key={this.props.layerId}
-      onClick={e => this.props.onLayerSelect(this.props.layerId)}
+      onClick={e => this.props.onLayerSelect(this.props.layerIndex)}
       data-wd-key={"layer-list-item:"+this.props.layerId}
       className={classnames({
         "maputnik-layer-list-item": true,
@@ -110,20 +111,20 @@ class LayerListItem extends React.Component {
           wdKey={"layer-list-item:"+this.props.layerId+":delete"}
           action={'delete'}
           classBlockName="delete"
-          onClick={e => this.props.onLayerDestroy(this.props.layerId)}
+          onClick={e => this.props.onLayerDestroy(this.props.layerIndex)}
         />
         <IconAction
           wdKey={"layer-list-item:"+this.props.layerId+":copy"}
           action={'duplicate'}
           classBlockName="duplicate"
-          onClick={e => this.props.onLayerCopy(this.props.layerId)}
+          onClick={e => this.props.onLayerCopy(this.props.layerIndex)}
         />
         <IconAction
           wdKey={"layer-list-item:"+this.props.layerId+":toggle-visibility"}
           action={visibilityAction}
           classBlockName="visibility"
           classBlockModifier={visibilityAction}
-          onClick={e => this.props.onLayerVisibilityToggle(this.props.layerId)}
+          onClick={e => this.props.onLayerVisibilityToggle(this.props.layerIndex)}
         />
     </li>
   }

src/components/map/FeatureLayerPopup.jsx

@@ -58,23 +58,8 @@ class FeatureLayerPopup extends React.Component {
 
       if(propName) {
         const propertySpec = latest["paint_"+feature.layer.type][propName];
-
         let color = feature.layer.paint[propName];
-
+        return String(color);
-        if(typeof(color) === "object") {
-          if(color.stops) {
-            color = styleFunction.convertFunction(color, propertySpec);
-          }
-
-          const exprResult = expression.createExpression(color, propertySpec);
-          const val = exprResult.value.evaluate({
-            zoom: zoom
-          }, feature);
-          return val.toString();
-        }
-        else {
-          return color;
-        }
       }
       else {
         // Default color
@@ -84,7 +69,7 @@ class FeatureLayerPopup extends React.Component {
     // This is quite complex, just incase there's an edgecase we're missing
     // always return black if we get an unexpected error.
     catch (err) {
-      console.error("Unable to get feature color, error:", err);
+      console.warn("Unable to get feature color, error:", err);
       return "black";
     }
   }

src/components/map/MapboxGlMap.jsx

@@ -170,7 +170,7 @@ export default class MapboxGlMap extends React.Component {
         if(this.props.inspectModeEnabled) {
           return renderPopup(<FeaturePropertyPopup features={features} />, tmpNode);
         } else {
-          return renderPopup(<FeatureLayerPopup features={features} onLayerSelect={this.props.onLayerSelect} zoom={this.state.zoom} />, tmpNode);
+          return renderPopup(<FeatureLayerPopup features={features} onLayerSelect={this.onLayerSelectById} zoom={this.state.zoom} />, tmpNode);
         }
       }
     })
@@ -208,6 +208,11 @@ export default class MapboxGlMap extends React.Component {
     map.on("zoomend", mapViewChange);
   }
 
+  onLayerSelectById = (id) => {
+    const index = this.props.mapStyle.layers.findIndex(layer => layer.id === id);
+    this.props.onLayerSelect(index);
+  }
+
   render() {
     if(IS_SUPPORTED) {
       return <div

src/components/util/format.js

@@ -0,0 +1,3 @@
+export function formatLayerId (id) {
+  return id === "" ? "[empty_string]" : `'${id}'`;
+}

src/styles/_layer.scss

@@ -1,5 +1,8 @@
 // LAYER LIST
 .maputnik-layer-list {
+  height: 100%;
+  overflow: auto;
+
   &-header {
     padding: $margin-2 $margin-2 $margin-3;