Fix mapbox-gl maps

app/Http/Controllers/NotesController.php

@@ -356,6 +356,8 @@ class NotesController extends Controller
         $icon = $icon ?? 'marker';
 
         return '{
+            "type": "FeatureCollection",
+            "features": [{
                 "type": "Feature",
                 "geometry": {
                     "type": "Point",
@@ -365,6 +367,7 @@ class NotesController extends Controller
                     "title": "' . $title . '",
                     "icon": "' . $icon . '"
                 }
+            }]
         }';
     }
 }

resources/assets/es6/mapbox-utils.js

@@ -41,8 +41,7 @@ const makeMapMenu = (map) => {
 export default function addMap(div, position = null, places = null) {
     let dataLatitude = div.dataset.latitude;
     let dataLongitude = div.dataset.longitude;
-    let dataId = div.dataset.id;
-    let data = window['geojson'+dataId];
+    let data = window['geojson'+div.dataset.id];
     if (data == null) {
         data = {
             'type': 'FeatureCollection',
@@ -94,15 +93,13 @@ export default function addMap(div, position = null, places = null) {
     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',
+            'source': {
+                'type': 'geojson',
+                'data': data
+            },
             'layout': {
                 'icon-image': '{icon}-15',
                 'text-field': '{title}',

resources/assets/es6/maps.js

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

webpack.config.js

@@ -15,6 +15,7 @@ const config = {
   },
   devtool: 'source-map',
   module: {
+    noParse: [/(mapbox-gl)\.js$/],
     loaders: [
       {
         test: /\.js$/,