Using mapbox from their CDN

resources/es6/mapbox-utils.js

@@ -1,8 +1,15 @@
 //mapbox-utils.js
-import mapboxgl from 'mapbox-gl/dist/mapbox-gl.js';
 import parseLocation from './parse-location';
 import selectPlaceInForm from './select-place';
 
+/*
+ * For specific lines on this file I have disabled the `no-undef`
+ * rule in ESLint. This is for the mapboxgl object which is defined
+ * in the mapbox-gl.js file that we pull in from their CDN before
+ * this script gets run.
+ */
+
+// eslint-disable-next-line no-undef
 mapboxgl.accessToken = 'pk.eyJ1Ijoiam9ubnliYXJuZXMiLCJhIjoiY2l2cDhjYW04MDAwcjJ0cG1uZnhqcm82ayJ9.qA2zeVA-nsoMh9IFrd5KQw';
 
 // Define some functions to be used in the default function.
@@ -130,6 +137,7 @@ export default function addMap(div, position = null, places = null) {
         dataLongitude = position.coords.longitude;
         dataLatitude = position.coords.latitude;
     }
+    // eslint-disable-next-line no-undef
     let map = new mapboxgl.Map({
         container: div,
         style: 'mapbox://styles/mapbox/streets-v9',
@@ -139,6 +147,7 @@ export default function addMap(div, position = null, places = null) {
     if (position == null) {
         map.scrollZoom.disable();
     }
+    // eslint-disable-next-line no-undef
     map.addControl(new mapboxgl.NavigationControl());
     div.appendChild(makeMapMenu(map));
     map.on('load', function () {
@@ -171,6 +180,7 @@ export default function addMap(div, position = null, places = null) {
         });
     }
     if (data.features && data.features.length > 1) {
+        // eslint-disable-next-line no-undef
         let bounds = new mapboxgl.LngLatBounds();
         for (let feature of data.features) {
             bounds.extend(feature.geometry.coordinates);

resources/views/notes/index.blade.php

@@ -21,6 +21,5 @@
 @section('scripts')
         <link rel="stylesheet" href="/assets/highlight/zenburn.css">
         <script defer src="/assets/js/links.js"></script>
-        <link rel="stylesheet" href="/assets/frontend/mapbox-gl.css">
-        <script defer src="/assets/js/maps.js"></script>
+        @include('templates.mapbox-links')
 @stop

resources/views/notes/show.blade.php

@@ -47,6 +47,5 @@
 @section('scripts')
             <link rel="stylesheet" href="/assets/highlight/zenburn.css">
             <script defer src="/assets/js/links.js"></script>
-            <link rel="stylesheet" href="/assets/frontend/mapbox-gl.css">
-            <script defer src="/assets/js/maps.js"></script>
+            @include('templates.mapbox-links')
 @stop

resources/views/search.blade.php

@@ -15,6 +15,5 @@
 @section('scripts')
             @include('templates.mapbox-links')
             <script src="/assets/js/links.js"></script>
-            <script src="/assets/js/maps.js"></script>
             <link rel="stylesheet" href="/assets/highlight/zenburn.css">
 @stop

resources/views/singleplace.blade.php

@@ -13,6 +13,4 @@
 
 @section('scripts')
 @include('templates.mapbox-links')
-
-            <script src="/assets/js/maps.js"></script>
 @stop

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

@@ -1,2 +1,13 @@
-            <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.29.0/mapbox-gl.js" ></script>
+<link
+    rel="stylesheet"
+    href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.css"
+    integrity="sha384-PYw71wfjazx+zrtu+VUANG9IUt/6zSXgC5ZXC+u0BIIND+7Whnehc/w3uYV+HxDY"
+    crossorigin="anonymous"
+>
+<script
+    src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.js"
+    integrity="sha384-1Iccp/Bs+CQID7AAwqG8UY72KSTYd2t9KFa5gY/4QPW1W6EfLHisdFg4Xvc8HwMa"
+    crossorigin="anonymous"
+    defer
+></script>
+<script defer src="/assets/js/maps.js"></script>