Updating codebase to use es6/7

Squashed commit of the following:

commit 07b27d00f135a521143154a2e77abdc1680b7d5b
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Thu Jan 26 14:59:35 2017 +0000

    Fix styleci.io issue

commit 9e67f0a96484f8047f22d13abb4cd41c2e44b95d
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Thu Jan 26 08:28:22 2017 +0000

    Remove some unused dependencies

commit 3c65070f3ff2aec10d821ae9f12821bc08e37d0a
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Wed Jan 25 18:00:10 2017 +0000

    Compressed webpack/babel output

commit 694c43d1a9a6c8cb84d4cc789a6643b8d2863cec
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Wed Jan 25 17:59:27 2017 +0000

    Let’s compress the es5 output

commit debffc0e41760fcc87e6d3768163e6ed8ea5d98c
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Wed Jan 25 17:45:05 2017 +0000

    webpack/babel generated es5 assets

commit 1e978d6c5795f230ab320f94ad2fb98871bb6fa5
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Wed Jan 25 17:36:52 2017 +0000

    Allow content of micropub form page to be persisted

commit 44fb8026962ef574700f07ef93d18bdb38cdedb2
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Wed Jan 25 17:35:58 2017 +0000

    Name the micropub form

commit 732abaf561bf9d6392fe506d30d320e9c17b8226
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Wed Jan 25 17:34:39 2017 +0000

    Add webStorage dependency

commit a4520085dfc673c5c3d940150358b8ecc3cdf022
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Mon Jan 16 12:32:33 2017 +0000

    No need for a form id on the micropub form untill form autosave is added

commit a182be46a616d8e4085be5e24cbd3623f13cc28d
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Sat Jan 14 20:37:31 2017 +0000

    Polyfill fetch and promise only in older browsers using unpkg.com

commit fdc044150dc8e2b755f93119b196ba0455bbbb83
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Fri Jan 13 15:46:05 2017 +0000

    Generated js from webpack/babel

commit d24e6aa9fff38823a0c667e6f9e43dcb2ca179c4
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Fri Jan 13 15:45:32 2017 +0000

    Lots of es6 to generate and add map, particularly the new note form

commit e7004a9fe475e07d43de905fb00d51c659878474
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Fri Jan 13 15:44:54 2017 +0000

    Don’t link to commons.js, it aint being made at the moment

commit d4a2e4e143b644287f9da109eb2850c2361b2f20
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Fri Jan 13 15:43:27 2017 +0000

    Temporarily don’t optimize JS

commit 05623de122da7d88642af60f85e5320a3ff651fc
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Wed Jan 11 14:24:15 2017 +0000

    Add places to geojson data

commit 3eb1a4f29bb4263b9998a6f3f53abb7d1eeff520
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Wed Jan 11 14:22:53 2017 +0000

    Use alertify.js to give relevant feedback to user

commit 6f123fa178d6cd19528130ebd78157c37eaab1a1
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Wed Jan 11 14:21:24 2017 +0000

    Add alertify.css back

commit 89fca3b3aeb23ef97fb767514e0502298d1b83fd
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Wed Jan 11 14:19:56 2017 +0000

    Webpack’d javascript

commit 94ab60f34079238ed6228bf6e789f14d7a09823b
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Mon Jan 9 09:10:17 2017 +0000

    Webpack’d javascript

commit 1ca3a55a27c20ea08633b589023fe5ad1acb2b68
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Mon Jan 9 09:09:06 2017 +0000

    Define const functions in order of usage

commit dc5535b32a357611860e0e98fcdc7d9c12c5d383
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Sun Jan 8 18:50:55 2017 +0000

    Link to correct js files with defer option

commit 42f0e5b85825943ed148736e8e0fe22f5654ae90
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Sun Jan 8 18:50:18 2017 +0000

    New webpacked es6 code

commit 300443bb0ce7b65bda1cf550fe5c7173a89edaf3
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Sun Jan 8 18:49:44 2017 +0000

    Moving towards consolidated es6 map code

commit b1001760e03dd358f896feb90dd3acc0bc6728fc
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Sun Jan 8 18:44:40 2017 +0000

    Don’t mangle the fetch function

commit 289e59025634b6d2569b73ae87e3ea4942034e33
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Sun Jan 8 18:43:47 2017 +0000

    Updated yarn/npm dependencies

commit 3439b008e6bd96d8c45591c2a945c4ac246440ec
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Thu Dec 29 11:58:50 2016 +0000

    Link to the correct assets on the new note page

commit 81dc83e362266028f8336ae5a27e92c8c8a2b6dc
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Thu Dec 29 11:57:46 2016 +0000

    Add a map to the new note page

commit 5101ecd3dd60cd78e9a4bce81a5e60a2f575bc57
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Thu Dec 29 11:56:54 2016 +0000

    Bundle common JS between entry points

commit 1f916adcfd1b07df388417b6bd800e109cec543c
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Thu Dec 29 11:55:31 2016 +0000

    Add geojson to individual notes

commit 7a6ae8ca49b4ca49413ddb977f7b534f62b41c20
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Wed Dec 28 19:53:30 2016 +0000

    Link to self-hosted mapbox-gl.css

commit 8be006ec2b738cbcebd06283e18c292b3efd7d16
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Wed Dec 28 19:52:41 2016 +0000

    Use self-hosted mapbox-gl css, and a better default geojson title value

commit 5ec480842a2194a071b6a23ae181a8de5b8d47cd
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Wed Dec 28 17:09:46 2016 +0000

    Access geojson data to markup map correctly

commit f2f1d7563f7b0cb7cc62658cc2817e56d2b47c31
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Wed Dec 28 17:09:07 2016 +0000

    Generate geojson data for places

commit 9f8c9ba02f7ac37b4ab81aad2fb0cd2c077c45cd
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Fri Dec 23 11:55:10 2016 +0000

    Use geojson to add a default you location point

commit 3da499d3ea6a214f8008d1b98f9b0c2f31ecba0c
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Thu Dec 22 22:29:18 2016 +0000

    Some code cleaning

commit 39376097eda82491df272cc214d70ff3095d4873
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Thu Dec 22 22:21:29 2016 +0000

    Use satellite streets view

commit f3db8f43fc403bc180e24d63e21c8311441cb2b0
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Thu Dec 22 16:46:03 2016 +0000

    Semi working map state, still need to add own css, and add marker

commit 5f398a642b9db67f4b0733988c20138b37d2141d
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Thu Dec 22 13:17:04 2016 +0000

    Reference new maps.js with bundled mapbox

commit bad97649a623c5552e6b607a1975aa2de8131191
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Thu Dec 22 13:16:25 2016 +0000

    Add mapbox-gl again

commit 47484962e7620aa7a9a5153cfc03e2ba4030dd5c
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Wed Dec 21 00:03:23 2016 +0000

    Early working version of maps.js

commit e53e0f39952a65996c09b06fd35918ffabed0de2
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Tue Dec 20 17:14:17 2016 +0000

    Setup webpack

commit f930a1e2bd7d18809bd40d0cc22f9c3af75f1984
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Tue Dec 20 15:00:42 2016 +0000

    Add webpack v2

commit b16e8d62db071155a8b5fb216d3d60ebf6fa9468
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Tue Dec 20 14:53:47 2016 +0000

    Define default settings for babel

commit 97c13cb753e08d25aa48ecff579efa05173a2c81
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Tue Dec 20 14:53:31 2016 +0000

    Add babeljs

commit dd9efc3b056cf96323d7f11acff0fb1ab137caef
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Tue Dec 20 14:49:23 2016 +0000

    Remove old javascript

commit ab99c251ad
Author: Jonny Barnes <jonny@jonnybarnes.uk>
Date:   Fri Dec 16 13:26:10 2016 +0000

    update readme to reflect changes to how syndication targets need to be set

.babelrc

@@ -0,0 +1,9 @@
+{
+  "presets": [
+    ["latest", {
+      "es2015": {
+        "modules": false
+      }
+    }]
+  ]
+}

Makefile

@@ -7,7 +7,8 @@ yarnfiles:= node_modules/whatwg-fetch/fetch.js \
 node_modules/alertify.js/dist/js/alertify.js \
 node_modules/store2/dist/store2.min.js \
 node_modules/autolinker/dist/Autolinker.min.js \
-node_modules/marked/marked.min.js
+node_modules/marked/marked.min.js \
+node_modules/mapbox-gl/dist/mapbox-gl.css
 assets := public/assets/css/app.css \
 public/assets/prism/prism.css public/assets/prism/prism.js \
 $(wildcard public/assets/js/*.js) \

app/Http/Controllers/NotesController.php

@@ -51,6 +51,7 @@ class NotesController extends Controller
                 $note->longitude = $lnglat[0];
                 $note->address = $note->place->name;
                 $note->placeLink = '/places/' . $note->place->slug;
+                $note->geoJson = $this->getGeoJson($note->longitude, $note->latitude, $note->place->name, $note->place->icon);
             }
             $photoURLs = [];
             $photos = $note->getMedia();
@@ -150,6 +151,7 @@ class NotesController extends Controller
             $note->longitude = $lnglat[0];
             $note->address = $note->place->name;
             $note->placeLink = '/places/' . $note->place->slug;
+            $note->geoJson = $this->getGeoJson($note->longitude, $note->latitude, $note->place->name, $note->place->icon);
         }
 
         $photoURLs = [];
@@ -348,4 +350,21 @@ class NotesController extends Controller
             return $address;
         });
     }
+
+    private function getGeoJson($longitude, $latitude, $title, $icon)
+    {
+        $icon = $icon ?? 'marker';
+
+        return '{
+            "type": "Feature",
+            "geometry": {
+                "type": "Point",
+                "coordinates": [' . $longitude . ', ' . $latitude . ']
+            },
+            "properties": {
+                "title": "' . $title . '",
+                "icon": "' . $icon . '"
+            }
+        }';
+    }
 }

database/migrations/2016_12_28_160024_add_icon_to_places.php

@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class AddIconToPlaces extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('places', function (Blueprint $table) {
+            $table->string('icon')->nullable();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('places', function (Blueprint $table) {
+            $table->dropColumn('icon');
+        });
+    }
+}

package.json

@@ -6,15 +6,23 @@
   "dependencies": {
     "alertify.js": "^1.0.12",
     "autolinker": "^1.2.0",
+    "mapbox-gl": "^0.29.0",
     "marked": "^0.3.6",
     "normalize.css": "^5.0.0",
-    "store2": "^2.3.2",
+    "webStorage": "^1.2.2",
     "whatwg-fetch": "^1.0.0"
   },
   "devDependencies": {
+    "babel-cli": "^6.18.0",
+    "babel-core": "^6.21.0",
+    "babel-loader": "^6.2.10",
+    "babel-preset-es2015": "^6.18.0",
+    "babel-preset-latest": "^6.16.0",
+    "babel-runtime": "^6.20.0",
     "lint-staged": "^3.2.1",
     "pre-commit": "^1.1.3",
-    "stylelint-config-standard": "^14.0.0"
+    "stylelint-config-standard": "^14.0.0",
+    "webpack": "^2.2.0"
   },
   "private": true,
   "scripts": {

public/assets/frontend/mapbox-gl.css

@@ -0,0 +1,299 @@
+.mapboxgl-map {
+    font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
+    overflow: hidden;
+    position: relative;
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
+}
+
+.mapboxgl-canvas-container.mapboxgl-interactive,
+.mapboxgl-ctrl-nav-compass {
+    cursor: -webkit-grab;
+    cursor: -moz-grab;
+    cursor: grab;
+}
+.mapboxgl-canvas-container.mapboxgl-interactive:active,
+.mapboxgl-ctrl-nav-compass:active {
+    cursor: -webkit-grabbing;
+    cursor: -moz-grabbing;
+    cursor: grabbing;
+}
+
+.mapboxgl-ctrl-top-left,
+.mapboxgl-ctrl-top-right,
+.mapboxgl-ctrl-bottom-left,
+.mapboxgl-ctrl-bottom-right  { position:absolute; pointer-events:none; z-index:2; }
+.mapboxgl-ctrl-top-left      { top:0; left:0; }
+.mapboxgl-ctrl-top-right     { top:0; right:0; }
+.mapboxgl-ctrl-bottom-left   { bottom:0; left:0; }
+.mapboxgl-ctrl-bottom-right  { right:0; bottom:0; }
+
+.mapboxgl-ctrl { clear:both; pointer-events:auto }
+.mapboxgl-ctrl-top-left .mapboxgl-ctrl { margin:10px 0 0 10px; float:left; }
+.mapboxgl-ctrl-top-right .mapboxgl-ctrl{ margin:10px 10px 0 0; float:right; }
+.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl { margin:0 0 10px 10px; float:left; }
+.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl { margin:0 10px 10px 0; float:right; }
+
+.mapboxgl-ctrl-group {
+    border-radius: 4px;
+    -moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.1);
+    -webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.1);
+    box-shadow: 0px 0px 0px 2px rgba(0,0,0,0.1);
+    overflow: hidden;
+    background: #fff;
+}
+.mapboxgl-ctrl-group > button {
+    width: 30px;
+    height: 30px;
+    display: block;
+    padding: 0;
+    outline: none;
+    border: none;
+    border-bottom: 1px solid #ddd;
+    box-sizing: border-box;
+    background-color: rgba(0,0,0,0);
+    cursor: pointer;
+}
+/* https://bugzilla.mozilla.org/show_bug.cgi?id=140562 */
+.mapboxgl-ctrl > button::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+.mapboxgl-ctrl > button:last-child {
+    border-bottom: 0;
+}
+.mapboxgl-ctrl > button:hover {
+    background-color: rgba(0,0,0,0.05);
+}
+.mapboxgl-ctrl-icon,
+.mapboxgl-ctrl-icon > span.arrow {
+    speak: none;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+.mapboxgl-ctrl-icon {
+    padding: 5px;
+}
+.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-out {
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%0A%20%20%3Cpath%20style%3D%27fill%3A%23333333%3B%27%20d%3D%27m%207%2C9%20c%20-0.554%2C0%20-1%2C0.446%20-1%2C1%200%2C0.554%200.446%2C1%201%2C1%20l%206%2C0%20c%200.554%2C0%201%2C-0.446%201%2C-1%200%2C-0.554%20-0.446%2C-1%20-1%2C-1%20z%27%20%2F%3E%0A%3C%2Fsvg%3E%0A");
+}
+.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-in {
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%0A%20%20%3Cpath%20style%3D%27fill%3A%23333333%3B%27%20d%3D%27M%2010%206%20C%209.446%206%209%206.4459904%209%207%20L%209%209%20L%207%209%20C%206.446%209%206%209.446%206%2010%20C%206%2010.554%206.446%2011%207%2011%20L%209%2011%20L%209%2013%20C%209%2013.55401%209.446%2014%2010%2014%20C%2010.554%2014%2011%2013.55401%2011%2013%20L%2011%2011%20L%2013%2011%20C%2013.554%2011%2014%2010.554%2014%2010%20C%2014%209.446%2013.554%209%2013%209%20L%2011%209%20L%2011%207%20C%2011%206.4459904%2010.554%206%2010%206%20z%27%20%2F%3E%0A%3C%2Fsvg%3E%0A");
+}
+.mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate  {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%0D%0A%20%20%3Cpath%20style%3D%27fill%3A%23333%3B%27%20d%3D%27M10%204C9%204%209%205%209%205L9%205.1A5%205%200%200%200%205.1%209L5%209C5%209%204%209%204%2010%204%2011%205%2011%205%2011L5.1%2011A5%205%200%200%200%209%2014.9L9%2015C9%2015%209%2016%2010%2016%2011%2016%2011%2015%2011%2015L11%2014.9A5%205%200%200%200%2014.9%2011L15%2011C15%2011%2016%2011%2016%2010%2016%209%2015%209%2015%209L14.9%209A5%205%200%200%200%2011%205.1L11%205C11%205%2011%204%2010%204zM10%206.5A3.5%203.5%200%200%201%2013.5%2010%203.5%203.5%200%200%201%2010%2013.5%203.5%203.5%200%200%201%206.5%2010%203.5%203.5%200%200%201%2010%206.5zM10%208.3A1.8%201.8%200%200%200%208.3%2010%201.8%201.8%200%200%200%2010%2011.8%201.8%201.8%200%200%200%2011.8%2010%201.8%201.8%200%200%200%2010%208.3z%27%20%2F%3E%0D%0A%3C%2Fsvg%3E");
+}
+.mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate.watching  {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%0D%0A%20%20%3Cpath%20style%3D%27fill%3A%2300f%3B%27%20d%3D%27M10%204C9%204%209%205%209%205L9%205.1A5%205%200%200%200%205.1%209L5%209C5%209%204%209%204%2010%204%2011%205%2011%205%2011L5.1%2011A5%205%200%200%200%209%2014.9L9%2015C9%2015%209%2016%2010%2016%2011%2016%2011%2015%2011%2015L11%2014.9A5%205%200%200%200%2014.9%2011L15%2011C15%2011%2016%2011%2016%2010%2016%209%2015%209%2015%209L14.9%209A5%205%200%200%200%2011%205.1L11%205C11%205%2011%204%2010%204zM10%206.5A3.5%203.5%200%200%201%2013.5%2010%203.5%203.5%200%200%201%2010%2013.5%203.5%203.5%200%200%201%206.5%2010%203.5%203.5%200%200%201%2010%206.5zM10%208.3A1.8%201.8%200%200%200%208.3%2010%201.8%201.8%200%200%200%2010%2011.8%201.8%201.8%200%200%200%2011.8%2010%201.8%201.8%200%200%200%2010%208.3z%27%20%2F%3E%0D%0A%3C%2Fsvg%3E");
+}
+
+.mapboxgl-ctrl-icon.mapboxgl-ctrl-compass > span.arrow {
+    width: 20px;
+    height: 20px;
+    margin: 5px;
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%0A%09%3Cpolygon%20fill%3D%27%23333333%27%20points%3D%276%2C9%2010%2C1%2014%2C9%27%2F%3E%0A%09%3Cpolygon%20fill%3D%27%23CCCCCC%27%20points%3D%276%2C11%2010%2C19%2014%2C11%20%27%2F%3E%0A%3C%2Fsvg%3E");
+    background-repeat: no-repeat;
+    display: inline-block;
+}
+
+.mapboxgl-ctrl.mapboxgl-ctrl-attrib {
+    padding: 0 5px;
+    background-color: rgba(255, 255, 255, .5);
+    margin: 0;
+}
+.mapboxgl-ctrl-attrib.compact {
+    padding-top: 2px;
+    padding-bottom: 2px;
+    margin: 0 10px 10px 10px;
+    position: relative;
+    padding-right: 24px;
+    background-color: #fff;
+    border-radius: 3px 12px 12px 3px;
+    visibility: hidden;
+}
+.mapboxgl-ctrl-attrib.compact:hover {
+    visibility: visible;
+}
+.mapboxgl-ctrl-attrib.compact:after {
+    content: '';
+    cursor: pointer;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%0D%0A%09%3Cpath%20fill%3D%27%23333333%27%20fill-rule%3D%27evenodd%27%20d%3D%27M4%2C10a6%2C6%200%201%2C0%2012%2C0a6%2C6%200%201%2C0%20-12%2C0%20M9%2C7a1%2C1%200%201%2C0%202%2C0a1%2C1%200%201%2C0%20-2%2C0%20M9%2C10a1%2C1%200%201%2C1%202%2C0l0%2C3a1%2C1%200%201%2C1%20-2%2C0%27%20%2F%3E%0D%0A%3C%2Fsvg%3E");
+    background-color: rgba(255, 255, 255, .5);
+    width: 24px;
+    height: 24px;
+    box-sizing: border-box;
+    visibility: visible;
+    border-radius: 12px;
+}
+.mapboxgl-ctrl-attrib a {
+    color: rgba(0,0,0,0.75);
+    text-decoration: none;
+}
+.mapboxgl-ctrl-attrib a:hover {
+    color: inherit;
+    text-decoration: underline;
+}
+.mapboxgl-ctrl-attrib .mapbox-improve-map {
+    font-weight: bold;
+    margin-left: 2px;
+}
+
+.mapboxgl-ctrl-scale {
+    background-color: rgba(255,255,255,0.75);
+    font-size: 10px;
+    border-width: medium 2px 2px;
+    border-style: none solid solid;
+    border-color: #333;
+    padding: 0 5px;
+    color: #333;
+}
+
+.mapboxgl-popup {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: -webkit-flex;
+    display: flex;
+    will-change: transform;
+    pointer-events: none;
+}
+.mapboxgl-popup-anchor-top,
+.mapboxgl-popup-anchor-top-left,
+.mapboxgl-popup-anchor-top-right {
+    -webkit-flex-direction: column;
+    flex-direction: column;
+}
+.mapboxgl-popup-anchor-bottom,
+.mapboxgl-popup-anchor-bottom-left,
+.mapboxgl-popup-anchor-bottom-right {
+    -webkit-flex-direction: column-reverse;
+    flex-direction: column-reverse;
+}
+.mapboxgl-popup-anchor-left {
+    -webkit-flex-direction: row;
+    flex-direction: row;
+}
+.mapboxgl-popup-anchor-right {
+    -webkit-flex-direction: row-reverse;
+    flex-direction: row-reverse;
+}
+.mapboxgl-popup-tip {
+    width: 0;
+    height: 0;
+    border: 10px solid transparent;
+    z-index: 1;
+}
+.mapboxgl-popup-anchor-top .mapboxgl-popup-tip {
+    -webkit-align-self: center;
+    align-self: center;
+    border-top: none;
+    border-bottom-color: #fff;
+}
+.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip {
+    -webkit-align-self: flex-start;
+    align-self: flex-start;
+    border-top: none;
+    border-left: none;
+    border-bottom-color: #fff;
+}
+.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip {
+    -webkit-align-self: flex-end;
+    align-self: flex-end;
+    border-top: none;
+    border-right: none;
+    border-bottom-color: #fff;
+}
+.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
+    -webkit-align-self: center;
+    align-self: center;
+    border-bottom: none;
+    border-top-color: #fff;
+}
+.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip {
+    -webkit-align-self: flex-start;
+    align-self: flex-start;
+    border-bottom: none;
+    border-left: none;
+    border-top-color: #fff;
+}
+.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip {
+    -webkit-align-self: flex-end;
+    align-self: flex-end;
+    border-bottom: none;
+    border-right: none;
+    border-top-color: #fff;
+}
+.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
+    -webkit-align-self: center;
+    align-self: center;
+    border-left: none;
+    border-right-color: #fff;
+}
+.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
+    -webkit-align-self: center;
+    align-self: center;
+    border-right: none;
+    border-left-color: #fff;
+}
+.mapboxgl-popup-close-button {
+    position: absolute;
+    right: 0;
+    top: 0;
+    border: none;
+    border-radius: 0 3px 0 0;
+    cursor: pointer;
+    background-color: rgba(0,0,0,0);
+}
+.mapboxgl-popup-close-button:hover {
+    background-color: rgba(0,0,0,0.05);
+}
+.mapboxgl-popup-content {
+    position: relative;
+    background: #fff;
+    border-radius: 3px;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.10);
+    padding: 10px 10px 15px;
+    pointer-events: auto;
+}
+.mapboxgl-popup-anchor-top-left .mapboxgl-popup-content {
+    border-top-left-radius: 0;
+}
+.mapboxgl-popup-anchor-top-right .mapboxgl-popup-content {
+    border-top-right-radius: 0;
+}
+.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-content {
+    border-bottom-left-radius: 0;
+}
+.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-content {
+    border-bottom-right-radius: 0;
+}
+
+.mapboxgl-marker {
+    position: absolute;
+    top: 0;
+    left: 0;
+    will-change: transform;
+}
+
+.mapboxgl-crosshair,
+.mapboxgl-crosshair .mapboxgl-interactive,
+.mapboxgl-crosshair .mapboxgl-interactive:active {
+    cursor: crosshair;
+}
+.mapboxgl-boxzoom {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 0;
+    height: 0;
+    background: #fff;
+    border: 2px dotted #202020;
+    opacity: 0.5;
+}
+@media print {
+    .mapbox-improve-map {
+        display:none;
+    }
+}

public/assets/js/form-save.js

@@ -1,2 +0,0 @@
-function getKeys(){for(var e=[],t=document.querySelectorAll("input[type=text], textarea"),r=0;r<t.length;r++){var o=getFormElement(t[r]);if(o!==!1){var n=o.id+"~"+t[r].id;e.push(n)}}return e}function getFormElement(e){if("body"!==e.nodeName.toLowerCase()){var t=e.parentNode;return"form"===t.nodeName.toLowerCase()?t:getFormElement(t)}return!1}var feature={addEventListener:!!window.addEventListener,querySelectorAll:!!document.querySelectorAll};if(feature.addEventListener&&feature.querySelectorAll)for(var keys=getKeys(),i=0;i<keys.length;i++)if(store.get(keys[i])){var formId=keys[i].split("~")[1];document.getElementById(formId).value=store.get(keys[i])}for(var timerId=window.setInterval(function(){for(var e=!1,t=document.querySelectorAll("input[type=text], textarea"),r=0;r<t.length;r++){var o=getFormElement(t[r]).id+"~"+t[r].id;store.get(o)!==t[r].value&&""!==t[r].value&&(store.set(o,t[r].value),e=!0)}e===!0&&(alertify.logPosition("top right"),alertify.success("Auto saved text"))},5e3),forms=document.querySelectorAll("form"),f=0;f<forms.length;f++){var form=forms[f];form.addEventListener("submit",function(){window.clearInterval(timerId);for(var e=form.id,t=store.keys(),r=0;r<t.length;r++)t[r].indexOf(e)>-1&&store.remove(t[r])})}
-//# sourceMappingURL=public/assets/js/form-save.js.map

public/assets/js/form-save.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["resources/assets/js/form-save.js"],"names":["getKeys","keys","formFields","document","querySelectorAll","f","length","parent","getFormElement","key","id","push","elem","nodeName","toLowerCase","parentNode","feature","addEventListener","window","i","store","get","formId","split","getElementById","value","timerId","setInterval","saved","inputs","set","alertify","logPosition","success","forms","form","clearInterval","storedKeys","indexOf","remove"],"mappings":"AA6CA,QAASA,WAGL,IAAK,GAFDC,MACAC,EAAaC,SAASC,iBAAiB,8BAClCC,EAAI,EAAGA,EAAIH,EAAWI,OAAQD,IAAK,CACxC,GAAIE,GAASC,eAAeN,EAAWG,GACvC,IAAIE,KAAW,EAAO,CAClB,GAAIE,GAAMF,EAAOG,GAAK,IAAMR,EAAWG,GAAGK,EAC1CT,GAAKU,KAAKF,IAGlB,MAAOR,GAEX,QAASO,gBAAeI,GACpB,GAAoC,SAAhCA,EAAKC,SAASC,cAA0B,CACxC,GAAIP,GAASK,EAAKG,UAClB,OAAsC,SAAlCR,EAAOM,SAASC,cACTP,EAEAC,eAAeD,GAG1B,OAAO,EAjEf,GAAIS,UACAC,mBAAqBC,OAAOD,iBAC5Bb,mBAAqBD,SAASC,iBAGlC,IAAIY,QAAQC,kBAAoBD,QAAQZ,iBAEpC,IAAK,GADDH,MAAOD,UACFmB,EAAI,EAAGA,EAAIlB,KAAKK,OAAQa,IAC7B,GAAIC,MAAMC,IAAIpB,KAAKkB,IAAK,CACpB,GAAIG,QAASrB,KAAKkB,GAAGI,MAAM,KAAK,EAChCpB,UAASqB,eAAeF,QAAQG,MAAQL,MAAMC,IAAIpB,KAAKkB,IAqBnE,IAAK,GAhBDO,SAAUR,OAAOS,YAAY,WAG7B,IAAK,GAFDC,IAAQ,EACRC,EAAS1B,SAASC,iBAAiB,8BAC9Be,EAAI,EAAGA,EAAIU,EAAOvB,OAAQa,IAAK,CACpC,GAAIV,GAAMD,eAAeqB,EAAOV,IAAIT,GAAK,IAAMmB,EAAOV,GAAGT,EACrDU,OAAMC,IAAIZ,KAASoB,EAAOV,GAAGM,OAA6B,KAApBI,EAAOV,GAAGM,QAChDL,MAAMU,IAAIrB,EAAKoB,EAAOV,GAAGM,OACzBG,GAAQ,GAGZA,KAAU,IACVG,SAASC,YAAY,aACrBD,SAASE,QAAQ,qBAEtB,KACCC,MAAQ/B,SAASC,iBAAiB,QAC7BC,EAAI,EAAGA,EAAI6B,MAAM5B,OAAQD,IAAK,CACnC,GAAI8B,MAAOD,MAAM7B,EACjB8B,MAAKlB,iBAAiB,SAAU,WAC5BC,OAAOkB,cAAcV,QAGrB,KAAK,GAFDJ,GAASa,KAAKzB,GACd2B,EAAajB,MAAMnB,OACdkB,EAAI,EAAGA,EAAIkB,EAAW/B,OAAQa,IAC/BkB,EAAWlB,GAAGmB,QAAQhB,IAAU,GAChCF,MAAMmB,OAAOF,EAAWlB","file":"public/assets/js/form-save.js"}

public/assets/js/links.js

@@ -1,2 +0,0 @@
-for(var autolinker=new Autolinker,ytidregex=/watch\?v=([A-Za-z0-9\-_]+)/,spotifyregex=/https\:\/\/play\.spotify\.com\/(.*)\b/,notes=document.querySelectorAll(".e-content"),i=0;i<notes.length;i++){var ytid=notes[i].textContent.match(ytidregex);if(null!==ytid){var yid=ytid[1],yiframe=document.createElement("iframe");yiframe.classList.add("youtube"),yiframe.setAttribute("src","//www.youtube.com/embed/"+yid),yiframe.setAttribute("frameborder",0),yiframe.setAttribute("allowfullscreen","true"),notes[i].appendChild(yiframe)}var spotifyid=notes[i].textContent.match(spotifyregex);if(null!==spotifyid){var sid=spotifyid[1].replace("/",":"),siframe=document.createElement("iframe");siframe.classList.add("spotify"),siframe.setAttribute("src","https://embed.spotify.com/?uri=spotify:"+sid),siframe.setAttribute("frameborder",0),siframe.setAttribute("allowtransparency","true"),notes[i].appendChild(siframe)}var orig=notes[i].innerHTML,linked=autolinker.link(orig);notes[i].innerHTML=linked}
-//# sourceMappingURL=public/assets/js/links.js.map

public/assets/js/links.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["resources/assets/js/links.js"],"names":["autolinker","Autolinker","ytidregex","spotifyregex","notes","document","querySelectorAll","i","length","ytid","textContent","match","yid","yiframe","createElement","classList","add","setAttribute","appendChild","spotifyid","sid","replace","siframe","orig","innerHTML","linked","link"],"mappings":"AAWA,IAAK,GATDA,YAAa,GAAIC,YAGjBC,UAAY,6BAEZC,aAAe,wCAGfC,MAAQC,SAASC,iBAAiB,cAC7BC,EAAI,EAAGA,EAAIH,MAAMI,OAAQD,IAAK,CAEnC,GAAIE,MAAOL,MAAMG,GAAGG,YAAYC,MAAMT,UACtC,IAAa,OAATO,KAAe,CACf,GAAIG,KAAMH,KAAK,GACXI,QAAUR,SAASS,cAAc,SACrCD,SAAQE,UAAUC,IAAI,WACtBH,QAAQI,aAAa,MAAO,2BAA6BL,KACzDC,QAAQI,aAAa,cAAe,GACpCJ,QAAQI,aAAa,kBAAmB,QACxCb,MAAMG,GAAGW,YAAYL,SAGzB,GAAIM,WAAYf,MAAMG,GAAGG,YAAYC,MAAMR,aAC3C,IAAkB,OAAdgB,UAAoB,CACpB,GAAIC,KAAMD,UAAU,GAAGE,QAAQ,IAAK,KAChCC,QAAUjB,SAASS,cAAc,SACrCQ,SAAQP,UAAUC,IAAI,WACtBM,QAAQL,aAAa,MAAO,0CAA4CG,KACxEE,QAAQL,aAAa,cAAe,GACpCK,QAAQL,aAAa,oBAAqB,QAC1Cb,MAAMG,GAAGW,YAAYI,SAGzB,GAAIC,MAAOnB,MAAMG,GAAGiB,UAChBC,OAASzB,WAAW0B,KAAKH,KAC7BnB,OAAMG,GAAGiB,UAAYC","file":"public/assets/js/links.js"}

public/assets/js/maps.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["resources/assets/js/maps.js"],"names":["mapDivs","document","querySelectorAll","mapboxgl","accessToken","i","length","mapDiv","latitude","dataset","longitude","el","createElement","classList","add","mapMenu","streetsInput","setAttribute","addEventListener","map","setStyle","streetsLabel","appendChild","createTextNode","satelliteInput","satelliteLabel","Map","container","style","center","zoom","scrollZoom","addControl","NavigationControl","Marker","offset","setLngLat","addTo"],"mappings":"AAEA,GAAIA,SAAUC,SAASC,iBAAiB,OACxCC,UAASC,YAAc,gGACvB,KAAK,GAAIC,GAAI,EAAGA,EAAIL,QAAQM,OAAQD,IAAK,CACrC,GAAIE,QAASP,QAAQK,GACjBG,SAAWD,OAAOE,QAAQD,SAC1BE,UAAaH,OAAOE,QAAQC,UAC5BC,GAAKV,SAASW,cAAc,MAChCD,IAAGE,UAAUC,IAAI,SACjB,IAAIC,SAAUd,SAASW,cAAc,MACrCG,SAAQF,UAAUC,IAAI,WACtB,IAAIE,cAAef,SAASW,cAAc,QAC1CI,cAAaC,aAAa,KAAM,WAChCD,aAAaC,aAAa,OAAQ,SAClCD,aAAaC,aAAa,OAAQ,UAClCD,aAAaC,aAAa,QAAS,WACnCD,aAAaC,aAAa,UAAW,WACrCD,aAAaE,iBAAiB,QAAS,WACnCC,IAAIC,SAAS,sCAEjB,IAAIC,cAAepB,SAASW,cAAc,QAC1CS,cAAaJ,aAAa,MAAO,WACjCI,aAAaC,YAAYrB,SAASsB,eAAe,WACjD,IAAIC,gBAAiBvB,SAASW,cAAc,QAC5CY,gBAAeP,aAAa,KAAM,aAClCO,eAAeP,aAAa,OAAQ,SACpCO,eAAeP,aAAa,OAAQ,UACpCO,eAAeP,aAAa,QAAS,WACrCO,eAAeN,iBAAiB,QAAS,WACrCC,IAAIC,SAAS,wCAEjB,IAAIK,gBAAiBxB,SAASW,cAAc,QAC5Ca,gBAAeR,aAAa,MAAO,aACnCQ,eAAeH,YAAYrB,SAASsB,eAAe,cACnDR,QAAQO,YAAYN,cACpBD,QAAQO,YAAYD,cACpBN,QAAQO,YAAYE,gBACpBT,QAAQO,YAAYG,eACpB,IAAIN,KAAM,GAAIhB,UAASuB,KACnBC,UAAWpB,OACXqB,MAAO,oCACPC,QAASnB,UAAWF,UACpBsB,KAAM,GACNC,YAAY,GAEhBZ,KAAIa,WAAW,GAAI7B,UAAS8B,mBAC5B,GAAI9B,UAAS+B,OAAOvB,IAAKwB,SAAS,IAAK,MAAOC,WAAW1B,UAAWF,WAAW6B,MAAMlB,KACrFZ,OAAOe,YAAYP","file":"public/assets/js/maps.js"}

public/assets/js/newplace.js

@@ -1,2 +0,0 @@
-function getLocation(){"geolocation"in navigator&&navigator.geolocation.getCurrentPosition(function(t){updateForm(t.coords.latitude,t.coords.longitude),addMap(t.coords.latitude,t.coords.longitude)})}function updateForm(t,e){var o=document.querySelector("#latitude"),n=document.querySelector("#longitude");o.value=t,n.value=e}function addMap(t,e){var o=document.querySelector("form"),n=document.createElement("div");n.setAttribute("id","map"),o.appendChild(n),L.mapbox.accessToken="pk.eyJ1Ijoiam9ubnliYXJuZXMiLCJhIjoiVlpndW1EYyJ9.aP9fxAqLKh7lj0LpFh5k1w";var a=L.mapbox.map("map","jonnybarnes.gnoihnim").setView([t,e],15).addLayer(L.mapbox.tileLayer("jonnybarnes.gnoihnim",{detectRetina:!0})),i=L.marker([t,e],{draggable:!0}).addTo(a);i.on("dragend",function(){var t=i.getLatLng();updateForm(t.lat,t.lng)})}var button=document.querySelector("#locate");button.addEventListener?button.addEventListener("click",getLocation):button.attachEvent("onclick",getLocation);
-//# sourceMappingURL=public/assets/js/newplace.js.map

public/assets/js/newplace.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["resources/assets/js/newplace.js"],"names":["getLocation","navigator","geolocation","getCurrentPosition","position","updateForm","coords","latitude","longitude","addMap","inputLatitude","document","querySelector","inputLongitude","value","form","div","createElement","setAttribute","appendChild","L","mapbox","accessToken","map","setView","addLayer","tileLayer","detectRetina","marker","draggable","addTo","on","markerLocation","getLatLng","lat","lng","button","addEventListener","attachEvent"],"mappings":"AASA,QAASA,eACD,eAAiBC,YACjBA,UAAUC,YAAYC,mBAAmB,SAASC,GAC9CC,WAAWD,EAASE,OAAOC,SAAUH,EAASE,OAAOE,WACrDC,OAAOL,EAASE,OAAOC,SAAUH,EAASE,OAAOE,aAK7D,QAASH,YAAWE,EAAUC,GAC1B,GAAIE,GAAgBC,SAASC,cAAc,aACvCC,EAAiBF,SAASC,cAAc,aAC5CF,GAAcI,MAAQP,EACtBM,EAAeC,MAAQN,EAG3B,QAASC,QAAOF,EAAUC,GACtB,GAAIO,GAAOJ,SAASC,cAAc,QAC9BI,EAAML,SAASM,cAAc,MACjCD,GAAIE,aAAa,KAAM,OACvBH,EAAKI,YAAYH,GACjBI,EAAEC,OAAOC,YAAc,wEACvB,IAAIC,GAAMH,EAAEC,OAAOE,IAAI,MAAO,wBACzBC,SAASjB,EAAUC,GAAY,IAC/BiB,SAASL,EAAEC,OAAOK,UAAU,wBACzBC,cAAc,KAElBC,EAASR,EAAEQ,QAAQrB,EAAUC,IAC7BqB,WAAW,IACZC,MAAMP,EACTK,GAAOG,GAAG,UAAW,WACjB,GAAIC,GAAiBJ,EAAOK,WAC5B5B,YAAW2B,EAAeE,IAAKF,EAAeG,OAxCtD,GAAIC,QAASzB,SAASC,cAAc,UAEhCwB,QAAOC,iBACPD,OAAOC,iBAAiB,QAASrC,aAEjCoC,OAAOE,YAAY,UAAWtC","file":"public/assets/js/newplace.js"}

readme.md

@@ -37,7 +37,7 @@ $ php artisan migrate
 ```
 
 Now we need to edit some config values. In `config/app.php` edit `name`, and in
-`config/syndication.php` edit it to the appropriate values or set targets to `null`.
+`config/syndication.php` edit it to the appropriate values or set targets to `[]`.
 
 Some other things that should be changed. Go to `resources/views/master.blade.php`,
 you may not want to link to a projects page. Also in the `<head>` the two last links

resources/assets/es6/mapbox-utils.js

@@ -0,0 +1,141 @@
+//mapbox-utils.js
+import mapboxgl from 'mapbox-gl/dist/mapbox-gl.js';
+import parseLocation from './parse-location';
+import selectPlaceInForm from './select-place';
+
+mapboxgl.accessToken = 'pk.eyJ1Ijoiam9ubnliYXJuZXMiLCJhIjoiY2l2cDhjYW04MDAwcjJ0cG1uZnhqcm82ayJ9.qA2zeVA-nsoMh9IFrd5KQw';
+
+//define some functions to be used in the default function.
+const titlecase = (string) => {
+    return string.split('-').map(([first,...rest]) => first.toUpperCase() + rest.join('').toLowerCase()).join(' ')
+};
+
+const addMapTypeOption = (map, menu, option, checked = false) => {
+    let input = document.createElement('input');
+    input.setAttribute('id', option);
+    input.setAttribute('type', 'radio');
+    input.setAttribute('name', 'toggle');
+    input.setAttribute('value', option);
+    if (checked == true) {
+        input.setAttribute('checked', 'checked');
+    }
+    input.addEventListener('click', function () {
+        map.setStyle('mapbox://styles/mapbox/' + option + '-v9');
+    });
+    let label = document.createElement('label');
+    label.setAttribute('for', option);
+    label.appendChild(document.createTextNode(titlecase(option)));
+    menu.appendChild(input);
+    menu.appendChild(label);
+}
+
+const makeMapMenu = (map) => {
+    let mapMenu = document.createElement('div');
+    mapMenu.classList.add('map-menu');
+    addMapTypeOption(map, mapMenu, 'streets', true);
+    addMapTypeOption(map, mapMenu, 'satellite-streets');
+    return mapMenu;
+}
+
+//the main function
+export default function addMap(position = null, places = null) {
+    //console.log(position);
+    //console.log(places);
+    let mapDivs = document.querySelectorAll('.map');
+    for (let div of mapDivs) {
+        let dataLatitude = div.dataset.latitude;
+        let dataLongitude = div.dataset.longitude;
+        let dataId = div.dataset.id;
+        let data = window['geojson'+dataId];
+        if (data == null) {
+            data = {
+                "type": "FeatureCollection",
+                "features": [{
+                    "type": "Feature",
+                    "geometry": {
+                        "type": "Point",
+                        "coordinates": [dataLongitude, dataLatitude]
+                    },
+                    "properties": {
+                        "title": "Current Location",
+                        "icon": "circle-stroked",
+                        "uri": "current-location"
+                    }
+                }]
+            };
+        }
+        if (places != null) {
+            for (let place of places) {
+                let placeLongitude = parseLocation(place.location).longitude;
+                let placeLatitude = parseLocation(place.location).latitude;
+                data.features.push({
+                    "type": "Feature",
+                    "geometry": {
+                        "type": "Point",
+                        "coordinates": [placeLongitude, placeLatitude]
+                    },
+                    "properties": {
+                        "title": place.name,
+                        "icon": "circle",
+                        "uri": place.slug
+                    }
+                });
+            }
+        }
+        if (! dataLongitude) {
+            let dataLongitude = position.coords.longitude;
+        }
+        if (! dataLatitude) {
+            let dataLatitude = position.coords.latitude;
+        }
+        let map = new mapboxgl.Map({
+            container: div,
+            style: 'mapbox://styles/mapbox/streets-v9',
+            center: [dataLongitude, dataLatitude],
+            zoom: 15
+        });
+        if (position == null) {
+            map.scrollZoom.disable();
+        }
+        map.addControl(new mapboxgl.NavigationControl());
+        div.appendChild(makeMapMenu(map));
+        map.on('load', function () {
+            map.addSource('points', {
+                "type": "geojson",
+                "data": data
+            });
+            map.addLayer({
+                "id": "points",
+                "interactive": true,
+                "type": "symbol",
+                "source": "points",
+                "layout": {
+                    "icon-image": "{icon}-15",
+                    "text-field": "{title}",
+                    "text-offset": [0, 1]
+                }
+            });
+        });
+        map.on('click', function (e) {
+            let features = map.queryRenderedFeatures(e.point, {
+                layer: ['points']
+            });
+            // if there are features within the given radius of the click event,
+            // fly to the location of the click event
+            if (features.length) {
+                // Get coordinates from the symbol and center the map on those coordinates
+                map.flyTo({center: features[0].geometry.coordinates});
+                selectPlaceInForm(features[0].properties.uri);
+            }
+        });
+        if (data.features && data.features.length > 1) {
+            let bounds = new mapboxgl.LngLatBounds();
+            for (let feature of data.features) {
+                bounds.extend(feature.geometry.coordinates);
+            }
+            map.fitBounds(bounds, { padding: 65});
+        }
+
+        return map;
+    }
+}

resources/assets/es6/maps.js

@@ -0,0 +1,8 @@
+//maps.js
+import addMapTo from './mapbox-utils';
+
+let mapDivs = document.querySelectorAll('.map');
+
+for (var div of mapDivs) {
+    addMapTo(div);
+}

resources/assets/es6/nearby-places.js

@@ -0,0 +1,80 @@
+//nearby-places.js
+
+import alertify from 'alertify.js';
+import addMap from './mapbox-utils';
+import parseLocation from './parse-location';
+import makeNewPlaceForm from './newplace-micropub';
+
+const makeOptionsForForm = (map, position, places = null) => {
+    //create the <select> element and give it a no location default
+    let selectElement = document.createElement('select');
+    selectElement.setAttribute('name', 'location');
+    let noLocationOption = document.createElement('option');
+    noLocationOption.setAttribute('selected', 'selected');
+    noLocationOption.setAttribute('value', 'no-location');
+    noLocationOption.appendChild(document.createTextNode('Don’t send location'));
+    selectElement.appendChild(noLocationOption);
+    let geoLocationOption = document.createElement('option');
+    geoLocationOption.setAttribute('id', 'option-coords');
+    geoLocationOption.setAttribute('value', 'geo:' + position.coords.latitude + ',' + position.coords.longitude);
+    geoLocationOption.dataset.latitude = position.coords.latitude;
+    geoLocationOption.dataset.longitude = position.coords.longitude;
+    geoLocationOption.appendChild(document.createTextNode('Send co-ordinates'));
+    selectElement.appendChild(geoLocationOption);
+    if (places != null) {
+        for (let place of places) {
+            let parsedCoords = parseLocation(place.location);
+            let option = document.createElement('option');
+            option.setAttribute('value', place.slug);
+            option.dataset.latitude = parsedCoords.latitude;
+            option.dataset.longitude = parsedCoords.longitude;
+            option.appendChild(document.createTextNode(place.name));
+            selectElement.appendChild(option);
+        }
+    }
+    //add an event listener
+    selectElement.addEventListener('change', function () {
+        if (selectElement.value !== 'no-location') {
+            let optionLatitude = selectElement[selectElement.selectedIndex].dataset.latitude;
+            let optionLongitude = selectElement[selectElement.selectedIndex].dataset.longitude;
+            map.flyTo({center: [optionLongitude, optionLatitude]});
+        }
+    });
+
+    return selectElement
+}
+
+//position is output of navigator.geolocation call
+export default function addMapWithPlaces(position) {
+    fetch('/places/near/' + position.coords.latitude + '/' + position.coords.longitude + '?u=' + position.coords.accuracy, {
+        credentials: 'same-origin',
+        method: 'get'
+    }).then(function (response) {
+        if (response.ok) {
+            return response.json();
+        } else {
+            alertify.reset();
+            alertify.error('Non OK response');
+        }
+    }).then(function (json) {
+        if (json.error == true) {
+            alertify.reset();
+            alertify.error(json.error_description);
+        }
+        let places = null;
+        if (json.places.length > 0) {
+            places = json.places;
+        }
+        let map = addMap(position, places);
+        //create a containting div for flexbox styling purposes
+        let flexboxDiv = document.createElement('div');
+        let options = makeOptionsForForm(map, position, places);
+        flexboxDiv.appendChild(options);
+        let newPlaceForm = makeNewPlaceForm(map);
+        flexboxDiv.appendChild(newPlaceForm);
+        let form = document.querySelector('fieldset');
+        form.insertBefore(flexboxDiv, document.querySelector('.map'));
+    }).catch(function (error) {
+        console.error(error);
+    });
+}

resources/assets/es6/newnote-button.js

@@ -0,0 +1,14 @@
+//newnote-button.js
+
+import getLocation from './newnote-getlocation';
+
+export default function enableLocateButton(button) {
+    if ('geolocation' in navigator) {
+        if (button.addEventListener) {
+            //if we have javascript, event listeners and geolocation
+            //make the locate button clickable and add event
+            button.disabled = false;
+            button.addEventListener('click', getLocation);
+        }
+    }
+}

resources/assets/es6/newnote-getlocation.js

@@ -0,0 +1,16 @@
+//newnote-getlocation.js
+
+import addMapWithPlaces from './nearby-places';
+
+export default function getLocation() {
+    let container = document.querySelector('fieldset');
+    let mapDiv = document.createElement('div');
+    mapDiv.classList.add('map');
+    container.appendChild(mapDiv);
+    navigator.geolocation.getCurrentPosition(function (position) {
+        mapDiv.dataset.latitude = position.coords.latitude;
+        mapDiv.dataset.longitude = position.coords.longitude;
+        mapDiv.dataset.accuracy = position.coords.accuracy;
+        addMapWithPlaces(position);
+    });
+}

resources/assets/es6/newnote.js

@@ -0,0 +1,8 @@
+//newnote.js
+
+import enableLocateButton from './newnote-button';
+import persistFormData from './persist-form';
+
+let button = document.querySelector('#locate');
+enableLocateButton(button);
+persistFormData();

resources/assets/es6/newplace-micropub.js

@@ -0,0 +1,134 @@
+//newplace-micropub.js
+
+import submitNewPlace from './submit-place';
+
+export default function makeNewPlaceForm(map) {
+    //add a button to add a new place
+    let newLocationButton = document.createElement('button');
+    newLocationButton.setAttribute('type', 'button');
+    newLocationButton.setAttribute('id', 'create-new-place');
+    newLocationButton.appendChild(document.createTextNode('Create New Place?'));
+    //the event listener
+    newLocationButton.addEventListener('click', function() {
+        //add the form elements
+        let newPlaceNameDiv = document.createElement('div');
+        let newPlaceNameLabel = document.createElement('label');
+        newPlaceNameLabel.setAttribute('for', 'place-name');
+        newPlaceNameLabel.classList.add('place-label');
+        newPlaceNameLabel.appendChild(document.createTextNode('Name:'));
+        let newPlaceNameInput = document.createElement('input');
+        newPlaceNameInput.setAttribute('placeholder', 'Name');
+        newPlaceNameInput.setAttribute('name', 'place-name');
+        newPlaceNameInput.setAttribute('id', 'place-name');
+        newPlaceNameInput.setAttribute('type', 'text');
+        newPlaceNameDiv.appendChild(newPlaceNameLabel);
+        newPlaceNameDiv.appendChild(newPlaceNameInput);
+        let newPlaceDescDiv = document.createElement('div');
+        let newPlaceDescLabel = document.createElement('label');
+        newPlaceDescLabel.setAttribute('for', 'place-description');
+        newPlaceDescLabel.classList.add('place-label');
+        newPlaceDescLabel.appendChild(document.createTextNode('Description:'));
+        let newPlaceDescInput = document.createElement('input');
+        newPlaceDescInput.setAttribute('placeholder', 'Description');
+        newPlaceDescInput.setAttribute('name', 'place-description');
+        newPlaceDescInput.setAttribute('id', 'place-description');
+        newPlaceDescInput.setAttribute('type', 'text');
+        newPlaceDescDiv.appendChild(newPlaceDescLabel);
+        newPlaceDescDiv.appendChild(newPlaceDescInput);
+        let newPlaceLatitudeDiv = document.createElement('div');
+        var newPlaceLatitudeLabel = document.createElement('label');
+        newPlaceLatitudeLabel.setAttribute('for', 'place-latitude');
+        newPlaceLatitudeLabel.classList.add('place-label');
+        newPlaceLatitudeLabel.appendChild(document.createTextNode('Latitude:'));
+        let newPlaceLatitudeInput = document.createElement('input');
+        newPlaceLatitudeInput.setAttribute('name', 'place-latitude');
+        newPlaceLatitudeInput.setAttribute('id', 'place-latitude');
+        newPlaceLatitudeInput.setAttribute('type', 'text');
+        newPlaceLatitudeInput.value = map.getCenter().lat;
+        newPlaceLatitudeDiv.appendChild(newPlaceLatitudeLabel);
+        newPlaceLatitudeDiv.appendChild(newPlaceLatitudeInput);
+        let newPlaceLongitudeDiv = document.createElement('div');
+        let newPlaceLongitudeLabel = document.createElement('label');
+        newPlaceLongitudeLabel.setAttribute('for', 'place-longitude');
+        newPlaceLongitudeLabel.classList.add('place-label');
+        newPlaceLongitudeLabel.appendChild(document.createTextNode('Longitude:'));
+        let newPlaceLongitudeInput = document.createElement('input');
+        newPlaceLongitudeInput.setAttribute('name', 'place-longitude');
+        newPlaceLongitudeInput.setAttribute('id', 'place-longitude');
+        newPlaceLongitudeInput.setAttribute('type', 'text');
+        newPlaceLongitudeInput.value = map.getCenter().lng;
+        newPlaceLongitudeDiv.appendChild(newPlaceLongitudeLabel);
+        newPlaceLongitudeDiv.appendChild(newPlaceLongitudeInput);
+        let newPlaceSubmit = document.createElement('button');
+        newPlaceSubmit.setAttribute('id', 'place-submit');
+        newPlaceSubmit.setAttribute('name', 'place-submit');
+        newPlaceSubmit.setAttribute('type', 'button');
+        newPlaceSubmit.appendChild(document.createTextNode('Submit New Place'));
+        newPlaceSubmit.addEventListener('click', function () {
+            submitNewPlace(map);
+        });
+        let form = document.querySelector('fieldset');
+        form.appendChild(newPlaceNameDiv);
+        form.appendChild(newPlaceDescDiv);
+        form.appendChild(newPlaceLatitudeDiv);
+        form.appendChild(newPlaceLongitudeDiv);
+        form.appendChild(newPlaceSubmit);
+        //the event listener for the new place form
+        /*placeSubmit.addEventListener('click', function () {
+            //create the form data to send
+            var formData = new FormData();
+            formData.append('place-name', document.querySelector('#place-name').value);
+            formData.append('place-description', document.querySelector('#place-description').value);
+            formData.append('place-latitude', document.querySelector('#place-latitude').value);
+            formData.append('place-longitude', document.querySelector('#place-longitude').value);
+            //post the new place
+            fetch('/places/new', {
+                //send cookies with the request
+                credentials: 'same-origin',
+                method: 'post',
+                body: formData
+            })
+            .then(function (response) {
+                return response.json();
+            })
+            .then(function (placeJson) {
+                if (placeJson.error === true) {
+                    throw new Error(placeJson.error_description);
+                }
+                //remove un-needed form elements
+                //iterate through labels and remove parent div elements
+                var labels = document.querySelectorAll('.place-label');
+                for (var i = 0; i < labels.length; ++i) {
+                    form.removeChild(labels[i].parentNode);
+                }
+                form.removeChild(document.querySelector('#place-submit'));
+                var newPlaceButton = document.querySelector('#create-new-place');
+                //in order to remove a DOM Node, you need to run removeChild on the parent Node
+                newPlaceButton.parentNode.removeChild(newPlaceButton);
+                //add place marker
+                var newOption = document.createElement('option');
+                newOption.setAttribute('value', placeJson.uri);
+                newOption.appendChild(document.createTextNode(placeJson.name));
+                newOption.dataset.latitude = placeJson.latitude;
+                newOption.dataset.longitude = placeJson.longitude;
+                selectEl.appendChild(newOption);
+                var newPlaceMarkerIcon = document.createElement('div');
+                newPlaceMarkerIcon.classList.add('marker');
+                new mapboxgl.Marker(newPlaceMarkerIcon, {offset: [-10, -20]}).setLngLat([placeJson.longitude, placeJson.latitude]).addTo(map);
+                map.flyTo({center: [placeJson.longitude, placeJson.latitude]});
+
+                newPlaceMarkerIcon.addEventListener('click', function () {
+                    map.flyTo({center: [placeJson.longitude, placeJson.latitude]});
+                    selectPlace(placeJson.uri);
+                });
+                //make selected
+                selectPlace(placeJson.uri);
+            }).catch(function (placeError) {
+                alertify.reset();
+                alertify.error(placeError);
+            });
+        });*/
+    });
+
+    return newLocationButton;
+}

resources/assets/es6/parse-location.js

@@ -0,0 +1,10 @@
+//parse-location.js
+
+//text = `POINT(lon lat)`
+export default function parseLocation(text) {
+    let coords = /POINT\((.*)\)/.exec(text);
+    let parsedLongitude = coords[1].split(' ')[0];
+    let parsedLatitude = coords[1].split(' ')[1];
+
+    return {'latitude': parsedLatitude, 'longitude': parsedLongitude};
+}

resources/assets/es6/persist-form.js

@@ -0,0 +1,32 @@
+//persist-form.js
+
+import webStorage from 'webStorage';
+import alertify from 'alertify.js';
+
+const loadData = () => {
+    let replyTo = document.querySelector('#in-reply-to');
+    replyTo.value = webStorage.getItem('replyTo');
+    let content = document.querySelector('#content');
+    content.value = webStorage.getItem('content');
+}
+
+const saveData = () => {
+    let replyTo = document.querySelector('#in-reply-to');
+    let content = document.querySelector('#content');
+    webStorage.setItem('replyTo', replyTo.value);
+    webStorage.setItem('content', content.value);
+    alertify.success('Auto-saved data');
+}
+
+const clearData = () => {
+    webStorage.removeItem('replyTo');
+    webStorage.removeItem('content');
+}
+
+export default function persistFormData()
+{
+    let form = document.querySelector('form[name="micropub"]');
+    form.addEventListener('change', saveData);
+    form.addEventListener('submit', clearData);
+    loadData();
+}

resources/assets/es6/select-place.js

@@ -0,0 +1,11 @@
+//select-place.js
+
+export default function selectPlaceInForm(uri) {
+    if (document.querySelector('select')) {
+        if (uri == 'current-location') {
+            document.querySelector('select [id="option-coords"]').selected = true
+        } else {
+            document.querySelector('select [value="' + uri + '"]').selected = true
+        }
+    }
+}

resources/assets/es6/submit-place.js

@@ -0,0 +1,71 @@
+//submit-place.js
+
+import alertify from 'alertify.js';
+
+export default function submitNewPlace(map) {
+    //create the form data to send
+    let formData = new FormData();
+    formData.append('place-name', document.querySelector('#place-name').value);
+    formData.append('place-description', document.querySelector('#place-description').value);
+    formData.append('place-latitude', document.querySelector('#place-latitude').value);
+    formData.append('place-longitude', document.querySelector('#place-longitude').value);
+    //post the new place
+    fetch('/places/new', {
+        //send cookies with the request
+        credentials: 'same-origin',
+        method: 'post',
+        body: formData
+    }).then(function (response) {
+        return response.json();
+    }).then(function (placeJson) {
+        if (placeJson.error === true) {
+            throw new Error(placeJson.error_description);
+        }
+        //remove un-needed form elements
+        let form = document.querySelector('fieldset');
+        //iterate through labels and remove parent div elements
+        let labels = document.querySelectorAll('.place-label');
+        for (let label of labels) {
+            form.removeChild(label.parentNode);
+        }
+        form.removeChild(document.querySelector('#place-submit'));
+        let newPlaceButton = document.querySelector('#create-new-place');
+        //in order to remove a DOM Node, you need to run removeChild on the parent Node
+        newPlaceButton.parentNode.removeChild(newPlaceButton);
+        //remove current location from map
+        let source = map.getSource('points');
+        let newFeatures = source._data.features.filter(function (item) {
+            return item.properties.title != 'Current Location';
+        });
+        //add new place to map
+        newFeatures.push({
+            "type": "Feature",
+            "geometry": {
+                "type": "Point",
+                "coordinates": [placeJson.longitude, placeJson.latitude]
+            },
+            "properties": {
+                "title": placeJson.name,
+                "icon": "circle",
+                "uri": placeJson.uri
+            }
+        });
+        let newSource = {
+            "type": "FeatureCollection",
+            "features": newFeatures
+        }
+        map.getSource('points').setData(newSource);
+        //add new place to select menu
+        let selectElement = document.querySelector('select');
+        let newlyCreatedPlaceOption = document.createElement('option');
+        newlyCreatedPlaceOption.setAttribute('value', placeJson.uri);
+        newlyCreatedPlaceOption.appendChild(document.createTextNode(placeJson.name));
+        newlyCreatedPlaceOption.dataset.latitude = placeJson.latitude;
+        newlyCreatedPlaceOption.dataset.longitude = placeJson.longitude;
+        selectElement.appendChild(newlyCreatedPlaceOption);
+        document.querySelector('select [value="' + placeJson.uri + '"]').selected = true;
+    }).catch(function (placeError) {
+        alertify.reset();
+        alertify.error(placeError);
+    });
+}

resources/views/allnotes.blade.php

@@ -19,11 +19,11 @@ Notes «
 @stop
 
 @section('scripts')
-@include('templates.mapbox-links')
 
-<script src="/assets/frontend/Autolinker.min.js"></script>
+<!--<script src="/assets/frontend/Autolinker.min.js"></script>
-<script src="/assets/js/links.js"></script>
+<script src="/assets/js/links.js"></script>-->
-<script src="/assets/js/maps.js"></script>
+<link rel="stylesheet" href="/assets/frontend/mapbox-gl.css">
+<script defer src="/assets/js/maps.js"></script>
 
 <script src="/assets/prism/prism.js"></script>
 <link rel="stylesheet" href="/assets/prism/prism.css">

resources/views/micropubnewnotepage.blade.php

@@ -26,19 +26,19 @@ New Note «
 @endif
   @include('templates.new-note-form', [
     'micropub' => true,
-    'action' => '/notes/new',
+    'action' => '/notes/new'
-    'id' => 'newnote'
   ])
 @stop
 
 @section('scripts')
-@include('templates.mapbox-links')
+<script>
-
+    window.Promise || document.write('<script src="https://unpkg.com/promise-polyfill/promise.min.js"><\/script>');
-<script src="/assets/frontend/fetch.js"></script>
+    window.fetch || document.write('<script src="https://unpkg.com/whatwg-fetch/fetch.js"><\/script>');
-<script src="/assets/frontend/store2.min.js"></script>
+</script>
-<script src="/assets/frontend/alertify.js"></script>
+<!--<script src="/assets/frontend/store2.min.js"></script>
-<script src="/assets/js/form-save.js"></script>
+<script src="/assets/js/form-save.js"></script>-->
-<script src="/assets/js/newnote.js"></script>
+<script defer src="/assets/js/newnote.js"></script>
 
 <link rel="stylesheet" href="/assets/frontend/alertify.css">
+<link rel="stylesheet" href="/assets/frontend/mapbox-gl.css">
 @stop

resources/views/templates/mapbox-links.blade.php

@@ -1,2 +1,2 @@
-<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v0.28.0/mapbox-gl.css" integrity="sha384-dCW/5IRoXPf5hkwrejBih/Unwf0nefL7NDk8hFitylhgPyk1YB4K9nwT5thMO2lV" crossorigin="anonymous">
+<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.css">
-<script src="https://api.mapbox.com/mapbox-gl-js/v0.28.0/mapbox-gl.js" integrity="sha384-Q8pgRmod5Yo3TQg5NSTfk4lNXS6Seqm160e2XA+RXpgGqdGOzX5c+UU6IoohcdWZ" crossorigin="anonymous"></script>
+<script src="https://api.mapbox.com/mapbox-gl-js/v0.29.0/mapbox-gl.js" ></script>

resources/views/templates/new-note-form.blade.php

@@ -1,4 +1,4 @@
-<form action="{{ $action }}" method="post" enctype="multipart/form-data" accept-charset="utf-8" id="{{ $id }}">
+<form action="{{ $action }}" method="post" enctype="multipart/form-data" accept-charset="utf-8"@if($micropub) name="micropub"@endif>
   <input type="hidden" name="_token" value="{{ csrf_token() }}">
   <fieldset class="note-ui">
   	<legend>New Note</legend>

resources/views/templates/note.blade.php

@@ -26,6 +26,7 @@
       </div>
     </div>
 @if ($note->placeLink)
-    <div class="map" data-latitude="{{ $note->latitude }}" data-longitude="{{ $note->longitude }}"></div>
+    <div class="map" data-latitude="{{ $note->latitude }}" data-longitude="{{ $note->longitude }}" data-id="{{ $note->nb60id }}"></div>
+    <script>var geojson{{ $note->nb60id }} = {!! $note->geoJson !!};</script>
 @endif
   </div>

webpack.config.js

@@ -0,0 +1,34 @@
+const webpack = require('webpack');
+
+const config = {
+  context: __dirname + '/resources/assets/es6',
+  entry: {
+    //app: './app.js',
+    maps: './maps.js',
+    newnote: './newnote.js'
+  },
+  output: {
+    path: __dirname + '/public/assets/js',
+    filename: '[name].js'
+  },
+  module: {
+    loaders: [
+      {
+        test: /\.js$/,
+        exclude: __dirname + '/node_modules/',
+        loader: 'babel-loader'
+      }
+    ]
+  },
+  plugins: [
+    new webpack.optimize.UglifyJsPlugin({
+      compress: true,
+      mangle: {
+        except: ['fetch', 'map'],
+        screw_ie8: true
+      }
+    })
+  ]
+};
+
+module.exports = config;