#13 show airport map on details page with aerodome info

This commit is contained in:
Nabeel Shahzad
2017-06-15 22:45:25 -05:00
parent cfe1913411
commit d61b4f1c3c
23 changed files with 1407 additions and 68 deletions

View File

@@ -1,8 +1,14 @@
@extends('admin.app')
@section('content')
<section class="content-header"><h1>{!! $aircraft->name !!}</section>
<section class="content-header">
<h1 class="pull-left">{!! $aircraft->name !!}</h1></section>
<h1 class="pull-right">
<a class="btn btn-primary pull-right" style="margin-top: -10px;margin-bottom: 5px" href="{!! route('admin.aircraft.edit', $aircraft->id) !!}">Edit</a>
</h1>
</section>
<section class="content">
<div class="clearfix"></div>
<div class="row">
@include('admin.aircraft.show_fields')
</div>

View File

@@ -1,19 +1,35 @@
@extends('admin.app')
@section('content')
<section class="content-header">
<h1>
{!! $airport->name !!}
</h1>
</section>
<div class="content">
<div class="box box-primary">
<div class="box-body">
<div class="row" style="padding-left: 20px">
@include('admin.airports.show_fields')
<a href="{!! route('admin.airports.index') !!}" class="btn btn-default">Back</a>
<section class="content-header">
<h1 class="pull-left">{!! $airport->name !!} - {!! $airport->location !!}</h1>
<h1 class="pull-right">
<a class="btn btn-primary pull-right" style="margin-top: -10px;margin-bottom: 5px" href="{!! route('admin.airports.edit', $airport->id) !!}">Edit</a>
</h1>
</section>
<section class="content">
<div class="clearfix"></div>
<div class="row">
@include('admin.airports.show_fields')
</div>
<div class="box box-primary">
<div class="box-body">
<div class="row">
<div class="col-xs-12">
<div class="box-body">
<div id="map" style="width: 100%; height: 800px"></div>
</div>
</div>
</div>
</div>
</div>
</section>
@endsection
@section('scripts')
<script type="text/javascript">
phpvms_render_airspace_map({
lat: {!! $airport->lat !!},
lon: {!! $airport->lon !!},
});
</script>
@endsection

View File

@@ -1,38 +1,22 @@
<!-- Icao Field -->
<div class="form-group">
{!! Form::label('icao', 'ICAO:') !!}
<p>{!! $airport->icao !!}</p>
<div class="form-group col-sm-6">
<div class="box box-solid">
<div class="box-header with-border">
<h3 class="box-title">ICAO</h3>
</div>
<div class="box-body">
<p class="lead">{!! $airport->icao !!}<strong></p>
</div>
</div>
</div>
<div class="form-group">
{!! Form::label('name', 'Name:') !!}
<p>{!! $airport->name !!}</p>
<div class="form-group col-sm-6">
<div class="box box-solid">
<div class="box-header with-border">
<h3 class="box-title">Coordinates</h3>
</div>
<div class="box-body">
<p class="lead">{!! $airport->lat!!}/{!! $airport->lon !!}</p>
</div>
</div>
</div>
<div class="form-group">
{!! Form::label('location', 'Location:') !!}
<p>{!! $airport->location !!}</p>
</div>
<div class="form-group">
{!! Form::label('lat', 'Latitude:') !!}
<p>{!! $airport->lat !!}</p>
</div>
<div class="form-group">
{!! Form::label('lon', 'Longitude:') !!}
<p>{!! $airport->lon !!}</p>
</div>
<!-- Created At Field -->
<div class="form-group">
{!! Form::label('created_at', 'Created At:') !!}
<p>{!! $airport->created_at !!}</p>
</div>
<!-- Updated At Field -->
<div class="form-group">
{!! Form::label('updated_at', 'Updated At:') !!}
<p>{!! $airport->updated_at !!}</p>
</div>

View File

@@ -11,6 +11,11 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/2.3.3/css/AdminLTE.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/2.3.3/css/skins/_all-skins.min.css">
{{-- <link rel="stylesheet" href="/vendor/openlayers/ol.css" type="text/css"> --}}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css"
integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ=="
crossorigin=""/>
<!-- Ionicons -->
{{--<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">--}}
@@ -21,7 +26,7 @@
@yield('css')
</head>
<body class="skin-blue-light sidebar">
<body class="skin-blue sidebar-mini">
@if (!Auth::guest())
<div class="wrapper">
<!-- Main Header -->
@@ -177,7 +182,7 @@
</div>
@endif
<!-- jQuery 2.1.4 -->
<script src="https://cdn.jsdelivr.net/lodash/4.17.4/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>
@@ -188,6 +193,12 @@
<!-- AdminLTE App -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/2.3.3/js/app.min.js"></script>
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"
integrity="sha512-A7vV8IFfih/D732iSSKi20u/ooOfj/AGehOKq0f4vLT1Zr2Y+RX7C+w8A1gaSasGtRUZpF/NZgzSAu4/Gc41Lg=="
crossorigin=""></script>
{{-- <script src="/vendor/openlayers/ol.js"></script> --}}
<script src="/js/admin/admin.js"></script>
@yield('scripts')
</body>

View File

@@ -25,12 +25,12 @@
@include('admin.menu')
</ul>
<!-- /.sidebar-menu -->
<div class="panel-footer" style="position:absolute;bottom: 0; width:100%; text-align: center;">
{{-- <div class="panel-footer" style="position:absolute;bottom: 0; width:100%; text-align: center;">
<p class="small" style="padding-top: 5px;">
copyright &copy; 2017
<a href="http://www.phpvms.net" target="_blank">phpvms</a>
</p>
</div>
</div> --}}
</section>
<!-- /.sidebar -->
</aside>

View File

@@ -0,0 +1,22 @@
var circleCoordinates_{!! $id !!} = (
@foreach ($options['coordinates'] as $key => $coordinate)
new google.maps.LatLng({!! $coordinate['latitude'] !!}, {!! $coordinate['longitude'] !!})
@endforeach
);
var circle_{!! $id !!} = new google.maps.Circle({
strokeColor: '{!! $options['strokeColor'] !!}',
strokeOpacity: {!! $options['strokeOpacity'] !!},
strokeWeight: {!! $options['strokeWeight'] !!},
fillColor: '{!! $options['fillColor'] !!}',
fillOpacity: {!! $options['fillOpacity'] !!},
center: circleCoordinates_{!! $id !!},
radius: {!! $options['radius'] !!},
editable: {!! $options['editable'] ? 'true' : 'false' !!}
});
circle_{!! $id !!}.setMap({!! $options['map'] !!});
shapes.push({
'circle_{!! $id !!}': circle_{!! $id !!}
});

View File

@@ -0,0 +1,37 @@
@if (!$view->shared('javascript', false))
@if ($view->share('javascript', true)) @endif
@if ($options['async'])
<script async defer type="text/javascript" src="//maps.googleapis.com/maps/api/js?v={!! $options['version'] !!}&region={!! $options['region'] !!}&language={!! $options['language'] !!}&key={!! $options['key'] !!}&signed_in={!! $options['user'] ? 'true' : 'false' !!}&libraries=places&callback=initialize_method"></script>
@else
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?v={!! $options['version'] !!}&region={!! $options['region'] !!}&language={!! $options['language'] !!}&key={!! $options['key'] !!}&signed_in={!! $options['user'] ? 'true' : 'false' !!}&libraries=places"></script>
@endif
@if ($options['cluster'])
<script type="text/javascript" src="//googlemaps.github.io/js-marker-clusterer/src/markerclusterer.js"></script>
@endif
@if ($options['async'])
<script type="text/javascript">
var initialize_items = [];
function initialize_method() {
initialize_items.forEach(function(item) {
item.method();
});
}
</script>
@endif
@endif

View File

@@ -0,0 +1,106 @@
<div id="map-canvas-{!! $id !!}" style="width: 100%; height: 100%; margin: 0; padding: 0; position: relative; overflow: hidden;"></div>
<script type="text/javascript">
var maps = [];
function initialize_{!! $id !!}() {
var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow();
var position = new google.maps.LatLng({!! $options['latitude'] !!}, {!! $options['longitude'] !!});
var mapOptions_{!! $id !!} = {
@if ($options['center'])
center: position,
@endif
mapTypeId: google.maps.MapTypeId.{!! $options['type'] !!},
disableDefaultUI: @if (!$options['ui']) true @else false @endif,
scrollwheel: @if ($options['scrollWheelZoom']) true @else false @endif,
fullscreenControl: @if ($options['fullscreenControl']) true @else false @endif,
};
var map_{!! $id !!} = new google.maps.Map(document.getElementById('map-canvas-{!! $id !!}'), mapOptions_{!! $id !!});
map_{!! $id !!}.setTilt({!! $options['tilt'] !!});
var markers = [];
var infowindows = [];
var shapes = [];
@foreach ($options['markers'] as $key => $marker)
{!! $marker->render($key, $view) !!}
@endforeach
@foreach ($options['shapes'] as $key => $shape)
{!! $shape->render($key, $view) !!}
@endforeach
@if ($options['overlay'] == 'BIKE')
var bikeLayer = new google.maps.BicyclingLayer();
bikeLayer.setMap(map_{!! $id !!});
@endif
@if ($options['overlay'] == 'TRANSIT')
var transitLayer = new google.maps.TransitLayer();
transitLayer.setMap(map_{!! $id !!});
@endif
@if ($options['overlay'] == 'TRAFFIC')
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map_{!! $id !!});
@endif
var idleListener = google.maps.event.addListenerOnce(map_{!! $id !!}, "idle", function () {
map_{!! $id !!}.setZoom({!! $options['zoom'] !!});
@if (!$options['center'])
map_{!! $id !!}.fitBounds(bounds);
@endif
@if ($options['locate'])
if (typeof navigator !== 'undefined' && navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
map_{!! $id !!}.setCenter(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
});
}
@endif
});
var map = map_{!! $id !!};
@if (isset($options['eventBeforeLoad']))
{!! $options['eventBeforeLoad'] !!}
@endif
@if (isset($options['eventAfterLoad']))
google.maps.event.addListenerOnce(map_{!! $id !!}, "tilesloaded", function() {
{!! $options['eventAfterLoad'] !!}
});
@endif
@if ($options['cluster'])
var markerClusterOptions = {
imagePath: '{!! $options['clusters']['icon'] !!}',
gridSize: {!! $options['clusters']['grid'] !!},
maxZoom: @if ($options['clusters']['zoom'] === null) null @else {!! $options['clusters']['zoom'] !!} @endif,
averageCenter: @if ($options['clusters']['center'] === true) true @else false @endif,
minimumClusterSize: {!! $options['clusters']['size'] !!}
};
var markerCluster = new MarkerClusterer(map_{!! $id !!}, markers, markerClusterOptions);
@endif
maps.push({
key: {!! $id !!},
markers: markers,
infowindows: infowindows,
map: map_{!! $id !!},
shapes: shapes
});
}
@if (!$options['async'])
google.maps.event.addDomListener(window, 'load', initialize_{!! $id !!});
@endif
</script>

View File

@@ -0,0 +1,19 @@
@include('googlmapper::javascript')
@foreach ($items as $id => $item)
{!! $item->render($id, $view) !!}
@if ($options['async'])
<script type="text/javascript">
initialize_items.push({
method: initialize_{!! $id !!}
});
</script>
@endif
@endforeach

View File

@@ -0,0 +1,110 @@
@if ($options['user'] && $options['place'])
var service = new google.maps.places.PlacesService({!! $options['map'] !!});
var request = {
placeId: '{!! $options['place'] !!}'
};
service.getDetails(request, function(placeResult, status) {
if (status != google.maps.places.PlacesServiceStatus.OK) {
alert('Unable to find the Place details.');
return;
}
@endif
var markerPosition_{!! $id !!} = new google.maps.LatLng({!! $options['latitude'] !!}, {!! $options['longitude'] !!});
var marker_{!! $id !!} = new google.maps.Marker({
position: markerPosition_{!! $id !!},
@if ($options['user'] && $options['place'])
place: {
placeId: '{!! $options['place'] !!}',
location: { lat: {!! $options['latitude'] !!}, lng: {!! $options['longitude'] !!} }
},
attribution: {
source: document.title,
webUrl: document.URL
},
@endif
@if (isset($options['draggable']) && $options['draggable'] == true)
draggable:true,
@endif
title: {!! json_encode((string) $options['title']) !!},
label: {!! json_encode((string) $options['label']) !!},
animation: @if (empty($options['animation']) || $options['animation'] == 'NONE') '' @else google.maps.Animation.{!! $options['animation'] !!} @endif,
@if ($options['symbol'])
icon: {
path: google.maps.SymbolPath.{!! $options['symbol'] !!},
scale: {!! $options['scale'] !!}
}
@else
icon: {!! json_encode((is_array($options['icon']) ? (array) $options['icon'] : (string) $options['icon'])) !!}
@endif
});
bounds.extend(marker_{!! $id !!}.position);
marker_{!! $id !!}.setMap({!! $options['map'] !!});
markers.push(marker_{!! $id !!});
@if ($options['user'] && $options['place'])
marker_{!! $id !!}.addListener('click', function() {
infowindow.setContent('<a href="' + placeResult.website + '">' + placeResult.name + '</a>');
infowindow.open({!! $options['map'] !!}, this);
});
});
@else
@if (!empty($options['content']))
var infowindow_{!! $id !!} = new google.maps.InfoWindow({
content: {!! json_encode((string) $options['content']) !!}
});
@if (isset($options['maxWidth']))
infowindow_{!! $id !!}.setOptions({ maxWidth: {!! $options['maxWidth'] !!} });
@endif
@if (isset($options['open']) && $options['open'])
infowindow_{!! $id !!}.open({!! $options['map'] !!}, marker_{!! $id !!});
@endif
google.maps.event.addListener(marker_{!! $id !!}, 'click', function() {
@if (isset($options['autoClose']) && $options['autoClose'])
for (var i = 0; i < infowindows.length; i++) {
infowindows[i].close();
}
@endif
infowindow_{!! $id !!}.open({!! $options['map'] !!}, marker_{!! $id !!});
});
infowindows.push(infowindow_{!! $id !!});
@endif
@endif
@foreach (['eventClick', 'eventRightClick', 'eventMouseOver', 'eventMouseDown', 'eventMouseUp', 'eventMouseOut', 'eventDrag', 'eventDragStart', 'eventDragEnd', 'eventDomReady'] as $event)
@if (isset($options[$event]))
google.maps.event.addListener(marker_{!! $id !!}, '{!! str_replace('event', '', strtolower($event)) !!}', function (event) {
{!! $options[$event] !!}
});
@endif
@endforeach

View File

@@ -0,0 +1,12 @@
var overlayCoordinates_{!! $id !!} = new google.maps.LatLngBounds(
@foreach ($options['coordinates'] as $coordinate)
new google.maps.LatLng({!! $coordinate['latitude'] !!}, {!! $coordinate['longitude'] !!}),
@endforeach
);
overlay_{!! $id !!} = new google.maps.GroundOverlay(
'{!! $options['image'] !!}',
overlayCoordinates_{!! $id !!}
);
overlay_{!! $id !!}.setMap({!! $options['map'] !!});

View File

@@ -0,0 +1,21 @@
var polygonCoordinates_{!! $id !!} = [
@foreach ($options['coordinates'] as $coordinate)
new google.maps.LatLng({!! $coordinate['latitude'] !!}, {!! $coordinate['longitude'] !!}),
@endforeach
];
var polygon_{!! $id !!} = new google.maps.Polygon({
paths: polygonCoordinates_{!! $id !!},
strokeColor: '{!! $options['strokeColor'] !!}',
strokeOpacity: {!! $options['strokeOpacity'] !!},
strokeWeight: {!! $options['strokeWeight'] !!},
fillColor: '{!! $options['fillColor'] !!}',
fillOpacity: {!! $options['fillOpacity'] !!},
editable: {!! $options['editable'] ? 'true' : 'false' !!}
});
polygon_{!! $id !!}.setMap({!! $options['map'] !!});
shapes.push({
'polygon_{!! $id !!}': polygon_{!! $id !!}
});

View File

@@ -0,0 +1,20 @@
var polylineCoordinates_{!! $id !!} = [
@foreach ($options['coordinates'] as $coordinate)
new google.maps.LatLng({!! $coordinate['latitude'] !!}, {!! $coordinate['longitude'] !!}),
@endforeach
];
var polyline_{!! $id !!} = new google.maps.Polyline({
path: polylineCoordinates_{!! $id !!},
geodesic: {!! $options['strokeColor'] ? 'true' : 'false' !!},
strokeColor: '{!! $options['strokeColor'] !!}',
strokeOpacity: {!! $options['strokeOpacity'] !!},
strokeWeight: {!! $options['strokeWeight'] !!},
editable: {!! $options['editable'] ? 'true' : 'false' !!}
});
polyline_{!! $id !!}.setMap({!! $options['map'] !!});
shapes.push({
'polyline_{!! $id !!}': polyline_{!! $id !!}
});

View File

@@ -0,0 +1,21 @@
var rectangleCoordinates_{!! $id !!} = new google.maps.LatLngBounds(
@foreach ($options['coordinates'] as $key => $coordinate)
new google.maps.LatLng({!! $coordinate['latitude'] !!}, {!! $coordinate['longitude'] !!})@if (count($options['coordinates']) - 1 > $key), @endif
@endforeach
);
var rectangle_{!! $id !!} = new google.maps.Rectangle({
strokeColor: '{!! $options['strokeColor'] !!}',
strokeOpacity: {!! $options['strokeOpacity'] !!},
strokeWeight: {!! $options['strokeWeight'] !!},
fillColor: '{!! $options['fillColor'] !!}',
fillOpacity: {!! $options['fillOpacity'] !!},
bounds: rectangleCoordinates_{!! $id !!},
editable: {!! $options['editable'] ? 'true' : 'false' !!}
});
rectangle_{!! $id !!}.setMap({!! $options['map'] !!});
shapes.push({
'rectangle_{!! $id !!}': rectangle_{!! $id !!}
});

View File

@@ -0,0 +1,39 @@
<div id="map-canvas-{!! $id !!}" style="height: 100%; margin: 0; padding: 0;"></div>
<script type="text/javascript">
function initialize_{!! $id !!}() {
var bounds = new google.maps.LatLngBounds();
var position = new google.maps.LatLng({!! $options['latitude'] !!}, {!! $options['longitude'] !!});
var mapOptions = {
@if ($options['center'])
center: position,
@endif
zoom: {!! $options['zoom'] !!},
mapTypeId: google.maps.MapTypeId.{!! $options['type'] !!},
disableDefaultUI: @if (!$options['ui']) true @else false @endif
};
var map = new google.maps.Map(document.getElementById('map-canvas-{!! $id !!}'), mapOptions);
var panoramaOptions = {
position: position,
pov: {
heading: {!! $options['heading'] !!},
pitch: {!! $options['pitch'] !!}
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById('map-canvas-{!! $id !!}'), panoramaOptions);
map.setStreetView(panorama);
}
@if (!$options['async'])
google.maps.event.addDomListener(window, 'load', initialize_{!! $id !!});
@endif
</script>