deploy: 00b20af1d9

I believe this solves most of the missing checkboxes:
- https://github.com/maplibre/maplibre/issues/352

Let me know if there's anything else missing.
Other configuration can be done after the repo has been migrated I
believe.

.editorconfig

@@ -1,14 +0,0 @@
-root = true
-
-# Unix-style newlines with a newline ending every file
-[*]
-end_of_line = lf
-insert_final_newline = true
-
-# Matches multiple files with brace expansion notation
-# Set default charset
-[*.{js,jsx,html,sass}]
-charset = utf-8
-indent_style = space
-indent_size = 2
-trim_trailing_whitespace = true

.gitignore

@@ -1,30 +0,0 @@
-# Logs
-logs
-*.log
-
-# Runtime data
-pids
-*.pid
-*.seed
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (http://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directory
-# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
-node_modules
-
-# Ignore build files
-public

.travis.yml

@@ -1,21 +0,0 @@
-language: node_js
-addons:
-  firefox: latest
-os:
-  - linux
-  - osx
-node_js:
-  - "4.6"
-  - "5.11"
-  - "6.1"
-before_install:
-  - export CHROME_BIN=chromium-browser
-  - export DISPLAY=:99.0
-  - if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then sh -e /etc/init.d/xvfb start; fi
-install:
-  - npm install
-script:
-  - mkdir public
-  - npm run build
-  - npm run lint
-  - npm run test

Dockerfile

@@ -1,15 +0,0 @@
-FROM nodesource/xenial:6.1.0
-
-EXPOSE 8888
-
-ENV HOME /maputnik
-RUN mkdir ${HOME}
-
-COPY . ${HOME}/
-
-WORKDIR ${HOME}
-
-RUN npm install -d --dev
-RUN npm run build
-
-CMD npm run start -- --host 0.0.0.0

LICENSE

@@ -1,22 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) 2015 Lukas Martinelli
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-

README.md

@@ -1,154 +0,0 @@
-# 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)
-
-<img width="200" align="right" alt="Maputnik" src="media/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. Creating your own custom map is easy with **Maputnik**.
-
-*Maputnik is an early prototype and is under development.
-[Thanks to the supporters of the Kickstarter campaign who made this project possible](https://www.kickstarter.com/projects/174808720/maputnik-visual-map-editor-for-mapbox-gl)*.
-
-## Features
-
-- [x] Completely free and open source
-- [x] Visual interface for designing maps
-- [x] Immediate feedback (thanks to [style diffs](https://github.com/mapbox/mapbox-gl-style-spec/blob/mb-pages/lib/diff.js))
-- [x] Edit layers
-- [x] Easy to deploy as single HTML file
-- [ ] Support for Open Layers 3
-
-![Demo showing interactive feedback](media/demo.gif)
-
-
-## Develop
-
-Maputnik is written in ES6 and is using [React](https://github.com/facebook/react), [Immutable.js](https://facebook.github.io/immutable-js/) and [Mapbox GL JS](https://www.mapbox.com/mapbox-gl-js/api/).
-
-We ensure building and developing Maputnik works with
-
-- Linux, OSX and Windows
-- Node >4
-
-Install the deps, start the dev server and open the web browser on `http://localhost:8888/`.
-
-```bash
-# install dependencies
-npm install
-# start dev server
-npm start
-```
-
-Build a production package for distribution.
-
-```
-npm run build
-```
-
-Lint the JavaScript code.
-
-```
-# install lint dependencies
-npm install --save-dev eslint eslint-plugin-react
-# run linter
-npm run lint
-```
-
-## Docker
-
-Start a container using the official Docker image.
-```
-docker run --name maputnik -p 8888:8888 -d maputnik/editor
-```
-
-Stop the container
-
-```
-docker stop maputnik
-```
-
-## Sponsors
-
-This project would not be possible without commercial and individual sponsors.
-
-### Gold
-
-[![Wemap](media/sponsors/wemap.jpg)](https://getwemap.com/)
-
-[![Terranodo](media/sponsors/terranodo.png)](http://terranodo.io/)
-
-### Silver
-
-<a href="https://www.klokantech.com/">
-  <img alt="Klokan Technologies" style="display:inline" src="media/sponsors/klokantech.png" />
-</a>
-<a href="https://www.dreipol.ch/">
-  <img alt="Dreipol" style="display:inline" src="media/sponsors/dreipol.png" />
-</a>
-<br/>
-
-### Individuals
-
-**Influential Stakeholder**
-
-- Alan McConchie
-- Odi
-- Mats Norén
-- Uli [geOps](http://geops.ch/)
-- Helge Fahrnberger
- Kirusanth Poopalasingam
-
-**Stakeholder**
-
-- Brian Flood
-- Vasile Coțovanu
-- Andreas Kalkbrenner
-- Christian Mäder
-- Gregor Wassmann
-- Lee Armstrong
-- Rafel
-- Jon Burgess
-- Lukas Lehmann
-- Joachim Ungar
-- Alois Ackermann
-- Zsolt Ero
-- Jordan Meek
-
-**Supporter**
-
-- Sina Martinelli
-- Nicholas Doiron
-- Neil Cawse
-- Urs42
-- Benedikt Groß
-- Manuel Roth
-- Janko Mihelić
-- Moritz Stefaner
-- Sebastian Ahoi
-- Juerg Uhlmann
-- Tom Wider
-- Nadia Panchaud
-- Oliver Snowden
-- Stephan Heuel
-- Tobin Bradley
-- Adrian Herzog
-- Antti Lehto
-- Pascal Mages
-- Marc Gehling
-- Imre Samu
-- Lauri K.
-- Visahavel Parthasarathy
-- Christophe Waterlot-Buisine
-- Max Galka
-- ubahnverleih
-- Wouter van Dam
-- Jakob Lobensteiner
-- Samuel Kurath
-- Brian Bancroft
-
-## License
-
-Maputnik is [licensed under MIT](LICENSE) and is Copyright (c) Lukas Martinelli and contributors.
-
-**Disclaimer** This project is not affiliated with Mapbox or Mapbox Studio. It is a independent style editor for the
-open source technology in the Mapbox GL ecosystem.
-As contributor please take extra care of not violating any Mapbox trademarks. Do not get inspired by Mapbox Studio and make your own decisions for a good style editor.

appveyor.yml

@@ -1,14 +0,0 @@
-environment:
-  matrix:
-    - nodejs_version: "4.6"
-    - nodejs_version: "5.11"
-    - nodejs_version: "6.1"
-install:
-  - ps: Install-Product node $env:nodejs_version
-  - md public
-  - npm install
-build_script:
-  - npm run build
-test_script:
-  - npm run lint
-  - npm test

assets/manifest-BrZzkYP9.json

@@ -0,0 +1,9 @@
+{
+  "name": "Maputnik",
+  "short_name": "Maputnik",
+  "description": "Visual Map Designer",
+  "start_url": ".",
+  "display": "browser",
+  "background_color": "#1c1f24",
+  "theme_color": "#1c1f24"
+}

assets/translation-BGNHuhFm.js

@@ -0,0 +1,2 @@
+const e={"Drag and drop a style JSON file here or click to browse":"Drag and drop a style JSON file here or click to browse"};export{e as default};
+//# sourceMappingURL=translation-BGNHuhFm.js.map

assets/translation-BGNHuhFm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"translation-BGNHuhFm.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

assets/translation-By0N8Bv5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"translation-By0N8Bv5.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

assets/translation-C9ujdbWm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"translation-C9ujdbWm.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

assets/translation-CZCLjgpE.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"translation-CZCLjgpE.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

assets/translation-CcF6vdbg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"translation-CcF6vdbg.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

assets/translation-CniVGPpK.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"translation-CniVGPpK.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

assets/translation-DErdfNS6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"translation-DErdfNS6.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

assets/translation-a6aNEnxv.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"translation-a6aNEnxv.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

assets/translation-xtrlBNbA.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"translation-xtrlBNbA.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

index.html

@@ -0,0 +1,133 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Maputnik</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="manifest" href="/maputnik/assets/manifest-BrZzkYP9.json">
+  <link rel="icon" href="/maputnik/assets/favicon-DBn6BKLx.ico" type="image/x-icon" />
+  <style>
+    html {
+      background-color: rgb(28, 31, 36);
+    }
+
+    .loading {
+      text-align: center;
+      position: absolute;
+      width: 100vw;
+      height: 100vh;
+      top: 0;
+      left: 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .loading__logo img {
+      width: 200px;
+      height: 200px;
+    }
+
+    .loading__text {
+      font-family: sans-serif;
+      color: white;
+      font-size: 1.2em;
+      padding-bottom: 2em;
+    }
+
+  </style>
+  <script type="module" crossorigin src="/maputnik/assets/index-BECDTzeS.js"></script>
+  <link rel="stylesheet" crossorigin href="/maputnik/assets/index-CeR5SWEc.css">
+</head>
+<body>
+  <!-- From <https://github.com/hail2u/color-blindness-emulation> -->
+  <svg
+    aria-hidden="true"
+    xmlns="http://www.w3.org/2000/svg"
+    version="1.1">
+    <defs>
+      <filter id="protanopia">
+        <feColorMatrix
+          in="SourceGraphic"
+          type="matrix"
+          values="0.567, 0.433, 0,     0, 0
+                  0.558, 0.442, 0,     0, 0
+                  0,     0.242, 0.758, 0, 0
+                  0,     0,     0,     1, 0"/>
+      </filter>
+      <filter id="protanomaly">
+        <feColorMatrix
+          in="SourceGraphic"
+          type="matrix"
+          values="0.817, 0.183, 0,     0, 0
+                  0.333, 0.667, 0,     0, 0
+                  0,     0.125, 0.875, 0, 0
+                  0,     0,     0,     1, 0"/>
+      </filter>
+      <filter id="deuteranopia">
+        <feColorMatrix
+          in="SourceGraphic"
+          type="matrix"
+          values="0.625, 0.375, 0,   0, 0
+                  0.7,   0.3,   0,   0, 0
+                  0,     0.3,   0.7, 0, 0
+                  0,     0,     0,   1, 0"/>
+      </filter>
+      <filter id="deuteranomaly">
+        <feColorMatrix
+          in="SourceGraphic"
+          type="matrix"
+          values="0.8,   0.2,   0,     0, 0
+                  0.258, 0.742, 0,     0, 0
+                  0,     0.142, 0.858, 0, 0
+                  0,     0,     0,     1, 0"/>
+      </filter>
+      <filter id="tritanopia">
+        <feColorMatrix
+          in="SourceGraphic"
+          type="matrix"
+          values="0.95, 0.05,  0,     0, 0
+                  0,    0.433, 0.567, 0, 0
+                  0,    0.475, 0.525, 0, 0
+                  0,    0,     0,     1, 0"/>
+      </filter>
+      <filter id="tritanomaly">
+        <feColorMatrix
+          in="SourceGraphic"
+          type="matrix"
+          values="0.967, 0.033, 0,     0, 0
+                  0,     0.733, 0.267, 0, 0
+                  0,     0.183, 0.817, 0, 0
+                  0,     0,     0,     1, 0"/>
+      </filter>
+      <filter id="achromatopsia">
+        <feColorMatrix
+          in="SourceGraphic"
+          type="matrix"
+          values="0.299, 0.587, 0.114, 0, 0
+                  0.299, 0.587, 0.114, 0, 0
+                  0.299, 0.587, 0.114, 0, 0
+                  0,     0,     0,     1, 0"/>
+      </filter>
+      <filter id="achromatomaly">
+        <feColorMatrix
+          in="SourceGraphic"
+          type="matrix"
+          values="0.618, 0.320, 0.062, 0, 0
+                  0.163, 0.775, 0.062, 0, 0
+                  0.163, 0.320, 0.516, 0, 0
+                  0,     0,     0,     1, 0"/>
+      </filter>
+    </defs>
+  </svg>
+
+  <div id="app"></div>
+  <div class="loading">
+    <div class="loading__logo">
+      <img inline src="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='1200'%20height='1200'%20viewBox='0%200%20100%20100'%3e%3cstyle%3e@keyframes%20circle-anim{0%25,40%25{fill-opacity:0}60%25,to{fill-opacity:1}}.circle0,.circle1,.circle2,.circle3,.circle4,.circle5{stroke-opacity:0;animation-name:circle-anim;will-change:transform;animation-timing-function:east-in-out;animation-duration:800ms;animation-iteration-count:infinite;animation-direction:alternate}.circle0{animation-delay:100ms}.circle1{animation-delay:200ms}.circle2{animation-delay:300ms}.circle3{animation-delay:400ms}.circle4{animation-delay:500ms}.circle5{animation-delay:600ms}%3c/style%3e%3cg%20class='map'%20stroke='%23000'%3e%3cuse%20xlink:href='%23ref-1--map__main'%20fill='%234eba6f'%3e%3c/use%3e%3cuse%20xlink:href='%23ref-1--map__line1'%20fill='none'%3e%3c/use%3e%3cuse%20xlink:href='%23ref-1--map__line2'%20fill='none'%3e%3c/use%3e%3cuse%20xlink:href='%23ref-1--map__line3'%20fill='none'%3e%3c/use%3e%3c/g%3e%3cg%20class='palette'%3e%3cuse%20xlink:href='%23ref-1--palette__main'%20fill='%23fff'%20stroke='%23000'%3e%3c/use%3e%3cuse%20xlink:href='%23ref-1--palette__inner'%20fill='none'%20stroke='%23000'%3e%3c/use%3e%3cuse%20class='circle5'%20xlink:href='%23ref-1--palette__circle5'%20fill='%23f7c44c'%3e%3c/use%3e%3cuse%20class='circle4'%20xlink:href='%23ref-1--palette__circle4'%20fill='%234eba6f'%3e%3c/use%3e%3cuse%20class='circle3'%20xlink:href='%23ref-1--palette__circle3'%20fill='%23f7c44c'%3e%3c/use%3e%3cuse%20class='circle2'%20xlink:href='%23ref-1--palette__circle2'%20fill='%234eba6f'%3e%3c/use%3e%3cuse%20class='circle1'%20xlink:href='%23ref-1--palette__circle1'%20fill='%23f7c44c'%3e%3c/use%3e%3cuse%20class='circle0'%20xlink:href='%23ref-1--palette__circle0'%20fill='%234eba6f'%3e%3c/use%3e%3c/g%3e%3cg%20class='brush'%20stroke='%23000'%3e%3cuse%20xlink:href='%23ref-1--brush__bottom'%20fill='%23f7c44c'%3e%3c/use%3e%3cuse%20xlink:href='%23ref-1--brush__top'%20fill='%23fff'%3e%3c/use%3e%3c/g%3e%3cdefs%3e%3cpath%20id='ref-1--map__main'%20stroke-width='2.366'%20stroke-linejoin='round'%20d='M18.84%207.717l15.44%207.542%2015.75-7.762%2015.7%207.857L81.005%207.67%2096.31%2054.052%2073.598%2062.12%2050.93%2053.872l-25.1%208.066-22.668-8.066z'%3e%3c/path%3e%3cpath%20id='ref-1--map__line1'%20d='M65.556%2015.07l7.647%2046.838'%20stroke-width='1.104'%3e%3c/path%3e%3cpath%20id='ref-1--map__line2'%20d='M50.261%207.422l.717%2046.6'%20stroke-width='1.104'%3e%3c/path%3e%3cpath%20id='ref-1--map__line3'%20d='M34.011%2015.07l-8.603%2046.6'%20stroke-width='1.104'%3e%3c/path%3e%3cpath%20id='ref-1--palette__main'%20stroke-width='2.3'%20d='M47.352%2030.887c7.993.226%2016.934%209.725%2017.954%2015.25%201.02%205.527-.743%2011.125-4.298%2013.875-3.554%202.75-8.6%202.905-8.723%208.302-.097%204.237%208.457%208.5%208.088%2015.653-.406%207.857-15.508%2013.15-30.943%206.102-8.556-3.906-14.249-13.653-13.385-26.238C16.833%2052.334%2022.32%2043.658%2027.382%2039c5.977-5.503%2011.977-8.337%2019.97-8.112z'%3e%3c/path%3e%3ccircle%20id='ref-1--palette__inner'%20stroke-width='2.3'%20cx='41.873'%20cy='61.901'%20r='6.389'%3e%3c/circle%3e%3ccircle%20id='ref-1--palette__circle5'%20cy='44.56'%20cx='54.347'%20r='4.336'%3e%3c/circle%3e%3ccircle%20id='ref-1--palette__circle4'%20cx='40.443'%20cy='41.555'%20r='4.336'%3e%3c/circle%3e%3ccircle%20id='ref-1--palette__circle3'%20r='4.336'%20cy='51.102'%20cx='29.651'%3e%3c/circle%3e%3ccircle%20id='ref-1--palette__circle2'%20cx='25.293'%20cy='65.836'%20r='4.336'%3e%3c/circle%3e%3ccircle%20id='ref-1--palette__circle1'%20r='4.336'%20cy='79.326'%20cx='32.764'%3e%3c/circle%3e%3ccircle%20id='ref-1--palette__circle0'%20cx='46.669'%20cy='80.571'%20r='4.336'%3e%3c/circle%3e%3cpath%20id='ref-1--brush__bottom'%20d='M76.333%2089.333c-1.645-9.794-4.375-35.26-4.32-37.887.056-2.627%202.52-4.34%205.36-4.317%202.842.022%205.098%201.87%205.314%204.27.107%201.2-1.576%2028.06-2.318%2037.844-.332%204.374-3.31%204.413-4.036.09z'%20stroke-width='2.3'%20stroke-linejoin='round'%3e%3c/path%3e%3cpath%20id='ref-1--brush__top'%20stroke-linejoin='round'%20stroke-width='2.3'%20d='M77.184%2026.428s-5.621%207.02-5.621%2011.978c0%204.957%202.206%206.878%205.81%206.878%203.606%200%205.148-1.708%205.29-6.736.142-5.028-5.479-12.12-5.479-12.12z'%3e%3c/path%3e%3c/defs%3e%3c/svg%3e" />
+    </div>
+    <div class="loading__text">Loading&hellip;</div>
+  </div>
+</body>
+</html>

karma.conf.js

@@ -1,34 +0,0 @@
-var webpackConfig = require('./webpack.config.js');
-
-// Karma configuration
-module.exports = function(config) {
-  var browsers = ['Chrome'];
-  if (process.env.TRAVIS) {
-    browsers = ['Firefox'];
-  }
-
-  config.set({
-		browsers: browsers,
-		frameworks: ['mocha'],
-    // ... normal karma configuration
-    files: [
-      // all files ending in "_test"
-      {pattern: 'test/*_test.js', watched: false},
-      {pattern: 'test/**/*_test.js', watched: false}
-      // each file acts as entry point for the webpack configuration
-    ],
-
-    preprocessors: {
-      // add webpack as preprocessor
-      'test/*_test.js': ['webpack'],
-      'test/**/*_test.js': ['webpack']
-    },
-
-    webpack: webpackConfig,
-    webpackMiddleware: {
-      // webpack-dev-middleware configuration
-      // i. e.
-      stats: 'errors-only'
-    }
-  });
-};

package.json

@@ -1,118 +0,0 @@
-{
-  "name": "maputnik",
-  "version": "0.0.1",
-  "description": "A MapboxGL visual style editor",
-  "main": "''",
-  "scripts": {
-    "stats": "webpack --config webpack.production.config.js --profile --json > stats.json",
-    "build": "webpack --config webpack.production.config.js --progress --profile --colors",
-    "test": "karma start --single-run",
-    "test-watch": "karma start",
-    "start": "webpack-dev-server --progress --profile --colors --watch-poll",
-    "lint": "eslint --ext js --ext jsx {src,test}"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/maputnik/editor"
-  },
-  "author": "Lukas Martinelli",
-  "license": "MIT",
-  "homepage": "https://github.com/maputnik/editor#readme",
-  "dependencies": {
-    "color": "^1.0.3",
-    "file-saver": "^1.3.2",
-    "lodash.clonedeep": "^4.5.0",
-    "lodash.throttle": "^4.1.1",
-    "lodash.topairs": "^4.3.0",
-    "mapbox-gl": "mapbox/mapbox-gl-js#6c24b9621d2aa770eda67fb5638b4d78087b5624",
-    "mapbox-gl-style-spec": "mapbox/mapbox-gl-style-spec#e85407a377510acb647161de6be6357ab4f606dd",
-    "ol-mapbox-style": "0.0.11",
-    "openlayers": "^3.19.1",
-    "randomcolor": "^0.4.4",
-    "react": "^15.4.0",
-    "react-addons-pure-render-mixin": "^15.4.0",
-    "react-codemirror": "^0.3.0",
-    "react-collapse": "^2.3.3",
-    "react-color": "^2.10.0",
-    "react-dom": "^15.4.0",
-    "react-file-reader-input": "^1.1.0",
-    "react-height": "^2.1.1",
-    "react-icon-base": "^2.0.4",
-    "react-icons": "^2.2.1",
-    "react-motion": "^0.4.7",
-    "react-sortable-hoc": "^0.4.5",
-    "request": "^2.79.0"
-  },
-  "babel": {
-    "presets": [
-      "es2015",
-      "react"
-    ],
-    "plugins": [
-      "transform-object-rest-spread"
-    ]
-  },
-  "jshintConfig": {
-    "esversion": 6
-  },
-  "eslintConfig": {
-    "plugins": [
-      "react"
-    ],
-    "extend": [
-      "plugin:react/recommended"
-    ],
-    "env": {
-      "browser": true,
-      "node": true,
-      "es6": true
-    },
-    "parser": "babel-eslint",
-    "parserOptions": {
-      "ecmaVersion": 6,
-      "sourceType": "module",
-      "ecmaFeatures": {
-        "impliedStrict": true,
-        "experimentalObjectRestSpread": true,
-        "jsx": true
-      }
-    }
-  },
-  "devDependencies": {
-    "babel-core": "6.14.0",
-    "babel-eslint": "^6.1.2",
-    "babel-loader": "6.2.4",
-    "babel-plugin-transform-class-properties": "^6.11.5",
-    "babel-plugin-transform-decorators-legacy": "^1.3.4",
-    "babel-plugin-transform-flow-strip-types": "^6.21.0",
-    "babel-plugin-transform-object-rest-spread": "^6.8.0",
-    "babel-plugin-transform-runtime": "^6.15.0",
-    "babel-preset-es2015": "6.14.0",
-    "babel-preset-react": "6.11.1",
-    "babel-runtime": "^6.11.6",
-    "css-loader": "0.25.0",
-    "eslint": "^3.5.0",
-    "eslint-plugin-react": "^6.2.0",
-    "extract-text-webpack-plugin": "^1.0.1",
-    "file-loader": "0.9.0",
-    "html-webpack-plugin": "^2.22.0",
-    "json-loader": "^0.5.4",
-    "karma": "^1.3.0",
-    "karma-chrome-launcher": "^2.0.0",
-    "karma-firefox-launcher": "^1.0.0",
-    "karma-mocha": "^1.3.0",
-    "karma-webpack": "^1.8.0",
-    "mocha": "^3.1.2",
-    "mocha-loader": "^1.0.0",
-    "node-sass": "^3.9.2",
-    "react-hot-loader": "^3.0.0-beta.6",
-    "sass-loader": "^4.0.1",
-    "style-loader": "0.13.1",
-    "transform-loader": "^0.2.3",
-    "url-loader": "0.5.7",
-    "webpack": "1.13.2",
-    "webpack-cleanup-plugin": "^0.3.0",
-    "webpack-dev-server": "1.15.1",
-    "webworkify-webpack": "^1.1.3"
-  }
-}

src/codemirror-maputnik.css

@@ -1,43 +0,0 @@
-.cm-s-maputnik.CodeMirror {
-  height: 100%;
-  font-size: 10px;
-}
-
-.cm-s-maputnik.CodeMirror, .cm-s-maputnik .CodeMirror-gutters {
-  background: transparent;
-  color: #8e8e8e;
-  border: none;
-}
-.cm-s-maputnik .CodeMirror-cursor {
-    border-left: solid thin #8e8e8e !important;
-}
-
-.cm-s-maputnik.CodeMirror-focused div.CodeMirror-selected {
-  background: rgba(255, 255, 255, 0.10);
-}
-
-.cm-s-maputnik .CodeMirror-line::selection,
-.cm-s-maputnik .CodeMirror-line > span::selection,
-.cm-s-maputnik .CodeMirror-line > span > span::selection {
-  background: rgba(255, 255, 255, 0.10);
-}
-
-.cm-s-maputnik .CodeMirror-line::-moz-selection,
-.cm-s-maputnik .CodeMirror-line > span::-moz-selection,
-.cm-s-maputnik .CodeMirror-line > span > span::-moz-selection {
-  background: rgba(255, 255, 255, 0.10);
-}
-
-.cm-s-maputnik span.cm-string, .cm-s-maputnik span.cm-string-2 {
-  color: #8f9d6a;
-}
-.cm-s-maputnik span.cm-number { color: #91675f; }
-.cm-s-maputnik span.cm-property { color: #b8a077; }
-
-.cm-s-maputnik .CodeMirror-activeline-background {
-  background: rgba(255,255,255,0.1);
-}
-
-.cm-s-maputnik .CodeMirror-matchingbracket {
-  text-decoration: underline; color: white !important;
-}

src/components/App.jsx

@@ -1,152 +0,0 @@
-import React from 'react'
-import { saveAs } from 'file-saver'
-
-import MapboxGlMap from './map/MapboxGlMap'
-import OpenLayers3Map from './map/OpenLayers3Map'
-import LayerList from './layers/LayerList'
-import LayerEditor from './layers/LayerEditor'
-import Toolbar from './Toolbar'
-import AppLayout from './AppLayout'
-
-import style from '../libs/style.js'
-import { loadDefaultStyle, SettingsStore, StyleStore } from '../libs/stylestore'
-import { ApiStyleStore } from '../libs/apistore'
-import LayerWatcher from '../libs/layerwatcher'
-
-
-export default class App extends React.Component {
-
-  constructor(props) {
-    super(props)
-    this.layerWatcher = new LayerWatcher()
-    this.styleStore = new ApiStyleStore()
-    this.styleStore.supported(isSupported => {
-      if(!isSupported) {
-        console.log('Falling back to local storage for storing styles')
-        this.styleStore = new StyleStore()
-      }
-      this.styleStore.latestStyle(mapStyle => this.onStyleChanged(mapStyle))
-    })
-
-    this.settingsStore = new SettingsStore()
-    this.state = {
-      accessToken: this.settingsStore.accessToken,
-      mapStyle: style.emptyStyle,
-      selectedLayerIndex: 0,
-    }
-  }
-
-  onReset() {
-    this.styleStore.purge()
-    loadDefaultStyle(mapStyle => this.onStyleOpen(mapStyle))
-  }
-
-  onStyleDownload() {
-    const mapStyle = this.state.mapStyle
-    const blob = new Blob([JSON.stringify(mapStyle, null, 4)], {type: "application/json;charset=utf-8"});
-    saveAs(blob, mapStyle.id + ".json");
-  }
-
-  saveStyle(snapshotStyle) {
-    snapshotStyle.modified = new Date().toJSON()
-    this.styleStore.save(snapshotStyle)
-  }
-
-  onStyleChanged(newStyle) {
-    this.saveStyle(newStyle)
-    this.setState({ mapStyle: newStyle })
-  }
-
-  onAccessTokenChanged(newToken) {
-    this.settingsStore.accessToken = newToken
-    this.setState({ accessToken: newToken })
-  }
-
-  onLayersChange(changedLayers) {
-    const changedStyle = {
-      ...this.state.mapStyle,
-      layers: changedLayers
-    }
-    this.onStyleChanged(changedStyle)
-  }
-
-  onLayerIdChange(oldId, newId) {
-    const changedLayers = this.state.mapStyle.layers.slice(0)
-    const idx = style.indexOfLayer(changedLayers, oldId)
-
-    changedLayers[idx] = {
-      ...changedLayers[idx],
-      id: newId
-    }
-
-    this.onLayersChange(changedLayers)
-  }
-
-  onLayerChanged(layer) {
-    const changedLayers = this.state.mapStyle.layers.slice(0)
-    const idx = style.indexOfLayer(changedLayers, layer.id)
-    changedLayers[idx] = layer
-
-    this.onLayersChange(changedLayers)
-  }
-
-  mapRenderer() {
-    const mapProps = {
-      mapStyle: this.state.mapStyle,
-      accessToken: this.state.accessToken,
-      onMapLoaded: (map) => {
-        this.layerWatcher.map = map
-      }
-    }
-
-    const metadata = this.state.mapStyle.metadata || {}
-    const renderer = metadata['maputnik:renderer'] || 'mbgljs'
-
-    // Check if OL3 code has been loaded?
-    if(renderer === 'ol3') {
-      return <OpenLayers3Map {...mapProps} />
-    } else {
-      return  <MapboxGlMap {...mapProps} />
-    }
-  }
-
-  onLayerSelect(layerId) {
-    const idx = style.indexOfLayer(this.state.mapStyle.layers, layerId)
-    this.setState({ selectedLayerIndex: idx })
-  }
-
-  render() {
-    const layers = this.state.mapStyle.layers || []
-    const selectedLayer = layers.length > 0 ? layers[this.state.selectedLayerIndex] : null
-
-    const toolbar = <Toolbar
-      mapStyle={this.state.mapStyle}
-      onStyleChanged={this.onStyleChanged.bind(this)}
-      onStyleOpen={this.onStyleChanged.bind(this)}
-      onStyleDownload={this.onStyleDownload.bind(this)}
-    />
-
-    const layerList = <LayerList
-      onLayersChange={this.onLayersChange.bind(this)}
-      onLayerSelect={this.onLayerSelect.bind(this)}
-      selectedLayerIndex={this.state.selectedLayerIndex}
-      layers={layers}
-    />
-
-    const layerEditor = selectedLayer ? <LayerEditor
-      layer={selectedLayer}
-      sources={this.layerWatcher.sources}
-      vectorLayers={this.layerWatcher.vectorLayers}
-      onLayerChanged={this.onLayerChanged.bind(this)}
-      onLayerIdChange={this.onLayerIdChange.bind(this)}
-    /> : null
-
-    return <AppLayout
-      toolbar={toolbar}
-      layerList={layerList}
-      layerEditor={layerEditor}
-      map={this.mapRenderer()}
-    />
-  }
-}
-

src/components/AppLayout.jsx

@@ -1,66 +0,0 @@
-import React from 'react'
-import ScrollContainer from './ScrollContainer'
-
-import theme from '../config/theme'
-import colors from '../config/colors'
-
-class AppLayout extends React.Component {
-  static propTypes = {
-    toolbar: React.PropTypes.element.isRequired,
-    layerList: React.PropTypes.element.isRequired,
-    layerEditor: React.PropTypes.element,
-    map: React.PropTypes.element.isRequired,
-  }
-
-  static childContextTypes = {
-    reactIconBase: React.PropTypes.object
-  }
-
-  getChildContext() {
-    return {
-      reactIconBase: { size: 14 }
-    }
-  }
-
-  render() {
-    return <div style={{
-      fontFamily: theme.fontFamily,
-      color: theme.color,
-      fontWeight: 300
-    }}>
-      {this.props.toolbar}
-      <div style={{
-        position: 'fixed',
-        bottom: 0,
-        height: "100%",
-        top: 40,
-        left: 0,
-        zIndex: 1,
-        width: 200,
-        overflow: "hidden",
-        backgroundColor: colors.black
-      }}>
-        <ScrollContainer>
-          {this.props.layerList}
-        </ScrollContainer>
-      </div>
-      <div style={{
-        position: 'fixed',
-        bottom: 0,
-        height: "100%",
-        top: 40,
-        left: 200,
-        zIndex: 1,
-        width: 300,
-        backgroundColor: colors.black
-      }}>
-        <ScrollContainer>
-          {this.props.layerEditor}
-        </ScrollContainer>
-      </div>
-      {this.props.map}
-    </div>
-  }
-}
-
-export default AppLayout

src/components/Button.jsx

@@ -1,29 +0,0 @@
-import React from 'react'
-import colors from '../config/colors'
-import { margins, fontSizes } from '../config/scales'
-
-class Button extends React.Component {
-  static propTypes = {
-    onClick: React.PropTypes.func,
-    style: React.PropTypes.object,
-  }
-
-  render() {
-    return <a
-      onClick={this.props.onClick}
-      style={{
-        cursor: 'pointer',
-        backgroundColor: colors.midgray,
-        color: colors.lowgray,
-        fontSize: fontSizes[4],
-        padding: margins[1],
-        userSelect: 'none',
-        borderRadius: 2,
-        ...this.props.style,
-      }}>
-      {this.props.children}
-    </a>
-  }
-}
-
-export default Button

src/components/Heading.jsx

@@ -1,32 +0,0 @@
-import React from 'react'
-import { fontSizes, margins } from '../config/scales'
-
-class Heading extends React.Component {
-  static propTypes = {
-    level: React.PropTypes.number.isRequired,
-    style: React.PropTypes.object,
-  }
-
-  render() {
-    const headingProps = {
-      style: {
-        fontWeight: 400,
-        fontSize: fontSizes[this.props.level - 1],
-        marginBottom: margins[1],
-        ...this.props.style
-      }
-    }
-
-    switch(this.props.level) {
-      case 1: return <h1 {...headingProps}>{this.props.children}</h1>
-      case 2: return <h2 {...headingProps}>{this.props.children}</h2>
-      case 3: return <h3 {...headingProps}>{this.props.children}</h3>
-      case 4: return <h4 {...headingProps}>{this.props.children}</h4>
-      case 5: return <h5 {...headingProps}>{this.props.children}</h5>
-      default: return <h6 {...headingProps}>{this.props.children}</h6>
-    }
-  }
-}
-
-
-export default Heading

src/components/Paragraph.jsx

@@ -1,13 +0,0 @@
-import React from 'react'
-import colors from '../config/colors'
-import { margins, fontSizes } from '../config/scales'
-
-const Paragraph = (props) => <p style={{
-  color: colors.lowgray,
-  fontSize: fontSizes[5],
-  ...props.style
-}}>
-  {props.children}
-</p>
-
-export default Paragraph

src/components/ScrollContainer.jsx

@@ -1,18 +0,0 @@
-import React from 'react'
-import scrollbars from './scrollbars.scss'
-
-const ScrollContainer = (props) => {
-  return <div className={scrollbars.darkScrollbar} style={{
-    overflowX: "visible",
-    overflowY: "scroll",
-    bottom:0,
-    left:0,
-    right:0,
-    top:1,
-    position: "absolute",
-  }}>
-    {props.children}
-  </div>
-}
-
-export default ScrollContainer

src/components/Toolbar.jsx

@@ -1,173 +0,0 @@
-import React from 'react'
-import FileReaderInput from 'react-file-reader-input'
-
-import MdFileDownload from 'react-icons/lib/md/file-download'
-import MdFileUpload from 'react-icons/lib/md/file-upload'
-import MdOpenInBrowser from 'react-icons/lib/md/open-in-browser'
-import MdSettings from 'react-icons/lib/md/settings'
-import MdInfo from 'react-icons/lib/md/info'
-import MdLayers from 'react-icons/lib/md/layers'
-import MdSave from 'react-icons/lib/md/save'
-import MdStyle from 'react-icons/lib/md/style'
-import MdMap from 'react-icons/lib/md/map'
-import MdInsertEmoticon from 'react-icons/lib/md/insert-emoticon'
-import MdFontDownload from 'react-icons/lib/md/font-download'
-import MdHelpOutline from 'react-icons/lib/md/help-outline'
-import MdFindInPage from 'react-icons/lib/md/find-in-page'
-
-import SettingsModal from './modals/SettingsModal'
-import SourcesModal from './modals/SourcesModal'
-import OpenModal from './modals/OpenModal'
-
-import style from '../libs/style'
-import colors from '../config/colors'
-import { margins, fontSizes } from '../config/scales'
-
-const IconText = props => <span style={{ paddingLeft: margins[0] }}>
-  {props.children}
-</span>
-
-const actionStyle = {
-  display: "inline-block",
-  padding: 12.5,
-  fontSize: fontSizes[4],
-  cursor: "pointer",
-  color: colors.white,
-  textDecoration: 'none',
-}
-
-const ToolbarLink = props => <a
-  href={props.href}
-  target={"blank"}
-  style={{
-    ...actionStyle,
-    ...props.style,
-  }}>
-  {props.children}
-</a>
-
-class ToolbarAction extends React.Component {
-  static propTypes = {
-    onClick: React.PropTypes.func.isRequired,
-  }
-
-  constructor(props) {
-    super(props)
-    this.state = { hover: false }
-  }
-
-  render() {
-    return <a
-      onClick={this.props.onClick}
-      onMouseOver={e => this.setState({hover: true})}
-      onMouseOut={e => this.setState({hover: false})}
-      style={{
-        ...actionStyle,
-        ...this.props.style,
-        backgroundColor: this.state.hover ? colors.gray : null,
-      }}>
-      {this.props.children}
-    </a>
-  }
-}
-
-export default class Toolbar extends React.Component {
-  static propTypes = {
-    mapStyle: React.PropTypes.object.isRequired,
-    onStyleChanged: React.PropTypes.func.isRequired,
-    // A new style has been uploaded
-    onStyleOpen: React.PropTypes.func.isRequired,
-    // Current style is requested for download
-    onStyleDownload: React.PropTypes.func.isRequired,
-  }
-
-  constructor(props) {
-    super(props)
-    this.state = {
-      isOpen: {
-        settings: false,
-        sources: false,
-        open: false,
-      }
-    }
-  }
-
-  downloadButton() {
-    return <ToolbarAction onClick={this.props.onStyleDownload}>
-      <MdFileDownload />
-      <IconText>Download</IconText>
-    </ToolbarAction>
-  }
-
-  toggleModal(modalName) {
-    this.setState({
-      isOpen: {
-        ...this.state.isOpen,
-        [modalName]: !this.state.isOpen[modalName]
-      }
-    })
-  }
-
-  render() {
-    return <div style={{
-      position: "fixed",
-      height: 40,
-      width: '100%',
-      zIndex: 100,
-      left: 0,
-      top: 0,
-      backgroundColor: colors.black
-    }}>
-      <SettingsModal
-        mapStyle={this.props.mapStyle}
-        onStyleChanged={this.props.onStyleChanged}
-        isOpen={this.state.isOpen.settings}
-        onOpenToggle={this.toggleModal.bind(this, 'settings')}
-      />
-      <OpenModal
-        isOpen={this.state.isOpen.open}
-        onStyleOpen={this.props.onStyleOpen}
-        onOpenToggle={this.toggleModal.bind(this, 'open')}
-      />
-      <SourcesModal
-          mapStyle={this.props.mapStyle}
-          onStyleChanged={this.props.onStyleChanged}
-          isOpen={this.state.isOpen.sources}
-          onOpenToggle={this.toggleModal.bind(this, 'sources')}
-      />
-      <ToolbarLink
-        href={"https://github.com/maputnik/editor"}
-        style={{
-          width: 180,
-          textAlign: 'left',
-          backgroundColor: colors.black,
-          padding: 5,
-        }}
-      >
-        <img src="https://github.com/maputnik/editor/raw/master/media/maputnik.png" alt="Maputnik" style={{width: 30, height: 30, paddingRight: 5, verticalAlign: 'middle'}}/>
-        <span style={{fontSize: 20, verticalAlign: 'middle' }}>Maputnik</span>
-      </ToolbarLink>
-      <ToolbarAction onClick={this.toggleModal.bind(this, 'open')}>
-        <MdOpenInBrowser />
-        <IconText>Open</IconText>
-      </ToolbarAction>
-      {this.downloadButton()}
-      <ToolbarAction onClick={this.toggleModal.bind(this, 'sources')}>
-        <MdLayers />
-        <IconText>Sources</IconText>
-      </ToolbarAction>
-      <ToolbarAction onClick={this.toggleModal.bind(this, 'settings')}>
-        <MdSettings />
-        <IconText>Style Settings</IconText>
-      </ToolbarAction>
-      <ToolbarAction onClick={this.toggleModal.bind(this, 'settings')}>
-        <MdFindInPage />
-        <IconText>Inspect</IconText>
-      </ToolbarAction>
-      <ToolbarLink href={"https://github.com/maputnik/editor/wiki"}>
-        <MdHelpOutline />
-        <IconText>Help</IconText>
-      </ToolbarLink>
-    </div>
-  }
-}

src/components/fields/BooleanField.jsx

@@ -1,75 +0,0 @@
-import React from 'react'
-
-import input from '../../config/input'
-import colors from '../../config/colors'
-import { margins } from '../../config/scales'
-
-class BooleanField extends React.Component {
-  static propTypes = {
-    onChange: React.PropTypes.func.isRequired,
-    name: React.PropTypes.string.isRequired,
-    value: React.PropTypes.bool,
-    doc: React.PropTypes.string,
-    style: React.PropTypes.object,
-  }
-
-  render() {
-    const styles = {
-			root: {
-        ...input.base,
-        padding: 0,
-				position: 'relative',
-        textAlign: 'center ',
-				cursor: 'pointer'
-			},
-			input: {
-				position: 'absolute',
-				zIndex: -1,
-				opacity: 0
-			},
-			box: {
-				display: 'inline-block',
-        textAlign: 'center ',
-        height: 15,
-        width: 15,
-				marginRight: margins[1],
-				marginBottom: null,
-				backgroundColor: colors.gray,
-				borderRadius: 2,
-				borderStyle: 'solid',
-				borderWidth: 2,
-				borderColor: colors.gray,
-				transition: 'background-color .1s ease-out'
-			},
-			icon: {
-				display: this.props.value ? null : 'none',
-				width: '75%',
-				height: '75%',
-				marginTop: 1,
-				fill: colors.lowgray
-			}
-    }
-
-		return <label style={styles.root}>
-      <input
-				type="checkbox"
-				style={{
-          ...styles.input,
-					...this.props.style,
-				}}
-				value={this.props.value}
-				onChange={e => {this.props.onChange(!this.props.value)}}
-				checked={this.props.value}
-			/>
-      <div style={styles.box}>
-        <svg
-          viewBox='0 0 32 32'
-          style={styles.icon}>
-          <path d='M1 14 L5 10 L13 18 L27 4 L31 8 L13 26 z' />
-        </svg>
-		  </div>
-		</label>
-  }
-}
-
-export default BooleanField

src/components/fields/ColorField.jsx

@@ -1,105 +0,0 @@
-import React from 'react'
-import Color from 'color'
-import ChromePicker from 'react-color/lib/components/chrome/Chrome'
-
-import input from '../../config/input.js'
-
-function formatColor(color) {
-  const rgb = color.rgb
-  return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${rgb.a})`
-}
-
-/*** Number fields with support for min, max and units and documentation*/
-class ColorField extends React.Component {
-  static propTypes = {
-    onChange: React.PropTypes.func.isRequired,
-    name: React.PropTypes.string.isRequired,
-    value: React.PropTypes.string,
-    doc: React.PropTypes.string,
-    style: React.PropTypes.object,
-  }
-
-  constructor(props) {
-    super(props)
-    this.state = {
-      pickerOpened: false,
-    }
-  }
-
-  //TODO: I much rather would do this with absolute positioning
-  //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
-    if(elem) {
-      const pos = elem.getBoundingClientRect()
-      return {
-        top: pos.top,
-        left: pos.left + 165,
-      }
-    } else {
-      console.warn('Color field has no element to adjust position')
-      return {
-        top: 160,
-        left: 500,
-      }
-    }
-  }
-
-  togglePicker() {
-    this.setState({ pickerOpened: !this.state.pickerOpened })
-  }
-
-  get color() {
-    return Color(this.props.value || '#fff')
-  }
-
-  render() {
-    const offset = this.calcPickerOffset()
-    const picker = <div
-      style={{
-        position: 'fixed',
-        zIndex: 1,
-        left: offset.left,
-        top: offset.top,
-      }}>
-      <ChromePicker
-        color={this.color.object()}
-        onChange={c => this.props.onChange(formatColor(c))}
-      />
-      <div
-        onClick={this.togglePicker.bind(this)}
-        style={{
-          zIndex: -1,
-          position: 'fixed',
-          top: '0px',
-          right: '0px',
-          bottom: '0px',
-          left: '0px',
-        }}
-      />
-    </div>
-
-    return <div style={{
-      ...input.property,
-      position: 'relative',
-      display: 'inline',
-    }}>
-      {this.state.pickerOpened && picker}
-      <input
-        ref="colorInput"
-        onClick={this.togglePicker.bind(this)}
-        style={{
-          ...input.select,
-          ...this.props.style
-        }}
-        name={this.props.name}
-        placeholder={this.props.default}
-        value={this.props.value ? this.props.value : ""}
-        onChange={(e) => this.props.onChange(e.target.value)}
-      />
-    </div>
-  }
-}
-
-export default ColorField

src/components/fields/EnumField.jsx

@@ -1,36 +0,0 @@
-import React from 'react'
-import input from '../../config/input.js'
-
-class EnumField extends React.Component {
-  static propTypes = {
-    onChange: React.PropTypes.func.isRequired,
-    name: React.PropTypes.string.isRequired,
-    value: React.PropTypes.string,
-    allowedValues: React.PropTypes.array.isRequired,
-    doc: React.PropTypes.string,
-    style: React.PropTypes.object,
-  }
-
-  onChange(e) {
-    return this.props.onChange(e.target.value)
-  }
-
-  render() {
-    const options = this.props.allowedValues.map(val => {
-      return <option key={val} value={val}>{val}</option>
-    })
-
-    return <select
-      style={{
-        ...input.select,
-        ...this.props.style
-      }}
-      value={this.props.value}
-      onChange={this.onChange.bind(this)}
-    >
-      {options}
-    </select>
-  }
-}
-
-export default EnumField

src/components/fields/NumberField.jsx

@@ -1,50 +0,0 @@
-import React from 'react'
-import input from '../../config/input.js'
-
-/*** Number fields with support for min, max and units and documentation*/
-class NumberField extends React.Component {
-  static propTypes = {
-    onChange: React.PropTypes.func.isRequired,
-    name: React.PropTypes.string.isRequired,
-    value: React.PropTypes.number,
-    default: React.PropTypes.number,
-    unit: React.PropTypes.string,
-    min: React.PropTypes.number,
-    max: React.PropTypes.number,
-    doc: React.PropTypes.string,
-    style: React.PropTypes.object,
-  }
-
-  onChange(e) {
-    const value = parseFloat(e.target.value)
-    /*TODO: we can do range validation already here?
-    if(this.props.min && value < this.props.min) return
-    if(this.props.max && value > this.props.max) return
-    */
-    this.props.onChange(value)
-  }
-
-  render() {
-    let stepSize = null
-    if(this.props.max && this.props.min) {
-      stepSize = (this.props.max - this.props.min) / 10
-    }
-
-    return <input
-      style={{
-        ...input.input,
-        ...this.props.style
-      }}
-      type="number"
-      min={this.props.min}
-      max={this.props.max}
-      step={stepSize}
-      name={this.props.name}
-      placeholder={this.props.default}
-      value={this.props.value}
-      onChange={this.onChange.bind(this)}
-    />
-  }
-}
-
-export default NumberField

src/components/fields/PropertyGroup.jsx

@@ -1,62 +0,0 @@
-import React from 'react'
-import GlSpec from 'mapbox-gl-style-spec/reference/latest.min.js'
-
-import ZoomSpecField from './ZoomSpecField'
-import colors from '../../config/colors'
-import { margins } from '../../config/scales'
-
-/** Extract field spec by {@fieldName} from the {@layerType} in the
- * style specification from either the paint or layout group */
-function getFieldSpec(layerType, fieldName) {
-  const groupName = getGroupName(layerType, fieldName)
-  const group = GlSpec[groupName + '_' + layerType]
-  return group[fieldName]
-}
-
-function getGroupName(layerType, fieldName) {
-  const paint  = GlSpec['paint_' + layerType] || {}
-  if (fieldName in paint) {
-    return 'paint'
-  } else {
-    return 'layout'
-  }
-}
-
-export default class PropertyGroup extends React.Component {
-  static propTypes = {
-    layer: React.PropTypes.object.isRequired,
-    groupFields: React.PropTypes.array.isRequired,
-    onChange: React.PropTypes.func.isRequired,
-  }
-
-  onPropertyChange(property, newValue) {
-    const group = getGroupName(this.props.layer.type, property)
-    this.props.onChange(group , property ,newValue)
-  }
-
-  render() {
-    const fields = this.props.groupFields.map(fieldName => {
-      const fieldSpec = getFieldSpec(this.props.layer.type, fieldName)
-
-      const paint = this.props.layer.paint || {}
-      const layout = this.props.layer.layout || {}
-      const fieldValue = paint[fieldName] || layout[fieldName]
-
-      return <ZoomSpecField
-        onChange={this.onPropertyChange.bind(this)}
-        key={fieldName}
-        fieldName={fieldName}
-        value={fieldValue}
-        fieldSpec={fieldSpec}
-      />
-    })
-
-    return <div style={{
-      padding: margins[2],
-      paddingRight: 0,
-      backgroundColor: colors.black,
-    }}>
-      {fields}
-    </div>
-  }
-}

src/components/fields/SpecField.jsx

@@ -1,80 +0,0 @@
-import React from 'react'
-import color from 'color'
-
-import GlSpec from 'mapbox-gl-style-spec/reference/latest.min.js'
-import NumberField from './NumberField'
-import EnumField from './EnumField'
-import BooleanField from './BooleanField'
-import ColorField from './ColorField'
-import StringField from './StringField'
-
-import input from '../../config/input.js'
-
-function labelFromFieldName(fieldName) {
-  let label = fieldName.split('-').slice(1).join(' ')
-  if(label.length > 0) {
-    label = label.charAt(0).toUpperCase() + label.slice(1);
-  }
-  return label
-}
-
-/** Display any field from the Mapbox GL style spec and
- * choose the correct field component based on the @{fieldSpec}
- * to display @{value}. */
-export default class SpecField extends React.Component {
-  static propTypes = {
-    onChange: React.PropTypes.func.isRequired,
-    fieldName: React.PropTypes.string.isRequired,
-    fieldSpec: React.PropTypes.object.isRequired,
-
-    value: React.PropTypes.oneOfType([
-      React.PropTypes.string,
-      React.PropTypes.number,
-    ]),
-    /** Override the style of the field */
-    style: React.PropTypes.object,
-  }
-
-  render() {
-    const commonProps = {
-      doc: this.props.fieldSpec.doc,
-      style: this.props.style,
-      value: this.props.value,
-      name: this.props.fieldName,
-      onChange: newValue => this.props.onChange(this.props.fieldName, newValue)
-    }
-    switch(this.props.fieldSpec.type) {
-      case 'number': return (
-        <NumberField
-          {...commonProps}
-          default={this.props.fieldSpec.default}
-          min={this.props.fieldSpec.minimum}
-          max={this.props.fieldSpec.maximum}
-          unit={this.props.fieldSpec.unit}
-        />
-      )
-      case 'enum': return (
-        <EnumField
-          {...commonProps}
-          allowedValues={Object.keys(this.props.fieldSpec.values)}
-        />
-      )
-      case 'string': return (
-        <StringField
-          {...commonProps}
-        />
-      )
-      case 'color': return (
-        <ColorField
-          {...commonProps}
-        />
-      )
-      case 'boolean': return (
-        <BooleanField
-          {...commonProps}
-        />
-      )
-      default: return null
-    }
-  }
-}

src/components/fields/StringField.jsx

@@ -1,34 +0,0 @@
-import React from 'react'
-import input from '../../config/input.js'
-
-/*** Number fields with support for min, max and units and documentation*/
-class StringField extends React.Component {
-  static propTypes = {
-    onChange: React.PropTypes.func.isRequired,
-    name: React.PropTypes.string.isRequired,
-    value: React.PropTypes.string,
-    default: React.PropTypes.number,
-    doc: React.PropTypes.string,
-    style: React.PropTypes.object,
-  }
-
-  onChange(e) {
-    const value = e.target.value
-    return this.props.onChange(value === "" ? null: value)
-  }
-
-  render() {
-    return <input
-      style={{
-        ...input.input,
-        ...this.props.style
-      }}
-      name={this.props.name}
-      placeholder={this.props.default}
-      value={this.props.value ? this.props.value : ""}
-      onChange={this.onChange.bind(this)}
-    />
-  }
-}
-
-export default StringField

src/components/fields/ZoomSpecField.jsx

@@ -1,97 +0,0 @@
-import React from 'react'
-import Color from 'color'
-
-import NumberField from './NumberField'
-import EnumField from './EnumField'
-import BooleanField from './BooleanField'
-import ColorField from './ColorField'
-import StringField from './StringField'
-import SpecField from './SpecField'
-
-import input from '../../config/input.js'
-import colors from '../../config/colors.js'
-import { margins } from '../../config/scales.js'
-
-function isZoomField(value) {
-  return typeof value === 'object' && value.stops
-}
-
-const specFieldProps =  {
-  onChange: React.PropTypes.func.isRequired,
-  fieldName: React.PropTypes.string.isRequired,
-  fieldSpec: React.PropTypes.object.isRequired,
-}
-
-/** Supports displaying spec field for zoom function objects
- * https://www.mapbox.com/mapbox-gl-style-spec/#types-function-zoom-property
- */
-export default class ZoomSpecField extends React.Component {
-  static propTypes = {
-      onChange: React.PropTypes.func.isRequired,
-      fieldName: React.PropTypes.string.isRequired,
-      fieldSpec: React.PropTypes.object.isRequired,
-
-      value: React.PropTypes.oneOfType([
-      React.PropTypes.object,
-      React.PropTypes.string,
-      React.PropTypes.number,
-      React.PropTypes.bool,
-    ]),
-  }
-
-  render() {
-    const label = <label style={input.label}>
-      {labelFromFieldName(this.props.fieldName)}
-    </label>
-
-    if(isZoomField(this.props.value)) {
-      const zoomFields = this.props.value.stops.map(stop => {
-        const zoomLevel = stop[0]
-        const value = stop[1]
-
-        return <div style={input.property} key={zoomLevel}>
-          {label}
-          <SpecField {...this.props}
-            value={value}
-            style={{
-              width: '33%'
-            }}
-          />
-
-          <input
-            style={{
-              ...input.input,
-              width: '10%',
-              marginLeft: margins[0],
-            }}
-            type="number"
-            value={zoomLevel}
-            min={0}
-            max={22}
-          />
-        </div>
-      })
-      return <div style={{
-          border: 1,
-          borderStyle: 'solid',
-          borderColor: Color(colors.gray).lighten(0.1).string(),
-          padding: margins[1],
-        }}>
-        {zoomFields}
-      </div>
-    } else {
-      return <div style={input.property}>
-        {label}
-        <SpecField {...this.props} />
-      </div>
-    }
-  }
-}
-
-function labelFromFieldName(fieldName) {
-  let label = fieldName.split('-').slice(1).join(' ')
-  if(label.length > 0) {
-    label = label.charAt(0).toUpperCase() + label.slice(1);
-  }
-  return label
-}

src/components/filter/FilterEditor.jsx

@@ -1,180 +0,0 @@
-import React from 'react'
-import GlSpec from 'mapbox-gl-style-spec/reference/latest.min.js'
-
-import input from '../../config/input.js'
-import colors from '../../config/colors.js'
-import { margins } from '../../config/scales.js'
-
-const combiningFilterOps = ['all', 'any', 'none']
-const setFilterOps = ['in', '!in']
-const otherFilterOps = Object
-  .keys(GlSpec.filter_operator.values)
-  .filter(op => combiningFilterOps.indexOf(op) < 0)
-
-class CombiningOperatorSelect extends React.Component {
-  static propTypes = {
-    value: React.PropTypes.string.isRequired,
-    onChange: React.PropTypes.func.isRequired,
-  }
-
-  render() {
-    const options = combiningFilterOps.map(op => {
-      return <option key={op} value={op}>{op}</option>
-    })
-
-    return <div>
-      <select
-        style={{
-          ...input.select,
-          width: '20.5%',
-          margin: margins[0],
-        }}
-        value={this.props.value}
-        onChange={e => this.props.onChange(e.target.value)}
-      >
-        {options}
-      </select>
-      <label style={{
-        ...input.label,
-        width: '60%',
-        marginLeft: margins[0],
-      }}>
-        of the filters matches
-      </label>
-    </div>
-  }
-}
-
-class OperatorSelect extends React.Component {
-  static propTypes = {
-    value: React.PropTypes.string.isRequired,
-    onChange: React.PropTypes.func.isRequired,
-  }
-
-  render() {
-    const options = otherFilterOps.map(op => {
-      return <option key={op} value={op}>{op}</option>
-    })
-    return <select
-      style={{
-        ...input.select,
-        width: '15%',
-        margin: margins[0]
-      }}
-      value={this.props.value}
-      onChange={e => this.props.onChange(e.target.value)}
-    >
-      {options}
-    </select>
-  }
-}
-
-class SingleFilterEditor extends React.Component {
-  static propTypes = {
-    filter: React.PropTypes.array.isRequired,
-    onChange: React.PropTypes.func.isRequired,
-    properties: React.PropTypes.object,
-  }
-
-  static defaultProps = {
-    properties: {},
-  }
-
-  onFilterPartChanged(filterOp, propertyName, filterArgs) {
-    const newFilter = [filterOp, propertyName, ...filterArgs]
-    this.props.onChange(newFilter)
-  }
-
-  render() {
-    const f = this.props.filter
-    const filterOp = f[0]
-    const propertyName = f[1]
-    const filterArgs = f.slice(2)
-
-    return <div>
-      <select
-        style={{
-          ...input.select,
-            width: '17%',
-            margin: margins[0]
-        }}
-        value={propertyName}
-        onChange={newPropertyName => this.onFilterPartChanged(filterOp, newPropertyName, filterArgs)}
-      >
-        {Object.keys(this.props.properties).map(propName => {
-          return <option key={propName} value={propName}>{propName}</option>
-        })}
-      </select>
-      <OperatorSelect
-        value={filterOp}
-        onChange={newFilterOp => this.onFilterPartChanged(newFilterOp, propertyName, filterArgs)}
-      />
-      <input
-        style={{
-          ...input.input,
-          width: '53%',
-          margin: margins[0]
-        }}
-        value={filterArgs.join(',')}
-        onChange={e => {
-          this.onFilterPartChanged(filterOp, propertyName, e.target.value.split(','))}}
-      />
-    </div>
-  }
-
-}
-
-export default class CombiningFilterEditor extends React.Component {
-  static propTypes = {
-    /** Properties of the vector layer and the available fields */
-    properties: React.PropTypes.object.isRequired,
-    filter: React.PropTypes.array.isRequired,
-    onChange: React.PropTypes.func.isRequired,
-  }
-
-  // Convert filter to combining filter
-  combiningFilter() {
-    let combiningOp = this.props.filter[0]
-    let filters = this.props.filter.slice(1)
-
-    if(combiningFilterOps.indexOf(combiningOp) < 0) {
-      combiningOp = 'all'
-      filters = [this.props.filter.slice(0)]
-    }
-
-    return [combiningOp, ...filters]
-  }
-
-  onFilterPartChanged(filterIdx, newPart) {
-    const newFilter = this.combiningFilter().slice(0)
-    newFilter[filterIdx] = newPart
-    this.props.onChange(newFilter)
-  }
-
-  render() {
-    const filter = this.combiningFilter()
-    let combiningOp = filter[0]
-    let filters = filter.slice(1)
-
-    const filterEditors = filters.map((f, idx) => {
-      return <SingleFilterEditor
-        key={idx}
-        properties={this.props.properties}
-        filter={f}
-        onChange={this.onFilterPartChanged.bind(this, idx + 1)}
-      />
-    })
-
-    return <div style={{
-      padding: margins[2],
-      paddingRight: 0,
-      backgroundColor: colors.black
-    }}>
-      <CombiningOperatorSelect
-        value={combiningOp}
-        onChange={this.onFilterPartChanged.bind(this, 0)}
-      />
-      {filterEditors}
-    </div>
-  }
-}

src/components/icons/BackgroundIcon.jsx

@@ -1,15 +0,0 @@
-import React from 'react'
-import IconBase from 'react-icon-base'
-
-
-export default class BackgroundIcon extends React.Component {
-  render() {
-    return (
-      <IconBase viewBox="0 0 20 20" {...this.props}>
-        <path d="m 1.821019,10.255581 7.414535,5.020197 c 0.372277,0.25206 0.958697,0.239771 1.30985,-0.02745 L 17.539255,9.926162 C 17.89041,9.658941 17.873288,9.238006 17.501015,8.985946 L 10.08648,3.9657402 C 9.714204,3.7136802 9.127782,3.7259703 8.776627,3.9931918 L 1.782775,9.315365 c -0.3511551,0.267221 -0.3340331,0.688156 0.03824,0.940216 z" />
-      </IconBase>
-    )
-  }
-}
-
-

src/components/icons/FillIcon.jsx

@@ -1,15 +0,0 @@
-import React from 'react'
-import IconBase from 'react-icon-base'
-
-
-export default class FillIcon extends React.Component {
-  render() {
-    return (
-      <IconBase viewBox="0 0 20 20" {...this.props}>
-        <path d="M 2.84978,9.763512 9.462149,4.7316391 16.47225,9.478015 9.859886,14.509879 2.84978,9.763512 m -1.028761,0.492069 7.414535,5.020197 c 0.372277,0.25206 0.958697,0.239771 1.30985,-0.02745 L 17.539255,9.926162 C 17.89041,9.658941 17.873288,9.238006 17.501015,8.985946 L 10.08648,3.9657402 C 9.714204,3.7136802 9.127782,3.7259703 8.776627,3.9931918 L 1.782775,9.315365 c -0.3511551,0.267221 -0.3340331,0.688156 0.03824,0.940216 l 0,0 z" />
-      </IconBase>
-    )
-  }
-}
-
-

src/components/icons/LayerIcon.jsx

@@ -1,26 +0,0 @@
-import React from 'react'
-
-import LineIcon from './LineIcon.jsx'
-import FillIcon from './FillIcon.jsx'
-import SymbolIcon from './SymbolIcon.jsx'
-import BackgroundIcon from './BackgroundIcon.jsx'
-
-class LayerIcon extends React.Component {
-  static propTypes = {
-    type: React.PropTypes.string.isRequired,
-    style: React.PropTypes.object,
-  }
-
-  render() {
-    const iconProps = { style: this.props.style }
-    switch(this.props.type) {
-      case 'fill': return <FillIcon {...iconProps} />
-      case 'background': return <BackgroundIcon {...iconProps} />
-      case 'line': return <LineIcon {...iconProps} />
-      case 'symbol': return <SymbolIcon {...iconProps} />
-      default: return null
-    }
-  }
-}
-
-export default LayerIcon

src/components/icons/LineIcon.jsx

@@ -1,15 +0,0 @@
-import React from 'react'
-import IconBase from 'react-icon-base'
-
-
-export default class FillIcon extends React.Component {
-  render() {
-    return (
-      <IconBase viewBox="0 0 20 20" {...this.props}>
-        <path id="path8" d="M 12.34,1.29 C 12.5114,1.1076 12.7497,1.0029 13,1 13.5523,1 14,1.4477 14,2 14.0047,2.2478 13.907,2.4866 13.73,2.66 9.785626,6.5516986 6.6148407,9.7551593 2.65,13.72 2.4793,13.8963 2.2453,13.9971 2,14 1.4477,14 1,13.5523 1,13 0.9953,12.7522 1.093,12.5134 1.27,12.34 4.9761967,8.7018093 9.0356422,4.5930579 12.34,1.29 Z" transform="translate(2,2)" />
-      </IconBase>
-    )
-  }
-}
-
-

src/components/icons/SymbolIcon.jsx

@@ -1,18 +0,0 @@
-import React from 'react'
-import IconBase from 'react-icon-base'
-
-
-export default class SymbolIcon extends React.Component {
-  render() {
-    return (
-      <IconBase viewBox="0 0 20 20" {...this.props}>
-        <g id="svg_1" transform="matrix(1.2718518,0,0,1.2601269,16.559526,-7.4065264)">
-          <path id="svg_2" d="m -9.7959773,11.060163 c -0.3734787,-0.724437 -0.3580577,-1.2147051 -0.00547,-1.8767873 l 8.6034029,-0.019416 c 0.39670292,0.6865644 0.38365934,1.4750693 -0.011097,1.8864953 l -3.1359613,-0.0033 -0.013695,7.1305 c -0.4055357,0.397083 -1.3146432,0.397083 -1.7769191,-0.02274 l 0.030226,-7.104422 z" />
-        </g>
-      </IconBase>
-    )
-  }
-}
-
-
-

src/components/inputs/InputBlock.jsx

@@ -1,29 +0,0 @@
-import React from 'react'
-import input from '../../config/input'
-import { margins } from '../../config/scales'
-
-/** Wrap a component with a label */
-class InputBlock extends React.Component {
-  static propTypes = {
-    label: React.PropTypes.string.isRequired,
-    children: React.PropTypes.element.isRequired,
-  }
-
-  onChange(e) {
-    const value = e.target.value
-    return this.props.onChange(value === "" ? null: value)
-  }
-
-  render() {
-    return <div style={{
-      display: 'block',
-      marginTop: margins[2],
-      marginBottom: margins[2],
-    }}>
-      <label style={input.label}>{this.props.label}</label>
-      {this.props.children}
-    </div>
-  }
-}
-
-export default InputBlock

src/components/inputs/SelectInput.jsx

@@ -1,31 +0,0 @@
-import React from 'react'
-import input from '../../config/input.js'
-
-class SelectInput extends React.Component {
-  static propTypes = {
-    value: React.PropTypes.string.isRequired,
-    options: React.PropTypes.array.isRequired,
-    style: React.PropTypes.object,
-    onChange: React.PropTypes.func.isRequired,
-  }
-
-
-  render() {
-    const options = this.props.options.map(([val, label])=> {
-      return <option key={val} value={val}>{label}</option>
-    })
-
-    return <select
-      style={{
-        ...input.select,
-        ...this.props.style
-      }}
-      value={this.props.value}
-      onChange={e => this.props.onChange(e.target.value)}
-    >
-      {options}
-    </select>
-  }
-}
-
-export default SelectInput

src/components/inputs/StringInput.jsx

@@ -1,23 +0,0 @@
-import React from 'react'
-import input from '../../config/input.js'
-
-class StringInput extends React.Component {
-  static propTypes = {
-    value: React.PropTypes.string,
-    style: React.PropTypes.object,
-    onChange: React.PropTypes.func,
-  }
-
-  render() {
-    return <input
-      style={{
-        ...input.input,
-        ...this.props.style
-      }}
-      value={this.props.value}
-      onChange={e => this.props.onChange(e.target.value)}
-    />
-  }
-}
-
-export default StringInput

src/components/layers/JSONEditor.jsx

@@ -1,64 +0,0 @@
-import React from 'react'
-
-import CodeMirror from 'react-codemirror'
-import InputBlock from '../inputs/InputBlock'
-import StringInput from '../inputs/StringInput'
-import SelectInput from '../inputs/SelectInput'
-
-import colors from '../../config/colors'
-import { margins } from '../../config/scales'
-
-import 'codemirror/mode/javascript/javascript'
-import 'codemirror/lib/codemirror.css'
-import '../../codemirror-maputnik.css'
-
-
-class JSONEditor extends React.Component {
-  static propTypes = {
-    layer: React.PropTypes.object.isRequired,
-    onChange: React.PropTypes.func,
-  }
-
-  constructor(props) {
-    super(props)
-    this.state = {
-      code: JSON.stringify(props.layer, null, 2)
-    }
-  }
-
-  componentWillReceiveProps(nextProps) {
-    this.setState({
-      code: JSON.stringify(nextProps.layer, null, 2)
-    })
-  }
-
-  onCodeUpdate(newCode) {
-    try {
-      const parsedLayer = JSON.parse(newCode)
-      this.props.onChange(parsedLayer)
-    } catch(err) {
-      console.warn(err)
-      this.setState({
-        code: newCode
-      })
-    }
-  }
-
-  render() {
-    const codeMirrorOptions = {
-      mode: {name: "javascript", json: true},
-      tabSize: 2,
-      theme: 'maputnik',
-      viewportMargin: Infinity,
-      lineNumbers: false,
-    }
-
-    return <CodeMirror
-      value={this.state.code}
-      onChange={this.onCodeUpdate.bind(this)}
-      options={codeMirrorOptions}
-    />
-  }
-}
-
-export default JSONEditor

src/components/layers/LayerEditor.jsx

@@ -1,167 +0,0 @@
-import React from 'react'
-
-import JSONEditor from './JSONEditor'
-import SourceEditor from './SourceEditor'
-import FilterEditor from '../filter/FilterEditor'
-import PropertyGroup from '../fields/PropertyGroup'
-import LayerEditorGroup from './LayerEditorGroup'
-import LayerSettings from './LayerSettings'
-
-import layout from '../../config/layout.json'
-import { margins, fontSizes } from '../../config/scales'
-import colors from '../../config/colors'
-
-class UnsupportedLayer extends React.Component {
-  render() {
-    return <div></div>
-  }
-}
-
-/** Layer editor supporting multiple types of layers. */
-export default class LayerEditor extends React.Component {
-  static propTypes = {
-    layer: React.PropTypes.object.isRequired,
-    sources: React.PropTypes.object,
-    vectorLayers: React.PropTypes.object,
-    onLayerChanged: React.PropTypes.func,
-    onLayerIdChange: React.PropTypes.func,
-  }
-
-  static defaultProps = {
-    onLayerChanged: () => {},
-    onLayerIdChange: () => {},
-    onLayerDestroyed: () => {},
-  }
-
-  static childContextTypes = {
-    reactIconBase: React.PropTypes.object
-  }
-
-  constructor(props) {
-    super(props)
-
-    //TODO: Clean this up and refactor into function
-    const editorGroups = {}
-    layout[this.props.layer.type].groups.forEach(group => {
-      editorGroups[group.title] = true
-    })
-
-    this.state = { editorGroups }
-  }
-
-  componentWillReceiveProps(nextProps) {
-    const additionalGroups = { ...this.state.editorGroups }
-
-    layout[nextProps.layer.type].groups.forEach(group => {
-      if(!(group.title in additionalGroups)) {
-        additionalGroups[group.title] = true
-      }
-    })
-
-    this.setState({
-      editorGroups: additionalGroups
-    })
-  }
-
-  getChildContext () {
-    return {
-      reactIconBase: {
-        size: fontSizes[4],
-        color: colors.lowgray,
-      }
-    }
-  }
-
-  /** A {@property} in either the paint our layout {@group} has changed
-   * to a {@newValue}.
-   */
-  onPropertyChange(group, property, newValue) {
-    if(group) {
-      this.props.onLayerChanged({
-        ...this.props.layer,
-        [group]: {
-          ...this.props.layer[group],
-          [property]: newValue
-        }
-      })
-    } else {
-      this.props.onLayerChanged({
-        ...this.props.layer,
-        [property]: newValue
-      })
-    }
-  }
-
-  onFilterChange(newValue) {
-    const changedLayer = {
-      ...this.props.layer,
-      filter: newValue
-    }
-    this.props.onLayerChanged(changedLayer)
-  }
-
-  onGroupToggle(groupTitle, active) {
-    const changedActiveGroups = {
-      ...this.state.editorGroups,
-      [groupTitle]: active,
-    }
-    this.setState({
-      editorGroups: changedActiveGroups
-    })
-  }
-
-  renderGroupType(type, fields) {
-    switch(type) {
-      case 'settings': return <LayerSettings
-        id={this.props.layer.id}
-        type={this.props.layer.type}
-        onTypeChange={v => this.onPropertyChange(null, 'type', v)}
-        onIdChange={newId => this.props.onLayerIdChange(this.props.layer.id, newId)}
-      />
-      case 'source': return <div>
-        <FilterEditor
-          filter={this.props.layer.filter}
-          properties={this.props.vectorLayers[this.props.layer['source-layer']]}
-          onChange={f => this.onFilterChange(f)}
-        />
-        <SourceEditor
-          source={this.props.layer.source}
-          sourceLayer={this.props.layer['source-layer']}
-          sources={this.props.sources}
-          onSourceChange={console.log}
-          onSourceLayerChange={console.log}
-        />
-      </div>
-      case 'properties': return <PropertyGroup
-        layer={this.props.layer}
-        groupFields={fields}
-        onChange={this.onPropertyChange.bind(this)}
-      />
-      case 'jsoneditor': return <JSONEditor
-        layer={this.props.layer}
-        onChange={this.props.onLayerChanged}
-      />
-      default: return null
-    }
-  }
-
-  render() {
-    const layerType = this.props.layer.type
-    const layoutGroups = layout[layerType].groups.filter(group => {
-      return !(this.props.layer.type === 'background' && group.type === 'source')
-    }).map(group => {
-      return <LayerEditorGroup
-        key={group.title}
-        title={group.title}
-        isActive={this.state.editorGroups[group.title]}
-        onActiveToggle={this.onGroupToggle.bind(this, group.title)}
-      >
-        {this.renderGroupType(group.type, group.fields)}
-      </LayerEditorGroup>
-    })
-
-    return <div>
-      {layoutGroups}
-    </div>
-  }
-}

src/components/layers/LayerEditorGroup.jsx

@@ -1,63 +0,0 @@
-import React from 'react'
-import Color from 'color'
-import colors from '../../config/colors'
-import { margins, fontSizes } from '../../config/scales'
-
-import Collapse from 'react-collapse'
-import CollapseOpenIcon from 'react-icons/lib/md/arrow-drop-down'
-import CollapseCloseIcon from 'react-icons/lib/md/arrow-drop-up'
-
-class Collapser extends React.Component {
-  static propTypes = {
-    isCollapsed: React.PropTypes.bool.isRequired,
-  }
-
-  render() {
-    const iconStyle = {
-      width: 20,
-      height: 20,
-    }
-    return this.props.isCollapsed ? <CollapseCloseIcon style={iconStyle}/> : <CollapseOpenIcon style={iconStyle} />
-  }
-}
-
-export default class LayerEditorGroup extends React.Component {
-  static propTypes = {
-    title: React.PropTypes.string.isRequired,
-    isActive: React.PropTypes.bool.isRequired,
-    children: React.PropTypes.element.isRequired,
-    onActiveToggle: React.PropTypes.func.isRequired
-  }
-
-  constructor(props) {
-    super(props)
-    this.state = { hover: false }
-  }
-
-  render() {
-    return <div>
-      <div style={{
-        fontSize: fontSizes[4],
-        backgroundColor: this.state.hover ? Color(colors.black).lighten(0.30).string() : Color(colors.black).lighten(0.15).string(),
-        color: colors.lowgray,
-        cursor: 'pointer',
-        userSelect: 'none',
-        padding: margins[1],
-        display: 'flex',
-        flexDirection: 'row',
-        lineHeight: '20px',
-      }}
-        onMouseOver={e => this.setState({hover: true})}
-        onMouseOut={e => this.setState({hover: false})}
-        onClick={e => this.props.onActiveToggle(!this.props.isActive)}
-      >
-        <span>{this.props.title}</span>
-        <span style={{flexGrow: 1}} />
-        <Collapser isCollapsed={this.props.isActive} />
-      </div>
-      <Collapse isOpened={this.props.isActive}>
-        {this.props.children}
-      </Collapse>
-    </div>
-  }
-}

src/components/layers/LayerList.jsx

@@ -1,99 +0,0 @@
-import React from 'react'
-import cloneDeep from 'lodash.clonedeep'
-
-import LayerListItem from './LayerListItem'
-
-import style from '../../libs/style.js'
-import { margins } from '../../config/scales.js'
-
-import {SortableContainer, SortableHandle, arrayMove} from 'react-sortable-hoc';
-
-const layerListPropTypes = {
-  layers: React.PropTypes.array.isRequired,
-  selectedLayerIndex: React.PropTypes.number.isRequired,
-  onLayersChange: React.PropTypes.func.isRequired,
-  onLayerSelect: React.PropTypes.func,
-}
-
-// List of collapsible layer editors
-@SortableContainer
-class LayerListContainer extends React.Component {
-  static propTypes = {...layerListPropTypes}
-  static defaultProps = {
-    onLayerSelect: () => {},
-  }
-
-  onLayerDestroy(layerId) {
-    const remainingLayers = this.props.layers.slice(0)
-    const idx = style.indexOfLayer(remainingLayers, layerId)
-    remainingLayers.splice(idx, 1);
-    this.props.onLayersChange(remainingLayers)
-  }
-
-  onLayerCopy(layerId) {
-    const changedLayers = this.props.layers.slice(0)
-    const idx = style.indexOfLayer(changedLayers, layerId)
-
-    const clonedLayer = cloneDeep(changedLayers[idx])
-    clonedLayer.id = clonedLayer.id + "-copy"
-    changedLayers.splice(idx, 0, clonedLayer)
-    this.props.onLayersChange(changedLayers)
-  }
-
-  onLayerVisibilityToggle(layerId) {
-    const changedLayers = this.props.layers.slice(0)
-    const idx = style.indexOfLayer(changedLayers, layerId)
-
-    const layer = { ...changedLayers[idx] }
-    const changedLayout = 'layout' in layer ? {...layer.layout} : {}
-    changedLayout.visibility = changedLayout.visibility === 'none' ? 'visible' : 'none'
-
-    layer.layout = changedLayout
-    changedLayers[idx] = layer
-    this.props.onLayersChange(changedLayers)
-  }
-
-  render() {
-    const layerPanels = this.props.layers.map((layer, index) => {
-      const layerId = layer.id
-      return <LayerListItem
-        index={index}
-        key={layerId}
-        layerId={layerId}
-        layerType={layer.type}
-        visibility={(layer.layout || {}).visibility}
-        isSelected={index === this.props.selectedLayerIndex}
-        onLayerSelect={this.props.onLayerSelect}
-        onLayerDestroy={this.onLayerDestroy.bind(this)}
-        onLayerCopy={this.onLayerCopy.bind(this)}
-        onLayerVisibilityToggle={this.onLayerVisibilityToggle.bind(this)}
-      />
-    })
-    return <ul style={{
-      padding: 0,
-      margin: 0
-    }}>
-      {layerPanels}
-    </ul>
-  }
-}
-
-export default class LayerList extends React.Component {
-  static propTypes = {...layerListPropTypes}
-
-  onSortEnd(move) {
-    const { oldIndex, newIndex } = move
-    if(oldIndex === newIndex) return
-    let layers = this.props.layers.slice(0)
-    layers = arrayMove(layers, oldIndex, newIndex)
-    this.props.onLayersChange(layers)
-  }
-
-  render() {
-    return <LayerListContainer
-      {...this.props}
-      onSortEnd={this.onSortEnd.bind(this)}
-      useDragHandle={true}
-    />
-  }
-}

src/components/layers/LayerListItem.jsx

@@ -1,190 +0,0 @@
-import React from 'react'
-import Color from 'color'
-
-import CopyIcon from 'react-icons/lib/md/content-copy'
-import VisibilityIcon from 'react-icons/lib/md/visibility'
-import VisibilityOffIcon from 'react-icons/lib/md/visibility-off'
-import DeleteIcon from 'react-icons/lib/md/delete'
-
-import LayerIcon from '../icons/LayerIcon'
-import LayerEditor from './LayerEditor'
-import {SortableElement, SortableHandle} from 'react-sortable-hoc'
-
-import colors from '../../config/colors.js'
-import { fontSizes, margins } from '../../config/scales.js'
-
-
-@SortableHandle
-class LayerTypeDragHandle extends React.Component {
-  static propTypes = LayerIcon.propTypes
-
-  render() {
-    return <LayerIcon
-      {...this.props}
-      style={{
-        cursor: 'move',
-        width: 15,
-        height: 15,
-        paddingRight: margins[0],
-      }}
-    />
-  }
-}
-
-class IconAction extends React.Component {
-  static propTypes = {
-    action: React.PropTypes.string.isRequired,
-    active: React.PropTypes.bool,
-    onClick: React.PropTypes.func.isRequired,
-  }
-
-  constructor(props) {
-    super(props)
-    this.state = { hover: false }
-  }
-
-  renderIcon() {
-    const iconStyle = {
-      fill: colors.black
-    }
-
-    if(this.props.active) {
-      iconStyle.fill = colors.midgray
-    }
-    if(this.state.hover) {
-      iconStyle.fill = colors.lowgray
-    }
-
-    switch(this.props.action) {
-      case 'copy': return <CopyIcon style={iconStyle} />
-      case 'show': return <VisibilityIcon style={iconStyle} />
-      case 'hide': return <VisibilityOffIcon style={iconStyle} />
-      case 'delete': return <DeleteIcon style={iconStyle} />
-      default: return null
-    }
-  }
-
-  render() {
-    return <a
-      style={{
-        display: "inline",
-        marginLeft: margins[0],
-        ...this.props.style
-      }}
-      onClick={this.props.onClick}
-      onMouseOver={e => this.setState({hover: true})}
-      onMouseOut={e => this.setState({hover: false})}
-    >
-      {this.renderIcon()}
-    </a>
-  }
-}
-
-@SortableElement
-class LayerListItem extends React.Component {
-  static propTypes = {
-    layerId: React.PropTypes.string.isRequired,
-    layerType: React.PropTypes.string.isRequired,
-    isSelected: React.PropTypes.bool,
-    visibility: React.PropTypes.string,
-
-    onLayerSelect: React.PropTypes.func.isRequired,
-    onLayerCopy: React.PropTypes.func,
-    onLayerDestroy: React.PropTypes.func,
-    onLayerVisibilityToggle: React.PropTypes.func,
-  }
-
-  static defaultProps = {
-    isSelected: false,
-    visibility: 'visible',
-    onLayerCopy: () => {},
-    onLayerDestroy: () => {},
-    onLayerVisibilityToggle: () => {},
-  }
-
-  static childContextTypes = {
-    reactIconBase: React.PropTypes.object
-  }
-
-  constructor(props) {
-    super(props)
-    this.state = {
-      hover: false
-    }
-  }
-
-  getChildContext() {
-    return {
-      reactIconBase: { size: 12 }
-    }
-  }
-
-  render() {
-    const itemStyle = {
-      fontWeight: 400,
-      color: colors.lowgray,
-      fontSize: fontSizes[5],
-      borderLeft: 0,
-      borderTop: 0,
-      borderBottom: 1,
-      borderRight: 0,
-      borderStyle: "solid",
-      userSelect: 'none',
-      listStyle: 'none',
-      zIndex: 2000,
-      cursor: 'pointer',
-      position: 'relative',
-      padding: margins[1],
-      borderColor: Color(colors.black).lighten(0.10).string(),
-      backgroundColor: colors.black,
-    }
-
-    if(this.state.hover) {
-      itemStyle.backgroundColor = Color(colors.black).lighten(0.10).string()
-    }
-
-    if(this.props.isSelected) {
-      itemStyle.backgroundColor = Color(colors.black).lighten(0.15).string()
-    }
-
-    const iconProps = {
-      active: this.state.hover || this.props.isSelected
-    }
-
-    return <li
-      key={this.props.layerId}
-      onClick={e => this.props.onLayerSelect(this.props.layerId)}
-      onMouseOver={e => this.setState({hover: true})}
-      onMouseOut={e => this.setState({hover: false})}
-      style={itemStyle}>
-      <div style={{
-        display: 'flex',
-        flexDirection: 'row'
-      }}>
-        <LayerTypeDragHandle type={this.props.layerType} />
-        <span style={{
-          width: 115,
-          whiteSpace: 'nowrap',
-          overflow: 'hidden',
-          textOverflow: 'ellipsis'
-        }}>{this.props.layerId}</span>
-        <span style={{flexGrow: 1}} />
-        <IconAction {...iconProps}
-          action={'delete'}
-          onClick={e => this.props.onLayerDestroy(this.props.layerId)}
-        />
-        <IconAction {...iconProps}
-          action={'copy'}
-          onClick={e => this.props.onLayerCopy(this.props.layerId)}
-        />
-        <IconAction {...iconProps}
-          active={this.state.hover || this.props.isSelected || this.props.visibility === 'none'}
-          action={this.props.visibility === 'visible' ? 'hide' : 'show'}
-          onClick={e => this.props.onLayerVisibilityToggle(this.props.layerId)}
-        />
-      </div>
-    </li>
-  }
-}
-
-export default LayerListItem;

src/components/layers/LayerSettings.jsx

@@ -1,50 +0,0 @@
-import React from 'react'
-import GlSpec from 'mapbox-gl-style-spec/reference/latest.min.js'
-import InputBlock from '../inputs/InputBlock'
-import StringInput from '../inputs/StringInput'
-import SelectInput from '../inputs/SelectInput'
-
-import colors from '../../config/colors'
-import { margins } from '../../config/scales'
-
-
-class LayerSettings extends React.Component {
-  static propTypes = {
-    id: React.PropTypes.string.isRequired,
-    type: React.PropTypes.oneOf(Object.keys(GlSpec.layer.type.values)).isRequired,
-    onIdChange: React.PropTypes.func.isRequired,
-    onTypeChange: React.PropTypes.func.isRequired,
-  }
-
-  render() {
-    return <div style={{
-      padding: margins[2],
-      paddingRight: 0,
-      backgroundColor: colors.black,
-    }}>
-      <InputBlock label={"Layer ID"}>
-        <StringInput
-          value={this.props.id}
-          onChange={this.props.onIdChange}
-        />
-      </InputBlock>
-      <InputBlock label={"Layer Type"}>
-        <SelectInput
-          options={[
-            ['background', 'Background'],
-            ['fill', 'Fill'],
-            ['line', 'Line'],
-            ['symbol', 'Symbol'],
-            ['raster', 'Raster'],
-            ['circle', 'Circle'],
-            ['fill-extrusion', 'Fill Extrusion'],
-          ]}
-          onChange={this.props.onTypeChange}
-          value={this.props.type}
-        />
-      </InputBlock>
-    </div>
-  }
-}
-
-export default LayerSettings

src/components/layers/SourceEditor.jsx

@@ -1,54 +0,0 @@
-import React from 'react'
-
-import PropertyGroup from '../fields/PropertyGroup'
-import input from '../../config/input.js'
-
-/** Choose tileset (source) and the source layer */
-export default class SourceEditor extends React.Component {
-	static propTypes = {
-		source: React.PropTypes.string.isRequired,
-		sourceLayer: React.PropTypes.string.isRequired,
-
-    onSourceChange: React.PropTypes.func.isRequired,
-    onSourceLayerChange: React.PropTypes.func.isRequired,
-
-    /** List of available sources in the style
-     * https://www.mapbox.com/mapbox-gl-style-spec/#root-sources */
-    sources: React.PropTypes.object.isRequired,
-  }
-
-  render() {
-		const options = Object.keys(this.props.sources).map(sourceId => {
-			return <option key={sourceId} value={sourceId}>{sourceId}</option>
-		})
-
-    const layerOptions = this.props.sources[this.props.source].map(vectorLayerId => {
-      const id = vectorLayerId
-			return <option key={id} value={id}>{id}</option>
-		})
-
-	  return <div>
-      <div style={input.property}>
-        <label style={input.label}>Source</label>
-        <select
-          style={input.select}
-          value={this.props.source}
-          onChange={(e) => this.onSourceChange(e.target.value)}
-        >
-          {options}
-        </select>
-      </div>
-	    <div style={input.property}>
-        <label style={input.label}>Source Layer</label>
-        <select
-          style={input.select}
-          value={this.props.sourceLayer}
-          onChange={(e) => this.onSourceLayerChange(e.target.value)}
-        >
-          {layerOptions}
-        </select>
-		  </div>
-		</div>
-
-	}
-}

src/components/map/Map.jsx

@@ -1,20 +0,0 @@
-import React from 'react'
-
-export default class Map extends React.Component {
-  static propTypes = {
-    mapStyle: React.PropTypes.object.isRequired,
-    accessToken: React.PropTypes.string,
-  }
-
-  render() {
-    return <div
-    ref={x => this.container = x}
-    style={{
-      position: "fixed",
-      top: 0,
-      bottom: 0,
-      height: "100%",
-      width: "100%",
-    }}></div>
-  }
-}

src/components/map/MapboxGlMap.jsx

@@ -1,42 +0,0 @@
-import React from 'react'
-import MapboxGl from 'mapbox-gl'
-import validateColor from 'mapbox-gl-style-spec/lib/validate/validate_color'
-
-import Map from './Map.jsx'
-import style from '../../libs/style.js'
-
-export default class MapboxGlMap extends Map {
-  static propTypes = {
-    onMapLoaded: React.PropTypes.func,
-  }
-
-  static defaultProps = {
-    onMapLoaded: () => {}
-  }
-
-  constructor(props) {
-    super(props)
-    this.state = { map: null }
-  }
-  componentWillReceiveProps(nextProps) {
-    if(!this.state.map) return
-
-    //Mapbox GL now does diffing natively so we don't need to calculate
-    //the necessary operations ourselves!
-    this.state.map.setStyle(nextProps.mapStyle, { diff: true})
-  }
-
-  componentDidMount() {
-    MapboxGl.accessToken = this.props.accessToken
-
-    const map = new MapboxGl.Map({
-      container: this.container,
-      style: this.props.mapStyle,
-    });
-
-    map.on("style.load", (...args) => {
-      this.props.onMapLoaded(map)
-      this.setState({ map });
-    });
-  }
-}

src/components/map/OpenLayers3Map.jsx

@@ -1,68 +0,0 @@
-import React from 'react'
-import Map from './Map'
-import style from '../../libs/style.js'
-
-class OpenLayers3Map extends Map {
-  constructor(props) {
-    super(props)
-  }
-
-  componentWillReceiveProps(nextProps) {
-    require.ensure(["openlayers", "ol-mapbox-style"], ()=> {
-      const ol = require('openlayers')
-      const olms = require('ol-mapbox-style')
-      const jsonStyle = nextProps.mapStyle
-      const styleFunc = olms.getStyleFunction(jsonStyle, 'openmaptiles', this.resolutions)
-      console.log('New style babee')
-
-      const layer = this.layer
-      layer.setStyle(styleFunc)
-      //NOTE: We need to mark the source as changed in order
-      //to trigger a rerender
-      layer.getSource().changed()
-
-      this.state.map.render()
-    })
-  }
-
-  componentDidMount() {
-    //Load OpenLayers dynamically once we need it
-    //TODO: Make this more convenient
-    require.ensure(["openlayers", "ol-mapbox-style"], ()=> {
-      console.log('Loaded OpenLayers3 renderer')
-
-      const ol = require('openlayers')
-      const olms = require('ol-mapbox-style')
-
-      const tilegrid = ol.tilegrid.createXYZ({tileSize: 512, maxZoom: 22})
-      this.resolutions = tilegrid.getResolutions()
-      this.layer = new ol.layer.VectorTile({
-        source: new ol.source.VectorTile({
-          attributions: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>',
-          format: new ol.format.MVT(),
-          tileGrid: tilegrid,
-          tilePixelRatio: 8,
-          url: 'https://free-0.tilehosting.com/data/v3/{z}/{x}/{y}.pbf?key=tXiQqN3lIgskyDErJCeY'
-        })
-      })
-
-      const jsonStyle = this.props.mapStyle
-      const styleFunc = olms.getStyleFunction(jsonStyle, 'openmaptiles', this.resolutions)
-      this.layer.setStyle(styleFunc)
-
-      const map = new ol.Map({
-        target: this.container,
-        layers: [this.layer],
-        view: new ol.View({
-          center: jsonStyle.center,
-          zoom: 2,
-          //zoom: jsonStyle.zoom,
-        })
-      })
-      map.addControl(new ol.control.Zoom());
-      this.setState({ map });
-    })
-  }
-}
-
-export default OpenLayers3Map

src/components/modals/Modal.jsx

@@ -1,49 +0,0 @@
-import React from 'react'
-
-import CloseIcon from 'react-icons/lib/md/close'
-
-import Overlay from './Overlay'
-import colors from '../../config/colors'
-import { margins, fontSizes } from '../../config/scales'
-
-class Modal extends React.Component {
-  static propTypes = {
-    isOpen: React.PropTypes.bool.isRequired,
-    title: React.PropTypes.string.isRequired,
-    onOpenToggle: React.PropTypes.func.isRequired,
-  }
-
-  render() {
-    return <Overlay isOpen={this.props.isOpen}>
-      <div style={{
-        minWidth: 350,
-        maxWidth: 600,
-        backgroundColor: colors.black,
-        boxShadow: '0px 0px 5px 0px rgba(0,0,0,0.3)',
-      }}>
-        <div style={{
-          backgroundColor: colors.gray,
-          display: 'flex',
-          flexDirection: 'row',
-          padding: margins[2],
-          fontSize: fontSizes[4],
-        }}>
-          {this.props.title}
-          <span style={{flexGrow: 1}} />
-          <a
-            onClick={() => this.props.onOpenToggle(false)}
-            style={{ cursor: 'pointer' }} >
-            <CloseIcon />
-          </a>
-        </div>
-        <div style={{
-          padding: margins[2],
-        }}>
-          {this.props.children}
-        </div>
-      </div>
-    </Overlay>
-  }
-}
-
-export default Modal

src/components/modals/OpenModal.jsx

@@ -1,136 +0,0 @@
-import React from 'react'
-import Modal from './Modal'
-import Heading from '../Heading'
-import Button from '../Button'
-import Paragraph from '../Paragraph'
-import FileReaderInput from 'react-file-reader-input'
-import request from 'request'
-
-import FileUploadIcon from 'react-icons/lib/md/file-upload'
-import AddIcon from 'react-icons/lib/md/add-circle-outline'
-
-import style from '../../libs/style.js'
-import colors from '../../config/colors'
-import { margins, fontSizes } from '../../config/scales'
-import publicStyles from '../../config/styles.json'
-
-class PublicStyle extends React.Component {
-  static propTypes = {
-    url: React.PropTypes.string.isRequired,
-    thumbnailUrl: React.PropTypes.string.isRequired,
-    title: React.PropTypes.string.isRequired,
-    onSelect: React.PropTypes.func.isRequired,
-  }
-
-  render() {
-    return <div style={{
-        verticalAlign: 'top',
-        marginTop: margins[2],
-        marginRight: margins[2],
-        backgroundColor: colors.gray,
-        display: 'inline-block',
-        width: 180,
-        fontSize: fontSizes[4],
-        color: colors.lowgray,
-    }}>
-      <Button
-        onClick={() => this.props.onSelect(this.props.url)}
-        style={{
-          backgroundColor: 'transparent',
-          padding: margins[2],
-          display: 'block',
-        }}
-      >
-        <div style={{
-          display: 'flex',
-          flexDirection: 'row',
-        }}>
-          <span style={{fontWeight: 700}}>{this.props.title}</span>
-          <span style={{flexGrow: 1}} />
-          <AddIcon />
-        </div>
-        <img
-          style={{
-            display: 'block',
-            marginTop: margins[1],
-            maxWidth: '100%',
-          }}
-          src={this.props.thumbnailUrl}
-          alt={this.props.title}
-        />
-      </Button>
-    </div>
-  }
-}
-
-class OpenModal extends React.Component {
-  static propTypes = {
-    isOpen: React.PropTypes.bool.isRequired,
-    onOpenToggle: React.PropTypes.func.isRequired,
-    onStyleOpen: React.PropTypes.func.isRequired,
-  }
-
-  onStyleSelect(styleUrl) {
-    request({
-      url: styleUrl,
-      withCredentials: false,
-    }, (error, response, body) => {
-        if (!error && response.statusCode == 200) {
-          const mapStyle = style.ensureMetadataExists(JSON.parse(body))
-          console.log('Loaded style ', mapStyle.id)
-          this.props.onStyleOpen(mapStyle)
-        } else {
-          console.warn('Could not open the style URL', styleUrl)
-        }
-    })
-  }
-
-  onUpload(_, files) {
-    const [e, file] = files[0];
-    const reader = new FileReader();
-    reader.readAsText(file, "UTF-8");
-    reader.onload = e => {
-      let mapStyle = JSON.parse(e.target.result)
-      mapStyle = style.ensureMetadataExists(mapStyle)
-      this.props.onStyleOpen(mapStyle);
-    }
-    reader.onerror = e => console.log(e.target);
-  }
-
-  render() {
-    const styleOptions = publicStyles.map(style => {
-      return <PublicStyle
-        key={style.id}
-        url={style.url}
-        title={style.title}
-        thumbnailUrl={style.thumbnail}
-        onSelect={this.onStyleSelect.bind(this)}
-      />
-    })
-
-    return <Modal
-      isOpen={this.props.isOpen}
-      onOpenToggle={this.props.onOpenToggle}
-      title={'Open Style'}
-    >
-      <Heading level={4}>Upload Style</Heading>
-      <Paragraph>
-        Upload a JSON style from your computer.
-      </Paragraph>
-      <FileReaderInput onChange={this.onUpload.bind(this)}>
-        <Button>
-          <FileUploadIcon />
-          Upload
-        </Button>
-      </FileReaderInput>
-
-      <Heading level={4}>Gallery Styles</Heading>
-      <Paragraph>
-        Open one of the publicly available styles to start from.
-      </Paragraph>
-      {styleOptions}
-    </Modal>
-  }
-}
-
-export default OpenModal

src/components/modals/Overlay.jsx

@@ -1,53 +0,0 @@
-import React from 'react'
-
-class ViewportOverlay extends React.Component {
-  static propTypes = {
-    style: React.PropTypes.object
-  }
-
-  render() {
-    const overlayStyle = {
-      position: 'fixed',
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-      zIndex: 2,
-      opacity: 0.875,
-      backgroundColor: 'rgb(28, 31, 36)',
-      ...this.props.style
-    }
-
-    return <div style={overlayStyle} />
-  }
-}
-
-class Overlay extends React.Component {
-  static propTypes = {
-    isOpen: React.PropTypes.bool.isRequired,
-    children: React.PropTypes.element.isRequired
-  }
-
-  render() {
-    return <div style={{
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-      position: 'fixed',
-      display: this.props.isOpen ? 'flex' : 'none',
-      flexDirection: 'column',
-      alignItems: 'center',
-      justifyContent: 'center'
-    }}>
-      <ViewportOverlay />
-      <div style={{
-        zIndex: 3,
-      }}>
-      {this.props.children}
-      </div>
-    </div>
-  }
-}
-
-export default Overlay

src/components/modals/SettingsModal.jsx

@@ -1,85 +0,0 @@
-import React from 'react'
-
-import InputBlock from '../inputs/InputBlock'
-import StringInput from '../inputs/StringInput'
-import SelectInput from '../inputs/SelectInput'
-import Modal from './Modal'
-import colors from '../../config/colors'
-
-class SettingsModal extends React.Component {
-  static propTypes = {
-    mapStyle: React.PropTypes.object.isRequired,
-    onStyleChanged: React.PropTypes.func.isRequired,
-    isOpen: React.PropTypes.bool.isRequired,
-    onOpenToggle: React.PropTypes.func.isRequired,
-  }
-
-  constructor(props) {
-    super(props);
-  }
-
-  onChange(property, e) {
-    const changedStyle = this.props.mapStyle.set(property, e.target.value)
-    this.props.onStyleChanged(changedStyle)
-  }
-
-  onRendererChange(renderer) {
-    const changedStyle = {
-      ...this.props.mapStyle,
-      metadata: {
-        ...this.props.mapStyle.metadata,
-        'maputnik:renderer': renderer,
-      }
-    }
-    this.props.onStyleChanged(changedStyle)
-  }
-
-  render() {
-    const inputProps = { }
-    return <Modal
-      isOpen={this.props.isOpen}
-      onOpenToggle={this.props.onOpenToggle}
-      title={'StyleSettings'}
-    >
-      <InputBlock label={"Name"}>
-        <StringInput {...inputProps}
-          value={this.props.mapStyle.name}
-          onChange={this.onChange.bind(this, "name")}
-        />
-      </InputBlock>
-      <InputBlock label={"Owner"}>
-        <StringInput {...inputProps}
-          value={this.props.mapStyle.owner}
-          onChange={this.onChange.bind(this, "owner")}
-        />
-      </InputBlock>
-      <InputBlock label={"Sprite URL"}>
-        <StringInput {...inputProps}
-          value={this.props.mapStyle.sprite}
-          onChange={this.onChange.bind(this, "sprite")}
-        />
-      </InputBlock>
-
-      <InputBlock label={"Glyphs URL"}>
-        <StringInput {...inputProps}
-          value={this.props.mapStyle.glyphs}
-          onChange={this.onChange.bind(this, "glyphs")}
-        />
-      </InputBlock>
-
-
-      <InputBlock label={"Style Renderer"}>
-        <SelectInput {...inputProps}
-          options={[
-            ['mbgljs', 'MapboxGL JS'],
-            ['ol3', 'Open Layers 3']
-          ]}
-          value={(this.props.mapStyle.metadata || {})['maputnik:renderer'] || 'mbgljs'}
-          onChange={this.onRendererChange.bind(this)}
-        />
-      </InputBlock>
-    </Modal>
-  }
-}
-
-export default SettingsModal

src/components/modals/SourcesModal.jsx

@@ -1,242 +0,0 @@
-import React from 'react'
-import Modal from './Modal'
-import Heading from '../Heading'
-import Button from '../Button'
-import Paragraph from '../Paragraph'
-import InputBlock from '../inputs/InputBlock'
-import StringInput from '../inputs/StringInput'
-import SelectInput from '../inputs/SelectInput'
-import SourceTypeEditor from '../sources/SourceTypeEditor'
-
-import style from '../../libs/style'
-import publicSources from '../../config/tilesets.json'
-import colors from '../../config/colors'
-import { margins, fontSizes } from '../../config/scales'
-
-import AddIcon from 'react-icons/lib/md/add-circle-outline'
-import DeleteIcon from 'react-icons/lib/md/delete'
-
-class PublicSource extends React.Component {
-  static propTypes = {
-    id: React.PropTypes.string.isRequired,
-    type: React.PropTypes.string.isRequired,
-    title: React.PropTypes.string.isRequired,
-    onSelect: React.PropTypes.func.isRequired,
-  }
-
-  render() {
-    return <div style={{
-        verticalAlign: 'top',
-        marginTop: margins[2],
-        marginRight: margins[2],
-        backgroundColor: colors.gray,
-        display: 'inline-block',
-        width: 240,
-        fontSize: fontSizes[4],
-        color: colors.lowgray,
-    }}>
-      <Button
-        onClick={() => this.props.onSelect(this.props.id)}
-        style={{
-          backgroundColor: 'transparent',
-          padding: margins[2],
-          display: 'flex',
-          flexDirection: 'row',
-        }}
-      >
-        <div>
-          <span style={{fontWeight: 700}}>{this.props.title}</span>
-          <br/>
-          <span style={{fontSize: fontSizes[5]}}>#{this.props.id}</span>
-        </div>
-        <span style={{flexGrow: 1}} />
-        <AddIcon />
-      </Button>
-    </div>
-  }
-}
-
-function editorMode(source) {
-  if(source.type === 'geojson') return ' geojson'
-  if(source.type === 'vector' && source.tiles) {
-    return 'tilexyz'
-  }
-  return 'tilejson'
-}
-
-class SourceEditorLayout extends React.Component {
-  static propTypes = {
-    sourceId: React.PropTypes.string.isRequired,
-    source: React.PropTypes.object.isRequired,
-    onSourceDelete: React.PropTypes.func.isRequired,
-    onSourceChange: React.PropTypes.func.isRequired,
-  }
-
-  render() {
-    const inputProps = { }
-    return <div style={{
-    }}>
-      <div style={{
-        backgroundColor: colors.gray,
-        color: colors.lowgray,
-        padding: margins[1],
-        display: 'flex',
-        fontSize: fontSizes[4],
-        flexDirection: 'row',
-      }}>
-        <span style={{fontWeight: 700, fontSize: fontSizes[4], lineHeight: 2}}>#{this.props.sourceId}</span>
-        <span style={{flexGrow: 1}} />
-        <Button
-          onClick={this.props.onSourceDelete}
-          style={{backgroundColor: 'transparent'}}
-        >
-          <DeleteIcon />
-        </Button>
-      </div>
-      <div style={{
-        borderColor: colors.gray,
-        borderWidth: 2,
-        borderStyle: 'solid',
-        padding: margins[1],
-      }}>
-        <SourceTypeEditor
-          onChange={this.props.onSourceChange}
-          mode={editorMode(this.props.source)}
-          source={this.props.source}
-        />
-      </div>
-    </div>
-  }
-}
-
-class AddSource extends React.Component {
-  static propTypes = {
-    onSourceAdd: React.PropTypes.func.isRequired,
-  }
-
-  constructor(props) {
-    super(props)
-    this.state = {
-      mode: 'tilejson',
-      source: {
-        id: style.generateId(),
-      }
-    }
-  }
-
-  onSourceIdChange(newId) {
-    this.setState({
-      source: {
-        ...this.state.source,
-        id: newId,
-      }
-    })
-  }
-
-  onSourceChange(source) {
-    this.setState({
-      source: source
-    })
-  }
-
-  render() {
-    return <div>
-      <InputBlock label={"Source ID"}>
-        <StringInput
-          value={this.state.source.id}
-          onChange={this.onSourceIdChange.bind(this)}
-        />
-      </InputBlock>
-      <InputBlock label={"Source Type"}>
-        <SelectInput
-          options={[
-            ['geojson', 'GeoJSON'],
-            ['tilejson', 'Vector (TileJSON URL)'],
-            ['tilexyz', 'Vector (XYZ URLs)'],
-          ]}
-          onChange={v => this.setState({mode: v})}
-          value={this.state.mode}
-        />
-      </InputBlock>
-      <SourceTypeEditor
-        onChange={this.onSourceChange.bind(this)}
-        mode={this.state.mode}
-        source={this.state.source}
-      />
-      <Button onClick={() => this.onSourceAdd(this.state.source)}>
-        Add Source
-      </Button>
-    </div>
-  }
-}
-
-class SourcesModal extends React.Component {
-  static propTypes = {
-    mapStyle: React.PropTypes.object.isRequired,
-    isOpen: React.PropTypes.bool.isRequired,
-    onOpenToggle: React.PropTypes.func.isRequired,
-    onStyleChanged: React.PropTypes.func.isRequired,
-  }
-
-  onSourceAdd(source) {
-    const changedSources = {
-      ...this.props.mapStyle.sources,
-      [source.id]: source
-    }
-
-    const changedStyle = {
-      ...this.props.mapStyle,
-      sources: changedSources
-    }
-
-    this.props.onStyleChanged(changedStyle)
-  }
-
-  render() {
-    const activeSources = Object.keys(this.props.mapStyle.sources).map(sourceId => {
-      const source = this.props.mapStyle.sources[sourceId]
-      return <SourceEditorLayout
-        key={sourceId}
-        sourceId={sourceId}
-        source={source}
-      />
-    })
-
-    const tilesetOptions = publicSources.filter(source => !(source.id in this.props.mapStyle.sources)).map(source => {
-      return <PublicSource
-        key={source.id}
-        id={source.id}
-        type={source.type}
-        title={source.title}
-        description={source.description}
-        onSelect={() => this.onSourceAdd(source)}
-      />
-    })
-
-    const inputProps = { }
-    return <Modal
-      isOpen={this.props.isOpen}
-      onOpenToggle={this.props.onOpenToggle}
-      title={'Sources'}
-    >
-      <Heading level={4}>Active Sources</Heading>
-      {activeSources}
-
-      <Heading level={4}>Add New Source</Heading>
-      <div style={{maxWidth: 300}}>
-        <p style={{color: colors.lowgray, fontSize: fontSizes[5]}}>Add a new source to your style. You can only choose the source type and id at creation time!</p>
-        <AddSource onSourceAdd={this.onSourceAdd.bind(this)} />
-      </div>
-
-      <Heading level={4}>Choose Public Source</Heading>
-      <Paragraph>
-        Add one of the publicly availble sources to your style.
-      </Paragraph>
-      <div style={{maxwidth: 500}}>
-      {tilesetOptions}
-      </div>
-    </Modal>
-  }
-}
-
-export default SourcesModal

src/components/scrollbars.scss

@@ -1,12 +0,0 @@
-.darkScrollbar::-webkit-scrollbar {
-    background-color: #26282e;
-    width: 5px;
-}
-
-.darkScrollbar::-webkit-scrollbar-thumb {
-    border-radius: 6px;
-    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
-    background-color: #40444e;
-    padding-left: 2px;
-    padding-right: 2px;
-}

src/components/sources/SourceTypeEditor.jsx

@@ -1,93 +0,0 @@
-import React from 'react'
-import InputBlock from '../inputs/InputBlock'
-import StringInput from '../inputs/StringInput'
-
-class TileJSONSourceEditor extends React.Component {
-  static propTypes = {
-    url: React.PropTypes.string.isRequired,
-    onChange: React.PropTypes.func,
-  }
-
-  render() {
-    return <InputBlock label={"TileJSON URL"}>
-      <StringInput
-        value={this.props.url}
-        onChange={this.props.onChange}
-      />
-    </InputBlock>
-  }
-}
-
-class TileURLSourceEditor extends React.Component {
-  static propTypes = {
-    tiles: React.PropTypes.array.isRequired,
-    minZoom: React.PropTypes.number.isRequired,
-    maxZoom: React.PropTypes.number.isRequired,
-    onChange: React.PropTypes.func,
-  }
-
-  renderTileUrls() {
-    const prefix = ['1st', '2nd', '3rd', '4th', '5th', '6th', '7th']
-    return this.props.tiles.map((tileUrl, tileIndex) => {
-      return <InputBlock key={tileIndex} label={prefix[tileIndex] + " Tile URL"}>
-        <StringInput
-          value={tileUrl}
-        />
-      </InputBlock>
-    })
-  }
-
-  render() {
-    console.log(this.props.tiles)
-    return <div>
-      {this.renderTileUrls()}
-      <InputBlock label={"Min Zoom"}>
-        <StringInput
-          value={this.props.minZoom}
-        />
-      </InputBlock>
-      <InputBlock label={"Max Zoom"}>
-        <StringInput
-          value={this.props.maxZoom}
-        />
-      </InputBlock>
-  </div>
-
-  }
-}
-
-class GeoJSONSourceEditor extends React.Component {
-  static propTypes = {
-    data: React.PropTypes.string.isRequired,
-    onChange: React.PropTypes.func,
-  }
-
-  render() {
-    return <InputBlock label={"GeoJSON Data"}>
-      <StringInput
-        value={this.props.data}
-        onChange={this.props.onChange}
-      />
-    </InputBlock>
-  }
-}
-
-class SourceTypeEditor extends React.Component {
-  static propTypes = {
-    mode: React.PropTypes.string.isRequired,
-    source: React.PropTypes.object.isRequired,
-    onChange: React.PropTypes.func.isRequired,
-  }
-
-  render() {
-    const source = this.props.source
-    switch(this.props.mode) {
-      case 'geojson': return <GeoJSONSourceEditor data={source.data || 'http://localhost:3000/mygeojson.json'} />
-      case 'tilejson': return <TileJSONSourceEditor url={source.url || 'http://localhost:3000/tiles.json'}/>
-      case 'tilexyz': return <TileURLSourceEditor tiles={source.tiles || ['http://localhost:3000/{x}/{y}/{z}.pbf']} minZoom={source.minZoom || 0} maxZoom={source.maxZoom || 14}/>
-      default: return null
-    }
-  }
-}
-
-export default SourceTypeEditor

src/config/colors.js

@@ -1,29 +0,0 @@
-const baseColors = {
-  black: '#1c1f24',
-  gray: '#26282e',
-  midgray: '#36383e',
-  lowgray: '#8e8e8e',
-
-  white: '#fff',
-  blue: '#00d9f7',
-  green: '#B4C7AD',
-  orange: '#fb3',
-  red: '#f04',
-}
-
-const themeColors = {
-  primary: baseColors.gray,
-  secondary: baseColors.midgray,
-  default: baseColors.gray,
-  info: baseColors.blue,
-  success: baseColors.green,
-  warning: baseColors.orange,
-  error: baseColors.red
-}
-
-const colors = {
-  ...baseColors,
-  ...themeColors
-}
-
-export default colors

src/config/input.js

@@ -1,52 +0,0 @@
-import colors from './colors'
-import { margins, fontSizes } from './scales'
-
-const base = {
-  display: 'inline-block',
-  fontSize: fontSizes[5],
-  lineHeight: 2,
-  paddingLeft: 5,
-  paddingRight: 5,
-}
-
-const label = {
-  ...base,
-  width: '40%',
-  color: colors.lowgray,
-  userSelect: 'none',
-}
-
-const property = {
-  marginTop: margins[2],
-  marginBottom: margins[2],
-}
-
-const input = {
-  ...base,
-  border: 'none',
-  width: '47%',
-  backgroundColor: colors.gray,
-  color: colors.lowgray,
-}
-
-const checkbox = {
-  ...base,
-  border: '1px solid rgb(36, 36, 36)',
-  backgroundColor: colors.gray,
-  color: colors.lowgray,
-}
-
-const select = {
-  ...input,
-  width: '51%',
-  height: '2.3em',
-}
-
-export default {
-  base,
-  label,
-  select,
-  input,
-  property,
-  checkbox,
-}

src/config/layout.json

@@ -1,172 +0,0 @@
-{
-    "line": {
-      "groups": [
-        {
-          "title": "Settings",
-          "type": "settings"
-        },
-        {
-          "title": "Source",
-          "type": "source"
-        },
-        {
-          "title": "Paint",
-          "type": "properties",
-          "fields": [
-            "line-opacity",
-            "line-color",
-            "line-width",
-            "line-offset",
-            "line-blur",
-            "line-pattern"
-          ]
-        },
-        {
-          "title": "Secondary",
-          "type": "properties",
-          "fields": [
-            "line-translate",
-            "line-translate-anchor",
-            "line-cap",
-            "line-join",
-            "line-miter-limit",
-            "line-round-limit",
-            "line-dasharray",
-            "line-gap-width"
-          ]
-        },
-        {
-          "title": "JSON",
-          "type": "jsoneditor"
-        }
-      ]
-    },
-    "background": {
-      "groups": [
-        {
-          "title": "Settings",
-          "type": "settings"
-        },
-        {
-          "title": "Source",
-          "type": "source"
-        },
-        {
-          "title": "Basic",
-          "type": "properties",
-          "fields": [
-            "background-color",
-            "background-pattern",
-            "background-opacity"
-          ]
-        },
-        {
-          "title": "JSON",
-          "type": "jsoneditor"
-        }
-      ]
-    },
-    "fill": {
-      "groups": [
-        {
-          "title": "Settings",
-          "type": "settings"
-        },
-        {
-          "title": "Source",
-          "type": "source"
-        },
-        {
-          "title": "Basic",
-          "type": "properties",
-          "fields": [
-            "fill-opacity",
-            "fill-color",
-            "fill-antialias",
-            "fill-outline-color",
-            "fill-pattern",
-            "fill-translate",
-            "fill-translate-anchor"
-          ]
-        },
-        {
-          "title": "JSON",
-          "type": "jsoneditor"
-        }
-      ]
-    },
-    "symbol": {
-      "groups": [
-        {
-          "title": "Settings",
-          "type": "settings"
-        },
-        {
-          "title": "Source",
-          "type": "source"
-        },
-        {
-          "title": "Basic",
-          "type": "properties",
-          "fields": [
-            "text-field",
-            "text-font",
-            "text-size",
-            "text-line-height"
-          ]
-        },
-        {
-          "title": "Placement",
-          "type": "properties",
-          "fields": [
-            "symbol-placement",
-            "symbol-spacing",
-            "symbol-avoid-edges",
-            "text-padding",
-            "text-allow-overlap",
-            "text-ignore-placement"
-          ]
-        },
-        {
-          "title": "Layout",
-          "type": "properties",
-          "fields": [
-            "text-pitch-alignment",
-            "text-rotation-alignment",
-            "text-max-width",
-            "text-letter-spacing",
-            "text-justify",
-            "text-anchor",
-            "text-max-angle",
-            "text-rotate",
-            "text-keep-upright",
-            "text-transform",
-            "text-offset",
-            "text-optional"
-          ]
-        },
-        {
-          "title": "Icon",
-          "type": "properties",
-          "fields": [
-            "icon-allow-overlap",
-            "icon-ignore-placement",
-            "icon-optional",
-            "icon-rotation-alignment",
-            "icon-size",
-            "icon-text-fit",
-            "icon-text-fit-padding",
-            "icon-image",
-            "icon-rotate",
-            "icon-padding",
-            "icon-keep-upright",
-            "icon-offset"
-          ]
-        },
-        {
-          "title": "JSON",
-          "type": "jsoneditor"
-        }
-      ]
-    }
-}

src/config/scales.js

@@ -1,2 +0,0 @@
-export const margins = [3, 5, 10, 30, 40]
-export const fontSizes = [26, 20, 16, 14, 12, 10]

src/config/styles.json

@@ -1,38 +0,0 @@
-[
-  {
-    "id": "klokantech-basic",
-    "title": "Klokantech Basic",
-    "url": "https://rawgit.com/openmaptiles/klokantech-basic-gl-style/gh-pages/style-cdn.json",
-    "thumbnail": "https://camo.githubusercontent.com/5cf548fdb9fc606f4a452d14fd2a7a959155fd40/68747470733a2f2f6170692e6d6170626f782e636f6d2f7374796c65732f76312f6d6f7267656e6b61666665652f63697578757465726630316135326971716f366b6f6c776b312f7374617469632f382e3534303538372c34372e3337303535352c31342e30382c302e30302c302e30302f363030783430303f6163636573735f746f6b656e3d706b2e65794a31496a6f69625739795a3256756132466d5a6d566c4969776959534936496a497a636d4e304e6c6b6966512e304c52544e6743632d656e76743964354d7a52373577"
-  },
-  {
-    "id": "dark-matter",
-    "title": "Dark Matter",
-    "url": "https://rawgit.com/openmaptiles/dark-matter-gl-style/gh-pages/style-cdn.json",
-    "thumbnail": "https://camo.githubusercontent.com/b73c515d633d2be7368e8e29e3c23e14117fd21b/68747470733a2f2f6170692e6d6170626f782e636f6d2f7374796c65732f76312f6d6f7267656e6b61666665652f6369757878356e37683031396c326870626e396c6970726d6e2f7374617469632f382e3631393138342c34372e3333363230332c392e30372c302e30302c302e30302f363030783430303f6163636573735f746f6b656e3d706b2e65794a31496a6f69625739795a3256756132466d5a6d566c4969776959534936496a497a636d4e304e6c6b6966512e304c52544e6743632d656e76743964354d7a52373577"
-  },
-  {
-    "id": "positron",
-    "title": "Positron",
-    "url": "https://rawgit.com/openmaptiles/positron-gl-style/gh-pages/style-cdn.json",
-    "thumbnail": "https://camo.githubusercontent.com/0dd866e3fa7b21ada87da69082eac6801e16ec99/68747470733a2f2f6170692e6d6170626f782e636f6d2f7374796c65732f76312f6d6f7267656e6b61666665652f63697578756e37736530313976326a6c387162326a743374662f7374617469632f382e3631393138342c34372e3333363230332c392e30372c302e30302c302e30302f363030783430303f6163636573735f746f6b656e3d706b2e65794a31496a6f69625739795a3256756132466d5a6d566c4969776959534936496a497a636d4e304e6c6b6966512e304c52544e6743632d656e76743964354d7a52373577"
-  },
-  {
-    "id": "osm-bright",
-    "title": "OSM Bright",
-    "url": "https://rawgit.com/openmaptiles/osm-bright-gl-style/gh-pages/style-cdn.json",
-    "thumbnail": "https://camo.githubusercontent.com/a15e23ab59202c56502e57cde963cb7772ed3bb1/68747470733a2f2f6170692e6d6170626f782e636f6d2f7374796c65732f76312f6f70656e6d617074696c65732f63697736637a7a326e30303234326b6d673668773230626f782f7374617469632f382e3534303538372c34372e3337303535352c31342e30382c302e30302c302e30302f363030783430303f6163636573735f746f6b656e3d706b2e65794a31496a6f696233426c626d3168634852706247567a4969776959534936496d4e70646e593365544a785a7a41774d474d796233427064574a6d616a63784e7a636966512e685031427863786c644968616b4d6350534a4c513151"
-  },
-  {
-    "id": "fiord-color",
-    "title": "Fiord Color",
-    "url": "https://rawgit.com/openmaptiles/fiord-color-gl-style/gh-pages/style-cdn.json",
-    "thumbnail": "https://camo.githubusercontent.com/605f2edc30e413b37d16a6ca1d500f265725d76d/68747470733a2f2f6170692e6d6170626f782e636f6d2f7374796c65732f76312f6f70656e6d617074696c65732f6369776775693378353030317732706e7668633063327767302f7374617469632f31302e3938373235382c34362e3435333135302c332e30322c302e30302c302e30302f363030783430303f6163636573735f746f6b656e3d706b2e65794a31496a6f696233426c626d3168634852706247567a4969776959534936496d4e70646e593365544a785a7a41774d474d796233427064574a6d616a63784e7a636966512e685031427863786c644968616b4d6350534a4c513151"
-  },
-  {
-    "id": "toner",
-    "title": "Toner",
-    "url": "https://rawgit.com/openmaptiles/toner-color-gl-style/gh-pages/style-cdn.json",
-    "thumbnail": "https://cloud.githubusercontent.com/assets/1288339/21422755/86ebe96e-c839-11e6-8337-42742dfe34a2.png"
-  }
-]

src/config/theme.js

@@ -1,9 +0,0 @@
-import colors from './colors'
-import { margins, fontSizes } from './scales'
-
-const dark = {
-  color: colors.white,
-  fontFamily: 'Roboto, sans-serif',
-}
-
-export default dark

src/config/tilesets.json

@@ -1,30 +0,0 @@
-[
-  {
-    "id": "mapbox-streets",
-    "type": "vector",
-    "url": "mapbox://mapbox.mapbox-streets-v7",
-    "title": "Mapbox Streets"
-  },
-  {
-    "id": "tilezen",
-    "type": "vector",
-    "tiles": [
-      "http://tile.mapzen.com/mapzen/vector/v1/{layers}/{z}/{x}/{y}.pbf?api_key=mapzen-RVcyVL7"
-    ],
-    "minZoom": 0,
-    "maxZoom": 15,
-    "title": "Mapzen Vector Tile Service"
-  },
-  {
-    "id": "openmaptiles",
-    "type": "vector",
-    "url": "https://free.tilehosting.com/data/v3.json?key=25ItXg7aI5wurYDtttD",
-    "title": "OpenMapTiles CDN"
-  },
-  {
-    "id": "swissnames-landscape",
-    "type": "geojson",
-    "data": "http://swissnames.lukasmartinelli.ch/data/landscape.geojson",
-    "title": "Landscape Names GeoJSON"
-  }
-]

src/index.css

@@ -1,17 +0,0 @@
-@font-face {
-  font-family: 'Roboto';
-  src: url('./fonts/Roboto-Regular.ttf') format('truetype');
-  font-weight: normal;
-  font-style: normal;
-}
-
-.chrome-picker {
-  background-color: #1c1f24 !important;
-  font-family: inherit !important;
-}
-
-.chrome-picker input {
-  background-color: rgb(38, 40, 46) !important;
-  color: rgb(142, 142, 142) !important;
-  box-shadow: none !important;
-}

src/index.jsx

@@ -1,7 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-
-import './index.css'
-import App from './components/App';
-
-ReactDOM.render(<App/>, document.querySelector("#app"));

src/libs/apistore.js

@@ -1,41 +0,0 @@
-import request from 'request'
-import style from './style.js'
-
-export class ApiStyleStore {
-  supported(cb) {
-    request('http://localhost:8000/styles', (error, response, body) => {
-      cb(error === undefined)
-    })
-  }
-
-  latestStyle(cb) {
-    if(this.latestStyleId) {
-      request('http://localhost:8000/styles/' + this.latestStyleId, (error, response, body) => {
-        cb(JSON.parse(body))
-      })
-    } else {
-      request('http://localhost:8000/styles', (error, response, body) => {
-        if (!error && response.statusCode == 200) {
-          const styleIds = JSON.parse(body);
-          this.latestStyleId = styleIds[0];
-          request('http://localhost:8000/styles/' + this.latestStyleId, (error, response, body) => {
-            cb(style.fromJSON(JSON.parse(body)))
-          })
-        }
-      })
-    }
-  }
-
-  // Save current style replacing previous version
-  save(mapStyle) {
-    const id = mapStyle.get('id')
-    request.put({
-      url: 'http://localhost:8000/styles/' + id,
-      json: true,
-      body: style.toJSON(mapStyle)
-    }, (error, response, body) => {
-     console.log('Saved style');
-    })
-    return mapStyle
-  }
-}

src/libs/layerwatcher.js

@@ -1,58 +0,0 @@
-import throttle from 'lodash.throttle'
-
-/** Listens to map events to build up a store of available vector
- * layers contained in the tiles */
-export default class LayerWatcher {
-  constructor() {
-    this._sources = {}
-    this._vectorLayers = {}
-    this._map= null
-
-    // Since we scan over all features we want to avoid this as much as
-    // possible and only do it after a batch of data has loaded because
-    // we only care eventuall about knowing the fields in the vector layers
-    this.throttledAnalyzeVectorLayerFields = throttle(this.analyzeVectorLayerFields, 5000)
-  }
-
-  /** Set the map as soon as the map is initialized */
-  set map(m) {
-
-    this._map = m
-    //TODO: At some point we need to unsubscribe when new map is set
-    this._map.on('data', (e) => {
-      if(e.dataType !== 'tile') return
-
-      //NOTE: This heavily depends on the internal API of Mapbox GL
-      //so this breaks between Mapbox GL JS releases
-      this._sources[e.sourceId] = e.style.sourceCaches[e.sourceId]._source.vectorLayerIds
-      this.throttledAnalyzeVectorLayerFields()
-    })
-  }
-
-  analyzeVectorLayerFields() {
-    Object.keys(this._sources).forEach(sourceId => {
-      this._sources[sourceId].forEach(vectorLayerId => {
-        const knownProperties = this._vectorLayers[vectorLayerId] || {}
-        const params = { sourceLayer: vectorLayerId }
-        this._map.querySourceFeatures(sourceId, params).forEach(feature => {
-          Object.keys(feature.properties).forEach(propertyName => {
-            const knownPropertyValues = knownProperties[propertyName] || {}
-            knownPropertyValues[feature.properties[propertyName]] = {}
-            knownProperties[propertyName] = knownPropertyValues
-          })
-        })
-
-        this._vectorLayers[vectorLayerId] = knownProperties
-      })
-    })
-  }
-
-  /** Access all known sources and their vector tile ids */
-  get sources() {
-    return this._sources
-  }
-
-  get vectorLayers() {
-    return this._vectorLayers
-  }
-}

src/libs/style.js

@@ -1,45 +0,0 @@
-import React from 'react';
-import spec from 'mapbox-gl-style-spec/reference/latest.min.js'
-
-// Empty style is always used if no style could be restored or fetched
-const emptyStyle = ensureMetadataExists({
-  version: 8,
-  sources: {},
-  layers: [],
-})
-
-function generateId() {
-  return Math.random().toString(36).substr(2, 9)
-}
-
-function ensureHasId(style) {
-  if('id' in style) return style
-  style.id = generateId()
-  return style
-}
-
-function ensureHasTimestamp(style) {
-  if('created' in style) return style
-  style.created = new Date().toJSON()
-  return style
-}
-
-function ensureMetadataExists(style) {
-  return ensureHasId(ensureHasTimestamp(style))
-}
-
-function indexOfLayer(layers, layerId) {
-  for (let i = 0; i < layers.length; i++) {
-    if(layers[i].id === layerId) {
-      return i
-    }
-  }
-  return null
-}
-
-export default {
-  ensureMetadataExists,
-  emptyStyle,
-  indexOfLayer,
-  generateId,
-}

src/libs/stylestore.js

@@ -1,115 +0,0 @@
-import { colorizeLayers } from './style.js'
-import style from './style.js'
-import publicSources from '../config/styles.json'
-import request from 'request'
-
-const storagePrefix = "maputnik"
-const stylePrefix = 'style'
-const storageKeys = {
-  latest: [storagePrefix, 'latest_style'].join(':'),
-  accessToken: [storagePrefix, 'access_token'].join(':')
-}
-
-const defaultStyleUrl = publicSources[0].url
-
-// Fetch a default style via URL and return it or a fallback style via callback
-export function loadDefaultStyle(cb) {
-  console.log('Falling back to default style')
-  request({
-    url: defaultStyleUrl,
-    withCredentials: false,
-  }, (error, response, body) => {
-      if (!error && response.statusCode == 200) {
-        cb(style.ensureMetadataExists(JSON.parse(body)))
-      } else {
-        console.warn('Could not fetch default style', styleUrl)
-        cb(style.emptyStyle)
-      }
-  })
-}
-
-// Return style ids and dates of all styles stored in local storage
-function loadStoredStyles() {
-  const styles = []
-  for (let i = 0; i < window.localStorage.length; i++) {
-      const key = window.localStorage.key(i)
-      if(isStyleKey(key)) {
-        styles.push(fromKey(key))
-      }
-  }
-  return styles
-}
-
-function isStyleKey(key) {
-  const parts = key.split(":")
-  return parts.length == 3 && parts[0] === storagePrefix && parts[1] === stylePrefix
-}
-
-// Load style id from key
-function fromKey(key) {
-  if(!isStyleKey(key)) {
-    throw "Key is not a valid style key"
-  }
-
-  const parts = key.split(":")
-  const styleId = parts[2]
-  return styleId
-}
-
-// Calculate key that identifies the style with a version
-function styleKey(styleId) {
-  return [storagePrefix, stylePrefix, styleId].join(":")
-}
-
-// Store style independent settings
-export class SettingsStore {
-  get accessToken() {
-    const token = window.localStorage.getItem(storageKeys.accessToken)
-    return token ? token : ""
-  }
-  set accessToken(val) {
-    window.localStorage.setItem(storageKeys.accessToken, val)
-  }
-}
-
-// Manages many possible styles that are stored in the local storage
-export class StyleStore {
-  // Tile store will load all items from local storage and
-  // assume they do not change will working on it
-  constructor() {
-    this.mapStyles = loadStoredStyles()
-  }
-
-  supported(cb) {
-    cb(window.localStorage !== undefined)
-  }
-
-  // Delete entire style history
-  purge() {
-    for (let i = 0; i < window.localStorage.length; i++) {
-        const key = window.localStorage.key(i)
-        if(key.startsWith(storagePrefix)) {
-          window.localStorage.removeItem(key)
-        }
-    }
-  }
-
-  // Find the last edited style
-  latestStyle(cb) {
-    if(this.mapStyles.length === 0) return loadDefaultStyle(cb)
-    const styleId = window.localStorage.getItem(storageKeys.latest)
-    const styleItem = window.localStorage.getItem(styleKey(styleId))
-
-    if(styleItem) return cb(JSON.parse(styleItem))
-    loadDefaultStyle(cb)
-  }
-
-  // Save current style replacing previous version
-  save(mapStyle) {
-    mapStyle = style.ensureMetadataExists(mapStyle)
-    const key = styleKey(mapStyle.id)
-    window.localStorage.setItem(key, JSON.stringify(mapStyle))
-    window.localStorage.setItem(storageKeys.latest, mapStyle.id)
-    return mapStyle
-  }
-}

src/template.html

@@ -1,11 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title><%= htmlWebpackPlugin.options.title %></title>
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-</head>
-<body>
-  <div id="app">Loading...</div>
-</body>
-</html>

test/stylestore_test.js

@@ -1,16 +0,0 @@
-import { SettingsStore } from '../src/stylestore.js'
-import assert from 'assert'
-
-describe('SettingsStore', () => {
-  const store = new SettingsStore()
-
-	it('#get should return access token from local storage', () => {
-		window.localStorage.setItem('maputnik:access_token', 'OLD_TOKEN')
-		assert.equal(store.accessToken, 'OLD_TOKEN')
-	})
-
-	it('#set should set access token in local storage', () => {
-		store.accessToken = 'NEW_TOKEN'
-		assert.equal(window.localStorage.getItem('maputnik:access_token'), 'NEW_TOKEN')
-	})
-})