Generate geojson in javascript
This commit is contained in:
parent
0a621cd021
commit
c17ef7d927
3 changed files with 42 additions and 30 deletions
|
@ -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'
|
||||||
}
|
}
|
||||||
}]
|
}]
|
||||||
}';
|
}";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
24
resources/assets/es6/mapbox-utils.js
vendored
24
resources/assets/es6/mapbox-utils.js
vendored
|
@ -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) {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue