Generate geojson in javascript

resources/assets/es6/mapbox-utils.js

@@ -55,10 +55,15 @@ const makeMapMenu = (map) => {
 
 //the main function
 export default function addMap(div, position = null, places = null) {
+    let data;
     let dataLatitude = div.dataset.latitude;
     let dataLongitude = div.dataset.longitude;
-    let data = window['geojson'+div.dataset.id];
-    if (data == null) {
+    let dataName = div.dataset.name;
+    let dataMarker = div.dataset.marker;
+    if (dataMarker == '') {
+        dataMarker = 'circle';
+    }
+    if (dataName == null) {
         data = {
             'type': 'FeatureCollection',
             'features': [{
@@ -74,6 +79,21 @@ export default function addMap(div, position = null, places = null) {
                 }
             }]
         };
+    } else {
+        data = {
+            'type': 'FeatureCollection',
+            'features': [{
+                'type': 'Feature',
+                'geometry': {
+                    'type': 'Point',
+                    'coordinates': [dataLongitude, dataLatitude]
+                },
+                'properties': {
+                    'title': dataName,
+                    'icon': dataMarker,
+                }
+            }]
+        };
     }
     if (places != null) {
         for (let place of places) {

resources/views/templates/note.blade.php

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