Generate geojson in javascript

This commit is contained in:
Jonny Barnes 2017-06-17 11:49:47 +01:00
parent 0a621cd021
commit c17ef7d927
3 changed files with 42 additions and 30 deletions

View file

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

View file

@ -55,10 +55,15 @@ const makeMapMenu = (map) => {
//the main function //the main function
export default function addMap(div, position = null, places = null) { export default function addMap(div, position = null, places = null) {
let data;
let dataLatitude = div.dataset.latitude; let dataLatitude = div.dataset.latitude;
let dataLongitude = div.dataset.longitude; let dataLongitude = div.dataset.longitude;
let data = window['geojson'+div.dataset.id]; let dataName = div.dataset.name;
if (data == null) { let dataMarker = div.dataset.marker;
if (dataMarker == '') {
dataMarker = 'circle';
}
if (dataName == null) {
data = { data = {
'type': 'FeatureCollection', 'type': 'FeatureCollection',
'features': [{ '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) { if (places != null) {
for (let place of places) { for (let place of places) {

View file

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