Generate geojson in javascript

app/Http/Controllers/NotesController.php

@@ -50,12 +50,6 @@ 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
-                );
             }
             /*$mediaLinks = [];
             foreach ($note->media()->get() as $media) {
@@ -157,12 +151,6 @@ 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
-            );
         }
 
         return view('notes.show', compact('note', 'replies', 'reposts', 'likes'));
@@ -355,19 +343,20 @@ class NotesController extends Controller
     {
         $icon = $icon ?? 'marker';
 
-        return '{
-            "type": "FeatureCollection",
-            "features": [{
-                "type": "Feature",
-                "geometry": {
-                    "type": "Point",
-                    "coordinates": [' . $longitude . ', ' . $latitude . ']
-                },
-                "properties": {
-                    "title": "' . $title . '",
-                    "icon": "' . $icon . '"
-                }
-            }]
-        }';
+        return
+"{
+    'type': 'FeatureCollection',
+    'features': [{
+        'type': 'Feature',
+        'geometry': {
+            'type': 'Point',
+            'coordinates': [$longitude, $latitude]
+        },
+        'properties': {
+            'title': '$title',
+            'icon': '$icon'
+        }
+    }]
+}";
     }
 }

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>