Merge remote-tracking branch 'upstream/master' into feature/webpack-bundle-analyzer

Conflicts:
	config/webpack.production.config.js

.travis.yml

@@ -3,24 +3,24 @@ addons:
   firefox: latest
 matrix:
   include:
-    - os: linux
-      node_js: "4"
-    - os: linux
-      env: CXX=g++-4.8
-      node_js: "5"
     - os: linux
       node_js: "6"
     - os: linux
       env: CXX=g++-4.8
       node_js: "7"
-    - os: osx
+    - os: linux
-      node_js: "4"
+      node_js: "8"
-    - os: osx
+    - os: linux
-      node_js: "5"
+      env: CXX=g++-4.8
+      node_js: "9"
     - os: osx
       node_js: "6"
     - os: osx
       node_js: "7"
+    - os: osx
+      node_js: "8"
+    - os: osx
+      node_js: "9"
 before_install:
   - export CHROME_BIN=chromium-browser
   - export DISPLAY=:99.0

README.md

@@ -1,11 +1,23 @@
-# Maputnik [![Build Status](https://travis-ci.org/maputnik/editor.svg?branch=master)](https://travis-ci.org/maputnik/editor) [![Windows Build Status](https://ci.appveyor.com/api/projects/status/anelbgv6jdb3qnh9/branch/master?svg=true)](https://ci.appveyor.com/project/lukasmartinelli/editor) [![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://tldrlegal.com/license/mit-license)
+# Maputnik
+
+[![Build Status](https://travis-ci.org/maputnik/editor.svg?branch=master)][travis]
+[![Windows Build Status](https://ci.appveyor.com/api/projects/status/anelbgv6jdb3qnh9/branch/master?svg=true)][appveyor]
+[![Dependency Status](https://david-dm.org/maputnik/editor.svg)][dm-prod]
+[![Dev Dependency Status](https://david-dm.org/maputnik/editor/dev-status.svg)][dm-dev]
+[![License](https://img.shields.io/badge/license-MIT-blue.svg)][license]
+
+[travis]:      https://travis-ci.org/maputnik/editor
+[appveyor]:    https://ci.appveyor.com/project/lukasmartinelli/editor
+[dm-prod]:     https://david-dm.org/maputnik/editor
+[dm-dev]:      https://david-dm.org/maputnik/editor#info=devDependencies
+[license]:     https://tldrlegal.com/license/mit-license
 
 <img width="200" align="right" alt="Maputnik" src="src/img/maputnik.png" />
 
 A free and open visual editor for the [Mapbox GL styles](https://www.mapbox.com/mapbox-gl-style-spec/)
 targeted at developers and map designers.
 
-- :link: Design your maps online at **http://maputnik.com/editor/** (all in local storage)
+- :link: Design your maps online at **<https://maputnik.github.io/editor/>** (all in local storage)
 - :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 independance is an OSS map designer.
@@ -37,7 +49,12 @@ npm install
 npm start
 ```
 
-Build a production package for distribution.
+The build process will watch for changes to the filesystem, rebuild and autoreload the editor. However note this from the webpack-dev-server docs
+
+> webpack uses the file system to get notified of file changes. In some cases this does not work. For example, when using Network File System (NFS). Vagrant also has a lot of problems with this. 
+Snippet from <https://webpack.js.org/configuration/dev-server/#devserver-watchoptions->
+
+To enable polling add `export WEBPACK_DEV_SERVER_POLLING=1` to your enviroment.
 
 ```
 npm run build

appveyor.yml

@@ -1,8 +1,9 @@
 environment:
   matrix:
-    - nodejs_version: "4"
     - nodejs_version: "6"
     - nodejs_version: "7"
+    - nodejs_version: "8"
+    - nodejs_version: "9"
 platform:
   - x86
   - x64

config/wdio.conf.js

@@ -1,6 +1,6 @@
 var webpack          = require("webpack");
 var WebpackDevServer = require("webpack-dev-server");
-var webpackConfig    = require("./webpack.config");
+var webpackConfig    = require("./webpack.production.config");
 var testConfig       = require("../test/config/specs");
 
 
@@ -18,7 +18,7 @@ exports.config = {
     browserName: 'firefox'
   }],
   sync: true,
-  logLevel: 'silent',
+  logLevel: 'verbose',
   coloredLogs: true,
   bail: 0,
   screenshotPath: './errorShots/',
@@ -29,6 +29,9 @@ exports.config = {
   services: ['phantomjs'],
   framework: 'mocha',
   reporters: ['spec'],
+  phantomjsOpts: {
+    webdriverLogfile: 'phantomjs.log'
+  },
   mochaOpts: {
     ui: 'bdd',
     // Because we don't know how long the initial build will take...
@@ -36,9 +39,7 @@ exports.config = {
   },
   onPrepare: function (config, capabilities) {
     var compiler = webpack(webpackConfig);
-    server = new WebpackDevServer(compiler, {
+    server = new WebpackDevServer(compiler, {});
-      stats: "minimal"
-    });
     server.listen(testConfig.port);
   },
   onComplete: function(exitCode) {

config/webpack.config.js

@@ -45,7 +45,13 @@ module.exports = {
     // serve index.html in place of 404 responses to allow HTML5 history
     historyApiFallback: true,
     port: PORT,
-    host: HOST
+    host: HOST,
+    watchOptions: {
+      // Disabled polling by default as it causes lots of CPU usage and hence drains laptop batteries. To enable polling add WEBPACK_DEV_SERVER_POLLING to your environment
+      // See <https://webpack.js.org/configuration/watch/#watchoptions-poll> for details
+      poll: (!!process.env.WEBPACK_DEV_SERVER_POLLING ? true : false),
+      watch: false
+    }
   },
   plugins: [
     new webpack.NoEmitOnErrorsPlugin(),

config/webpack.production.config.js

@@ -59,7 +59,7 @@ module.exports = {
     tls: 'empty'
   },
   plugins: [
-    new webpack.NoErrorsPlugin(),
+    new webpack.NoEmitOnErrorsPlugin(),
     new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: '[chunkhash].vendor.js' }),
     new WebpackCleanupPlugin(),
     new webpack.DefinePlugin({
@@ -80,7 +80,6 @@ module.exports = {
       template: './src/template.html',
       title: 'Maputnik'
     }),
-    new webpack.optimize.DedupePlugin(),
     new BundleAnalyzerPlugin({
       analyzerMode: 'static',
       defaultSizes: 'gzip',
@@ -88,6 +87,6 @@ module.exports = {
       generateStatsFile: true,
       reportFilename: 'bundle-stats.html',
       statsFilename: 'bundle-stats.json',
-    }),
+    })
   ]
 };

package.json

@@ -8,7 +8,7 @@
     "build": "webpack --config config/webpack.production.config.js --progress --profile --colors",
     "test": "wdio config/wdio.conf.js",
     "test-watch": "wdio config/wdio.conf.js --watch",
-    "start": "webpack-dev-server --progress --profile --colors --watch-poll --config config/webpack.config.js",
+    "start": "webpack-dev-server --progress --profile --colors --config config/webpack.config.js",
     "lint": "eslint --ext js --ext jsx {src,test}",
     "lint-styles": "stylelint 'src/styles/*.scss'"
   },
@@ -39,14 +39,14 @@
     "ol-mapbox-style": "^1.0.1",
     "openlayers": "^4.4.2",
     "prop-types": "^15.6.0",
-    "react": "^16.0.0",
+    "react": "16.0.0",
     "react-addons-pure-render-mixin": "^15.6.2",
     "react-autocomplete": "^1.7.2",
     "react-codemirror": "^1.0.0",
     "react-collapse": "^4.0.3",
     "react-color": "^2.13.8",
     "react-copy-to-clipboard": "^5.0.1",
-    "react-dom": "^16.0.0",
+    "react-dom": "16.0.0",
     "react-file-reader-input": "^1.1.4",
     "react-height": "^3.0.0",
     "react-icon-base": "^2.1.1",
@@ -67,7 +67,7 @@
     "plugins": [
       "react"
     ],
-    "extend": [
+    "extends": [
       "plugin:react/recommended"
     ],
     "env": {

src/components/Button.jsx

@@ -7,6 +7,7 @@ class Button extends React.Component {
     onClick: PropTypes.func,
     style: PropTypes.object,
     className: PropTypes.string,
+    children: PropTypes.node
   }
 
   render() {

src/components/MessagePanel.jsx

@@ -9,11 +9,11 @@ class MessagePanel extends React.Component {
 
   render() {
     const errors = this.props.errors.map((m, i) => {
-      return <p className="maputnik-message-panel-error">{m}</p>
+      return <p key={"error-"+i} className="maputnik-message-panel-error">{m}</p>
     })
 
     const infos = this.props.infos.map((m, i) => {
-      return <p key={i}>{m}</p>
+      return <p key={"info-"+i}>{m}</p>
     })
 
     return <div className="maputnik-message-panel">

src/components/ScrollContainer.jsx

@@ -1,9 +1,16 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
-const ScrollContainer = (props) => {
+class ScrollContainer extends React.Component {
-  return <div className="maputnik-scroll-container">
+  static propTypes = {
-    {props.children}
+    children: PropTypes.node
-  </div>
+  }
+
+  render() {
+    return <div className="maputnik-scroll-container">
+      {this.props.children}
+    </div>
+  }
 }
 
 export default ScrollContainer

src/components/Toolbar.jsx

@@ -25,27 +25,49 @@ import OpenModal from './modals/OpenModal'
 
 import style from '../libs/style'
 
-function IconText(props) {
+class IconText extends React.Component {
-  return <span className="maputnik-icon-text">{props.children}</span>
+  static propTypes = {
+    children: PropTypes.node,
+  }
+
+  render() {
+    return <span className="maputnik-icon-text">{this.props.children}</span>
+  }
 }
 
-function ToolbarLink(props) {
+class ToolbarLink extends React.Component {
-  return <a
+  static propTypes = {
-    className={classnames('maputnik-toolbar-link', props.className)}
+    className: PropTypes.string,
-    href={props.href}
+    children: PropTypes.node,
-    target={"blank"}
+    href: PropTypes.string,
-  >
+  }
-    {props.children}
+
-  </a>
+  render() {
+    return <a
+      className={classnames('maputnik-toolbar-link', this.props.className)}
+      href={this.props.href}
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      {this.props.children}
+    </a>
+  }
 }
 
-function ToolbarAction(props) {
+class ToolbarAction extends React.Component {
-  return <a
+  static propTypes = {
-    className='maputnik-toolbar-action'
+    children: PropTypes.node,
-    onClick={props.onClick}
+    onClick: PropTypes.func
-  >
+  }
-    {props.children}
+
-  </a>
+  render() {
+    return <a
+      className='maputnik-toolbar-action'
+      onClick={this.props.onClick}
+    >
+      {this.props.children}
+    </a>
+  }
 }
 
 export default class Toolbar extends React.Component {
@@ -57,7 +79,8 @@ export default class Toolbar extends React.Component {
     onStyleOpen: PropTypes.func.isRequired,
     // A dict of source id's and the available source layers
     sources: PropTypes.object.isRequired,
-    onInspectModeToggle: PropTypes.func.isRequired
+    onInspectModeToggle: PropTypes.func.isRequired,
+    children: PropTypes.node
   }
 
   constructor(props) {
@@ -107,40 +130,44 @@ export default class Toolbar extends React.Component {
           isOpen={this.state.isOpen.sources}
           onOpenToggle={this.toggleModal.bind(this, 'sources')}
       />
-      <ToolbarLink
+      <div className="maputnik-toolbar__inner">
-        href={"https://github.com/maputnik/editor"}
+        <ToolbarLink
-        className="maputnik-toolbar-logo"
+          href={"https://github.com/maputnik/editor"}
-      >
+          className="maputnik-toolbar-logo"
-        <img src={logoImage} alt="Maputnik" />
+        >
-        <h1>Maputnik</h1>
+          <img src={logoImage} alt="Maputnik" />
-      </ToolbarLink>
+          <h1>Maputnik</h1>
-      <ToolbarAction onClick={this.toggleModal.bind(this, 'open')}>
+        </ToolbarLink>
-        <OpenIcon />
+        <div className="maputnik-toolbar__actions">
-        <IconText>Open</IconText>
+          <ToolbarAction onClick={this.toggleModal.bind(this, 'open')}>
-      </ToolbarAction>
+            <OpenIcon />
-      <ToolbarAction onClick={this.toggleModal.bind(this, 'export')}>
+            <IconText>Open</IconText>
-        <MdFileDownload />
+          </ToolbarAction>
-        <IconText>Export</IconText>
+          <ToolbarAction onClick={this.toggleModal.bind(this, 'export')}>
-      </ToolbarAction>
+            <MdFileDownload />
-      <ToolbarAction onClick={this.toggleModal.bind(this, 'sources')}>
+            <IconText>Export</IconText>
-        <SourcesIcon />
+          </ToolbarAction>
-        <IconText>Sources</IconText>
+          <ToolbarAction onClick={this.toggleModal.bind(this, 'sources')}>
-      </ToolbarAction>
+            <SourcesIcon />
-      <ToolbarAction onClick={this.toggleModal.bind(this, 'settings')}>
+            <IconText>Sources</IconText>
-        <SettingsIcon />
+          </ToolbarAction>
-        <IconText>Style Settings</IconText>
+          <ToolbarAction onClick={this.toggleModal.bind(this, 'settings')}>
-      </ToolbarAction>
+            <SettingsIcon />
-      <ToolbarAction onClick={this.props.onInspectModeToggle}>
+            <IconText>Style Settings</IconText>
-        <InspectionIcon />
+          </ToolbarAction>
-        <IconText>
+          <ToolbarAction onClick={this.props.onInspectModeToggle}>
-          { this.props.inspectModeEnabled && <span>Map Mode</span> }
+            <InspectionIcon />
-          { !this.props.inspectModeEnabled && <span>Inspect Mode</span> }
+            <IconText>
-        </IconText>
+              { this.props.inspectModeEnabled && <span>Map Mode</span> }
-      </ToolbarAction>
+              { !this.props.inspectModeEnabled && <span>Inspect Mode</span> }
-      <ToolbarLink href={"https://github.com/maputnik/editor/wiki"}>
+            </IconText>
-        <HelpIcon />
+          </ToolbarAction>
-        <IconText>Help</IconText>
+          <ToolbarLink href={"https://github.com/maputnik/editor/wiki"}>
-      </ToolbarLink>
+            <HelpIcon />
+            <IconText>Help</IconText>
+          </ToolbarLink>
+        </div>
+      </div>
     </div>
   }
 }

src/components/fields/ColorField.jsx

@@ -30,7 +30,7 @@ class ColorField extends React.Component {
   //but I am too stupid to get it to work together with fixed position
   //and scrollbars so I have to fallback to JavaScript
   calcPickerOffset() {
-    const elem = this.refs.colorInput
+    const elem = this.colorInput
     if(elem) {
       const pos = elem.getBoundingClientRect()
       return {
@@ -99,7 +99,7 @@ class ColorField extends React.Component {
       <div className="maputnik-color-swatch" style={swatchStyle}></div>
       <input
         className="maputnik-color"
-        ref="colorInput"
+        ref={(input) => this.colorInput = input}
         onClick={this.togglePicker.bind(this)}
         style={this.props.style}
         name={this.props.name}

src/components/fields/FunctionSpecField.jsx

@@ -90,6 +90,16 @@ export default class FunctionSpecProperty  extends React.Component {
     this.props.onChange(this.props.fieldName, zoomFunc)
   }
 
+  getFieldFunctionType(fieldSpec) {
+    if (fieldSpec.function === "interpolated") {
+      return "exponential"
+    }
+    if (fieldSpec.type === "number") {
+      return "interval"
+    }
+    return "categorical"
+  }
+
   getDataFunctionTypes(functionType) {
     if (functionType === "interpolated") {
       return ["categorical", "interval", "exponential"]
@@ -132,6 +142,9 @@ export default class FunctionSpecProperty  extends React.Component {
   }
 
   renderDataProperty() {
+    if (typeof this.props.value.type === "undefined") {
+      this.props.value.type = this.getFieldFunctionType(this.props.fieldSpec)
+    }
     const dataFields = this.props.value.stops.map((stop, idx) => {
       const zoomLevel = stop[0].zoom
       const dataLevel = stop[0].value
@@ -302,49 +315,63 @@ export default class FunctionSpecProperty  extends React.Component {
   }
 }
 
-function MakeFunctionButtons(props) {
+class MakeFunctionButtons extends React.Component {
-  let makeZoomButton, makeDataButton
+  static propTypes = {
-  if (props.fieldSpec['zoom-function']) {
+    fieldSpec: PropTypes.object,
-    makeZoomButton = <Button
+    onZoomClick: PropTypes.func,
-      className="maputnik-make-zoom-function"
+    onDataClick: PropTypes.func,
-      onClick={props.onZoomClick}
+  }
-    >
-      <DocLabel
-        label={<FunctionIcon />}
-        cursorTargetStyle={{ cursor: 'pointer' }}
-        doc={"Turn property into a zoom function to enable a map feature to change with map's zoom level."}
-      />
-    </Button>
 
-    if (props.fieldSpec['property-function'] && ['piecewise-constant', 'interpolated'].indexOf(props.fieldSpec['function']) !== -1) {
+  render() {
-      makeDataButton = <Button
+    let makeZoomButton, makeDataButton
-        className="maputnik-make-data-function"
+    if (this.props.fieldSpec['zoom-function']) {
-        onClick={props.onDataClick}
+      makeZoomButton = <Button
+        className="maputnik-make-zoom-function"
+        onClick={this.props.onZoomClick}
       >
         <DocLabel
-          label={<MdInsertChart />}
+          label={<FunctionIcon />}
           cursorTargetStyle={{ cursor: 'pointer' }}
-          doc={"Turn property into a data function to enable a map feature to change according to data properties and the map's zoom level."}
+          doc={"Turn property into a zoom function to enable a map feature to change with map's zoom level."}
         />
       </Button>
+
+      if (this.props.fieldSpec['property-function'] && ['piecewise-constant', 'interpolated'].indexOf(this.props.fieldSpec['function']) !== -1) {
+        makeDataButton = <Button
+          className="maputnik-make-data-function"
+          onClick={this.props.onDataClick}
+        >
+          <DocLabel
+            label={<MdInsertChart />}
+            cursorTargetStyle={{ cursor: 'pointer' }}
+            doc={"Turn property into a data function to enable a map feature to change according to data properties and the map's zoom level."}
+          />
+        </Button>
+      }
+      return <div>{makeDataButton}{makeZoomButton}</div>
+    }
+    else {
+      return null
     }
-    return <div>{makeDataButton}{makeZoomButton}</div>
-  }
-  else {
-    return null
   }
 }
 
-function DeleteStopButton(props) {
+class DeleteStopButton extends React.Component {
-  return <Button
+  static propTypes = {
-    className="maputnik-delete-stop"
+    onClick: PropTypes.func,
-    onClick={props.onClick}
+  }
-  >
+
-    <DocLabel
+  render() {
-      label={<DeleteIcon />}
+    return <Button
-      doc={"Remove zoom level stop."}
+      className="maputnik-delete-stop"
-    />
+      onClick={this.props.onClick}
-  </Button>
+    >
+      <DocLabel
+        label={<DeleteIcon />}
+        doc={"Remove zoom level stop."}
+      />
+    </Button>
+  }
 }
 
 function labelFromFieldName(fieldName) {

src/components/inputs/AutocompleteInput.jsx

@@ -17,7 +17,7 @@ class AutocompleteInput extends React.Component {
   }
 
   render() {
-    const AutocompleteMenu = (items, value, style) => <div className={"maputnik-autocomplete-menu"} children={items} />
+    const AutocompleteMenu = (items, value, style) => <div className={"maputnik-autocomplete-menu"}>{items}</div>
 
     return <Autocomplete
       wrapperProps={{

src/components/inputs/DynamicArrayInput.jsx

@@ -13,6 +13,7 @@ class DynamicArrayInput extends React.Component {
     type: PropTypes.string,
     default: PropTypes.array,
     onChange: PropTypes.func,
+    style: PropTypes.object,
   }
 
   changeValue(idx, newValue) {
@@ -84,10 +85,15 @@ class DynamicArrayInput extends React.Component {
   }
 }
 
-function DeleteValueButton(props) {
+class DeleteValueButton extends React.Component {
+  static propTypes = {
+    onClick: PropTypes.func,
+  }
+
+  render() {
     return <Button
       className="maputnik-delete-stop"
-      onClick={props.onClick}
+      onClick={this.props.onClick}
     >
       <DocLabel
         label={<DeleteIcon />}
@@ -95,5 +101,6 @@ function DeleteValueButton(props) {
       />
     </Button>
   }
+}
 
 export default DynamicArrayInput

src/components/inputs/FontInput.jsx

@@ -5,6 +5,7 @@ import AutocompleteInput from './AutocompleteInput'
 class FontInput extends React.Component {
   static propTypes = {
     value: PropTypes.array.isRequired,
+    default: PropTypes.array,
     fonts: PropTypes.array,
     style: PropTypes.object,
     onChange: PropTypes.func.isRequired,

src/components/inputs/InputBlock.jsx

@@ -14,6 +14,7 @@ class InputBlock extends React.Component {
     action: PropTypes.element,
     children: PropTypes.element.isRequired,
     style: PropTypes.object,
+    onChange: PropTypes.func,
   }
 
   onChange(e) {

src/components/inputs/StringInput.jsx

@@ -7,6 +7,7 @@ class StringInput extends React.Component {
     style: PropTypes.object,
     default: PropTypes.string,
     onChange: PropTypes.func,
+    multi: PropTypes.bool,
   }
 
   constructor(props) {

src/components/map/FeatureLayerPopup.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
 import LayerIcon from '../icons/LayerIcon'
@@ -14,6 +15,10 @@ function groupFeaturesBySourceLayer(features) {
 }
 
 class FeatureLayerPopup extends React.Component {
+  static propTypes = {
+    features: PropTypes.array
+  }
+
   render() {
     const sources = groupFeaturesBySourceLayer(this.props.features)
 

src/components/map/FeaturePropertyPopup.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
 
@@ -31,6 +32,9 @@ function renderFeature(feature) {
 }
 
 class FeaturePropertyPopup extends React.Component {
+  static propTypes = {
+    features: PropTypes.array
+  }
 
   render() {
     const features = this.props.features

src/components/map/MapboxGlMap.jsx

@@ -9,6 +9,7 @@ import style from '../../libs/style.js'
 import tokens from '../../config/tokens.json'
 import colors from 'mapbox-gl-inspect/lib/colors'
 import Color from 'color'
+import ZoomControl from '../../libs/zoomcontrol'
 import { colorHighlightedLayer } from '../../libs/highlight'
 import 'mapbox-gl/dist/mapbox-gl.css'
 import '../../mapboxgl.css'
@@ -110,6 +111,9 @@ export default class MapboxGlMap extends React.Component {
       hash: true,
     })
 
+    const zoom = new ZoomControl;
+    map.addControl(zoom, 'top-right');
+
     const nav = new MapboxGl.NavigationControl();
     map.addControl(nav, 'top-right');
 

src/components/map/OpenLayers3Map.jsx

@@ -69,6 +69,7 @@ class OpenLayers3Map extends React.Component {
     onDataChange: PropTypes.func,
     mapStyle: PropTypes.object.isRequired,
     accessToken: PropTypes.string,
+    style: PropTypes.object,
   }
 
   static defaultProps = {

src/components/modals/ExportModal.jsx

@@ -127,7 +127,7 @@ class Gist extends React.Component {
     const user = gist.user || 'anonymous';
     const preview = !!gist.files['index.html'];
     if(preview) {
-      return <span><a target="_blank" href={"https://bl.ocks.org/"+user+"/"+gist.id}>Preview</a>,{' '}</span>
+      return <span><a target="_blank" rel="noopener noreferrer" href={"https://bl.ocks.org/"+user+"/"+gist.id}>Preview</a>,{' '}</span>
     }
     return null;
   }
@@ -145,7 +145,7 @@ class Gist extends React.Component {
         <p>
           Latest saved gist:{' '}
           {this.renderPreviewLink(this)}
-          <a target="_blank" href={"https://gist.github.com/" + user + "/" + gist.id}>Source</a>
+          <a target="_blank" rel="noopener noreferrer" href={"https://gist.github.com/" + user + "/" + gist.id}>Source</a>
         </p>
         <p>
           <CopyToClipboard text={maputnikStyleLink}>
@@ -178,7 +178,7 @@ class Gist extends React.Component {
                   value={(this.props.mapStyle.metadata || {})['maputnik:openmaptiles_access_token']}
                   onChange={this.changeMetadataProperty.bind(this, "maputnik:openmaptiles_access_token")}/>
             </InputBlock>
-            <a target="_blank" href="https://openmaptiles.com/hosting/">Get your free access token</a>
+            <a target="_blank" rel="noopener noreferrer" href="https://openmaptiles.com/hosting/">Get your free access token</a>
           </div>
       : null}
       {this.renderLatestGist()}

src/components/modals/Modal.jsx

@@ -8,6 +8,7 @@ class Modal extends React.Component {
     isOpen: PropTypes.bool.isRequired,
     title: PropTypes.string.isRequired,
     onOpenToggle: PropTypes.func.isRequired,
+    children: PropTypes.node,
   }
 
   render() {

src/components/modals/OpenModal.jsx

@@ -77,7 +77,7 @@ class OpenModal extends React.Component {
   }
 
   onOpenUrl() {
-    const url = this.refs.styleUrl.value;
+    const url = this.styleUrlElement.value;
     this.onStyleSelect(url);
   }
 
@@ -151,7 +151,7 @@ class OpenModal extends React.Component {
         <p>
           Load from a URL. Note that the URL must have <a href="https://enable-cors.org" target="_blank" rel="noopener noreferrer">CORS enabled</a>.
         </p>
-        <input type="text" ref="styleUrl" className="maputnik-input" placeholder="Enter URL..."/>
+        <input type="text" ref={(input) => this.styleUrlElement = input} className="maputnik-input" placeholder="Enter URL..."/>
         <div>
           <Button className="maputnik-big-button" onClick={this.onOpenUrl.bind(this)}>Open URL</Button>
         </div>

src/components/modals/SourcesModal.jsx

@@ -139,7 +139,7 @@ class AddSource extends React.Component {
           onChange={v => this.setState({ sourceId: v})}
         />
       </InputBlock>
-      <InputBlock label={"Source Type"} doc={styleSpec.latest.source_tile.type.doc}>
+      <InputBlock label={"Source Type"} doc={styleSpec.latest.source_vector.type.doc}>
         <SelectInput
           options={[
             ['geojson', 'GeoJSON'],

src/components/sources/SourceTypeEditor.jsx

@@ -12,7 +12,7 @@ class TileJSONSourceEditor extends React.Component {
   }
 
   render() {
-    return <InputBlock label={"TileJSON URL"} doc={styleSpec.latest.source_tile.url.doc}>
+    return <InputBlock label={"TileJSON URL"} doc={styleSpec.latest.source_vector.url.doc}>
       <StringInput
         value={this.props.source.url}
         onChange={url => this.props.onChange({
@@ -43,7 +43,7 @@ class TileURLSourceEditor extends React.Component {
     const prefix = ['1st', '2nd', '3rd', '4th', '5th', '6th', '7th']
     const tiles = this.props.source.tiles || []
     return tiles.map((tileUrl, tileIndex) => {
-      return <InputBlock key={tileIndex} label={prefix[tileIndex] + " Tile URL"} doc={styleSpec.latest.source_tile.tiles.doc}>
+      return <InputBlock key={tileIndex} label={prefix[tileIndex] + " Tile URL"} doc={styleSpec.latest.source_vector.tiles.doc}>
         <StringInput
           value={tileUrl}
           onChange={this.changeTileUrl.bind(this, tileIndex)}
@@ -55,7 +55,7 @@ class TileURLSourceEditor extends React.Component {
   render() {
     return <div>
       {this.renderTileUrls()}
-      <InputBlock label={"Min Zoom"} doc={styleSpec.latest.source_tile.minzoom.doc}>
+      <InputBlock label={"Min Zoom"} doc={styleSpec.latest.source_vector.minzoom.doc}>
         <NumberInput
           value={this.props.source.minzoom || 0}
           onChange={minzoom => this.props.onChange({
@@ -64,7 +64,7 @@ class TileURLSourceEditor extends React.Component {
           })}
         />
       </InputBlock>
-      <InputBlock label={"Max Zoom"} doc={styleSpec.latest.source_tile.maxzoom.doc}>
+      <InputBlock label={"Max Zoom"} doc={styleSpec.latest.source_vector.maxzoom.doc}>
         <NumberInput
           value={this.props.source.maxzoom || 22}
           onChange={maxzoom => this.props.onChange({

src/libs/zoomcontrol.js

@@ -0,0 +1,26 @@
+export default class ZoomControl {
+  onAdd(map) {
+    this._map = map;
+    this._container = document.createElement('div');
+    this._container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group mapboxgl-ctrl-zoom';
+    
+    this.addEventListeners();
+    
+    return this._container;
+  }
+  
+  updateZoomLevel() {
+    this._container.innerHTML = `Zoom level: ${this._map.getZoom().toFixed(2)}`;
+  }
+  
+  addEventListeners (){
+    this._map.on('render', this.updateZoomLevel.bind(this) );
+    this._map.on('zoomIn', this.updateZoomLevel.bind(this) );
+    this._map.on('zoomOut', this.updateZoomLevel.bind(this) );
+  }
+
+  onRemove() {
+    this._container.parentNode.removeChild(this._container);
+    this._map = undefined;
+  }
+}

src/mapboxgl.css

@@ -25,6 +25,13 @@
   color: white;
 }
 
+.mapboxgl-ctrl-zoom {
+  color: rgb(138, 138, 138);
+  font-weight: bold;
+  padding: 4px 8px;
+  user-select: none;
+}
+
 .mapboxgl-ctrl-group {
   background: rgb(28, 31, 36);
 }

src/styles/_components.scss

@@ -35,6 +35,7 @@
     left: 0;
     width: 120px;
     z-index: 10;
+    pointer-events: none;
   }
 }
 

src/styles/_scrollbar.scss

@@ -1,12 +1,15 @@
-::-webkit-scrollbar {
+// HACK: ::webkit-scrollbar selector covers to much of the UI. Bigger changes to come so for now just use :not() to ignore the toolbar
-  background-color: #26282e;
+div:not(.maputnik-toolbar__actions) {
-  width: 5px;
+  &::-webkit-scrollbar {
-}
+    background-color: #26282e;
+    width: 5px;
+  }
 
-::-webkit-scrollbar-thumb {
+  &::-webkit-scrollbar-thumb {
-  border-radius: 6px;
+    border-radius: 6px;
-  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-  background-color: #666;
+    background-color: #666;
-  padding-left: 2px;
+    padding-left: 2px;
-  padding-right: 2px;
+    padding-right: 2px;
+  }
 }

src/styles/_toolbar.scss

@@ -54,3 +54,17 @@
   display: inline;
   margin-left: $margin-1;
 }
+
+.maputnik-toolbar-logo {
+  flex: 0 0 140px;
+}
+
+.maputnik-toolbar__inner {
+  display: flex;
+}
+
+.maputnik-toolbar__actions {
+  white-space: nowrap;
+  flex: 1;
+  overflow-y: auto;
+}