[+] feedback after clicking on new area; example site for testing;

.gitignore

@@ -63,4 +63,4 @@ lib
 
 # misc
 .DS_Store
-example/
+# example/

example/.babelrc

@@ -0,0 +1,15 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "useBuiltIns": "usage",
+        "corejs": "3.0.0"
+      }
+    ]
+  ],
+  "plugins": [
+    "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-proposal-class-properties"
+  ]
+}

example/.browserslistrc

@@ -0,0 +1,10 @@
+[production staging]
+>5%
+last 2 versions
+Firefox ESR
+not ie < 11
+
+[development]
+last 1 chrome version
+last 1 firefox version
+last 1 edge version

example/.eslintrc

@@ -0,0 +1,13 @@
+{
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module"
+  },
+  "rules": {
+    "semi": 2
+  }
+}

example/.gitignore

@@ -0,0 +1,14 @@
+# dependencies
+node_modules
+
+# production
+build
+
+# misc
+.DS_Store
+
+npm-debug.log
+yarn-error.log
+yarn.lock
+.yarnclean
+.vscode

example/.travis.yml

@@ -0,0 +1,5 @@
+language: node_js
+node_js:
+  - "lts/*"
+  - "node"
+script: npm run build

example/README.md

@@ -0,0 +1,32 @@
+# Webpack Frontend Starterkit
+
+[![Dependabot badge](https://flat.badgen.net/dependabot/wbkd/webpack-starter?icon=dependabot)](https://dependabot.com/)
+
+A lightweight foundation for your next webpack based frontend project.
+
+
+### Installation
+
+```
+npm install
+```
+
+### Start Dev Server
+
+```
+npm start
+```
+
+### Build Prod Version
+
+```
+npm run build
+```
+
+### Features:
+
+* ES6 Support via [babel](https://babeljs.io/) (v7)
+* SASS Support via [sass-loader](https://github.com/jtangelder/sass-loader)
+* Linting via [eslint-loader](https://github.com/MoOx/eslint-loader)
+
+When you run `npm run build` we use the [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) to move the css to a separate file. The css file gets included in the head of the `index.html`.

example/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "webpack-starter",
+  "version": "1.0.0",
+  "description": "A light foundation for your next frontend project based on webpack.",
+  "scripts": {
+    "build": "NODE_ENV=production webpack --config webpack/webpack.config.prod.js  --colors",
+    "start": "webpack-dev-server --open --config webpack/webpack.config.dev.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/wbkd/webpack-starter.git"
+  },
+  "keywords": [
+    "webpack",
+    "startkit",
+    "frontend",
+    "es6",
+    "javascript",
+    "webdev"
+  ],
+  "author": "webkid.io",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/wbkd/webpack-starter/issues"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.6.4",
+    "@babel/plugin-proposal-class-properties": "^7.5.5",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+    "@babel/preset-env": "^7.6.3",
+    "babel-loader": "^8.0.6",
+    "clean-webpack-plugin": "^3.0.0",
+    "copy-webpack-plugin": "^5.0.4",
+    "css-loader": "^3.2.0",
+    "eslint": "^6.5.1",
+    "eslint-loader": "^3.0.2",
+    "file-loader": "^4.2.0",
+    "html-webpack-plugin": "^4.0.0-beta.8",
+    "mini-css-extract-plugin": "^0.8.0",
+    "node-sass": "^4.12.0",
+    "sass-loader": "^8.0.0",
+    "style-loader": "^1.0.0",
+    "webpack": "^4.41.2",
+    "webpack-cli": "^3.3.9",
+    "webpack-dev-server": "^3.8.2",
+    "webpack-merge": "^4.2.2"
+  },
+  "dependencies": {
+    "@babel/polyfill": "^7.6.0",
+    "@mapbox/mapbox-gl-draw": "^1.1.2",
+    "core-js": "^3.3.2",
+    "mapbox-gl": "^1.4.1",
+    "mapbox-gl-draw-shape-builder": "link:.."
+  }
+}

example/src/data/data.json

@@ -0,0 +1,160 @@
+{
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "properties": {},
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [
+          [
+            [
+              -122.42113805424486,
+              37.77338298377752
+            ],
+            [
+              -122.4210736812288,
+              37.77213209981771
+            ],
+            [
+              -122.41907811772174,
+              37.77208969660036
+            ],
+            [
+              -122.4190995753936,
+              37.77327697748309
+            ],
+            [
+              -122.42113805424486,
+              37.77338298377752
+            ]
+          ]
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {},
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [
+          [
+            [
+              124.83565092086792,
+              1.4731321659327465
+            ],
+            [
+              124.83809709548949,
+              1.4731321659327465
+            ],
+            [
+              124.83809709548949,
+              1.4757598604506188
+            ],
+            [
+              124.83565092086792,
+              1.4757598604506188
+            ],
+            [
+              124.83565092086792,
+              1.4731321659327465
+            ]
+          ]
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {},
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [
+          [
+            [
+              124.8336124420166,
+              1.4740009142594124
+            ],
+            [
+              124.83699202537537,
+              1.4740009142594124
+            ],
+            [
+              124.83699202537537,
+              1.4751806953948565
+            ],
+            [
+              124.8336124420166,
+              1.4751806953948565
+            ],
+            [
+              124.8336124420166,
+              1.4740009142594124
+            ]
+          ]
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {},
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [
+          [
+            [
+              124.83495354652403,
+              1.4699789284209208
+            ],
+            [
+              124.83812928199768,
+              1.4699789284209208
+            ],
+            [
+              124.83812928199768,
+              1.4720381860765859
+            ],
+            [
+              124.83495354652403,
+              1.4720381860765859
+            ],
+            [
+              124.83495354652403,
+              1.4699789284209208
+            ]
+          ]
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {},
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [
+          [
+            [
+              124.83344078063965,
+              1.4708155020727454
+            ],
+            [
+              124.83912706375122,
+              1.4708155020727454
+            ],
+            [
+              124.83912706375122,
+              1.4715448224364003
+            ],
+            [
+              124.83344078063965,
+              1.4715448224364003
+            ],
+            [
+              124.83344078063965,
+              1.4708155020727454
+            ]
+          ]
+        ]
+      }
+    }
+  ]
+}

example/src/data/empty.json

@@ -0,0 +1,18 @@
+{
+  "version": 8,
+  "name": "Empty",
+  "metadata": {
+    "mapbox:autocomposite": true
+  },
+  "sources": {},
+  "glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
+  "layers": [
+    {
+      "id": "background",
+      "type": "background",
+      "paint": {
+        "background-color": "rgba(0,0,0,0)"
+      }
+    }
+  ]
+}

example/src/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>webpack starterkit</title>
+</head>
+
+<body>
+  <h1>webpack starter</h1>
+  <p>✨ A lightweight foundation for your next webpack based frontend project.</p>
+  <div id="map"></div>
+  <div class="mapboxgl-ctrl-bottom-left">
+    <div id="shapebuilderbutton"></div>
+  </div>
+</body>
+
+</html>