Skip to content
This repository was archived by the owner on Dec 6, 2019. It is now read-only.

Commit e465cb5

Browse files
Nabeel Shahzadnabeelio
Nabeel Shahzad
authored and
nabeelio
committed
Changes for the PIREP map
1 parent 606ad29 commit e465cb5

File tree

3 files changed

+97
-63
lines changed

3 files changed

+97
-63
lines changed

‎core/templates/route_map.tpl‎

Lines changed: 49 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -64,41 +64,46 @@ if(isset($schedule))
6464
/* Below here is all the javascript for the map. Be careful of what you
6565
modify!! */
6666
?>
67+
<script src="<?php echo SITE_URL?>/lib/js/base_map.js"></script>
6768
<script type="text/javascript">
68-
var options = {
69-
mapTypeId: google.maps.MapTypeId.ROADMAP
70-
}
7169
72-
var map = new google.maps.Map(document.getElementById("routemap"), options);
73-
var dep_location = new google.maps.LatLng(<?php echo $mapdata->deplat?>,<?php echo $mapdata->deplng;?>);
74-
var arr_location = new google.maps.LatLng(<?php echo $mapdata->arrlat?>,<?php echo $mapdata->arrlng;?>);
70+
const map = createMap({
71+
render_elem: 'routemap',
72+
});
73+
74+
const depCoords = L.latLng(<?php echo $mapdata->deplat?>, <?php echo $mapdata->deplng;?>);
75+
const depMarker = L.marker(depCoords, {
76+
icon: L.icon({ iconUrl: depicon })
77+
}).bindPopup("<?php echo $mapdata->depname;?>").addTo(map);
7578
76-
var bounds = new google.maps.LatLngBounds();
77-
bounds.extend(dep_location);
78-
bounds.extend(arr_location);
79+
const arrCoords = L.latLng(<?php echo $mapdata->arrlat?>, <?php echo $mapdata->arrlng;?>);
80+
const arrMarker = L.marker(arrCoords, {
81+
icon: L.icon({ iconUrl: arricon })
82+
}).bindPopup("<?php echo $mapdata->arrname;?>").addTo(map);
7983
80-
var depMarker = new google.maps.Marker({
81-
position: dep_location,
82-
map: map,
83-
icon: depicon,
84-
title: "<?php echo $mapdata->depname;?>"
85-
});
84+
const icon_vor = L.icon({
85+
iconUrl: "<?php echo fileurl('/lib/images/icon_vor.png') ?>",
86+
iconSize: [19, 20],
87+
})
88+
const icon_fix = L.icon({
89+
iconUrl: "<?php echo fileurl('/lib/images/icon_fix.png') ?>",
90+
iconSize: [12, 15],
91+
})
92+
93+
// for drawing the line
94+
let points = [];
95+
points.push(depCoords);
8696
<?php
87-
/* Populate the route */
88-
if(is_array($mapdata->route_details))
89-
{
90-
$list = array();
91-
92-
foreach($mapdata->route_details as $route)
93-
{
97+
if(is_array($mapdata->route_details)) {
98+
foreach($mapdata->route_details as $route) {
9499
if($route->type == NAV_VOR)
95-
$icon = fileurl('/lib/images/icon_vor.png');
100+
$icon = 'icon_vor';
96101
else
97-
$icon = fileurl('/lib/images/icon_fix.png');
102+
$icon = 'icon_fix';
98103
99-
/* Build info array for the bubble */
104+
// Build info array for the bubble
100105
?>
101-
var v<?php echo $route->name?>_info = {
106+
const v<?php echo $route->name?>_info = {
102107
freq: "<?php echo $route->freq ?>",
103108
name: "<?php echo $route->name ?>",
104109
title: "<?php echo $route->title ?>",
@@ -107,47 +112,30 @@ if(is_array($mapdata->route_details))
107112
lng: "<?php echo $route->lng ?>"
108113
};
109114
110-
var v<?php echo $route->name?>_navpoint_info = tmpl("navpoint_bubble", {nav: v<?php echo $route->name?>_info});
111-
var v<?php echo $route->name?>_coords = new google.maps.LatLng(<?php echo $route->lat?>, <?php echo $route->lng?>);
112-
var v<?php echo $route->name?>_marker = new google.maps.Marker({
113-
position: v<?php echo $route->name?>_coords,
114-
map: map,
115-
icon: "<?php echo $icon; ?>",
115+
const <?php echo $route->name?>_point = L.latLng(<?php echo $route->lat?>, <?php echo $route->lng?>);
116+
points.push(<?php echo $route->name?>_point);
117+
118+
L.marker(<?php echo $route->name?>_point, {
119+
icon: <?php echo $icon ?>,
116120
title: "<?php echo $route->title; ?>",
117-
infowindow_content: v<?php echo $route->name?>_navpoint_info
118121
})
119-
120-
bounds.extend(v<?php echo $route->name?>_coords);
121-
122-
google.maps.event.addListener(v<?php echo $route->name?>_marker, 'click', function()
123-
{
124-
info_window = new google.maps.InfoWindow({
125-
content: this.infowindow_content,
126-
position: this.position
127-
});
128-
129-
info_window.open(map, this);
130-
});
122+
.bindPopup(tmpl("navpoint_bubble", {nav: v<?php echo $route->name?>_info}))
123+
.addTo(map);
131124
132125
<?php
133-
134-
// For the polyline
135-
$list[] = "v{$route->name}_coords";
136126
}
137127
}
138128
?>
139-
var arrMarker = new google.maps.Marker({
140-
position: arr_location,
141-
map: map,
142-
icon: arricon,
143-
title: "<?php echo $mapdata->arrname;?>"
144-
});
145129
146-
var flightPath = new google.maps.Polyline({
147-
path: [dep_location, <?php if(count($list) > 0) { echo implode(',', $list).','; }?> arr_location],
148-
strokeColor: "#FF0000", strokeOpacity: 1.0, strokeWeight: 2
149-
}).setMap(map);
130+
points.push(arrCoords);
150131
151-
// Resize the view to fit it all in
152-
map.fitBounds(bounds);
153-
</script>
132+
const geodesicLayer = L.geodesic([points], {
133+
weight: 3,
134+
opacity: 0.5,
135+
color: 'black',
136+
steps: 10
137+
}).addTo(map);
138+
139+
map.fitBounds(geodesicLayer.getBounds());
140+
141+
</script>

‎lib/js/base_map.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
/**
2+
* Basemap for leaflet
3+
*/
4+
5+
const createMap = (opts) => {
6+
7+
opts = Object.assign({
8+
render_elem: 'map',
9+
center: [29.98139, -95.33374],
10+
zoom: 5,
11+
maxZoom: 10,
12+
layers: [],
13+
set_marker: false,
14+
}, opts);
15+
16+
let feature_groups = [];
17+
const opencyclemap_phys_osm = new L.TileLayer(
18+
'http://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png?apikey=f09a38fa87514de4890fc96e7fe8ecb1', {
19+
maxZoom: 14,
20+
minZoom: 4,
21+
format: 'image/png',
22+
transparent: true
23+
});
24+
25+
feature_groups.push(opencyclemap_phys_osm);
26+
27+
const openaip_basemap_phys_osm = L.featureGroup(feature_groups);
28+
let map = L.map(opts.render_elem, {
29+
layers: [openaip_basemap_phys_osm],
30+
center: opts.center,
31+
zoom: opts.zoom,
32+
scrollWheelZoom: false,
33+
});
34+
35+
const attrib = L.control.attribution({ position: 'bottomleft' });
36+
attrib.addAttribution('<a href="https://www.thunderforest.com" target="_blank" style="">Thunderforest</a>');
37+
attrib.addAttribution('<a href="https://www.openaip.net" target="_blank" style="">openAIP</a>');
38+
attrib.addAttribution('<a href="https://www.openstreetmap.org/copyright" target="_blank" style="">OpenStreetMap</a> contributors');
39+
attrib.addAttribution('<a href="https://www.openweathermap.org" target="_blank" style="">OpenWeatherMap</a>');
40+
41+
attrib.addTo(map);
42+
43+
return map
44+
};

‎lib/skins/crystal/layout.tpl‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,9 @@ echo $page_htmlhead;
2929

3030
<?php /*Any custom Javascript should be placed below this line, after the above call */ ?>
3131

32-
32+
<link rel="stylesheet" href="<?php echo SITE_URL?>/lib/js/leaflet/leaflet.css" />
33+
<script src="<?php echo SITE_URL?>/lib/js/leaflet/leaflet.js"></script>
34+
<script src="<?php echo SITE_URL?>/lib/js/leaflet/Leaflet.Geodesic.js"></script>
3335

3436
</head>
3537
<body>
@@ -121,4 +123,4 @@ echo $page_htmlreq;
121123
</div>
122124
</div>
123125
</body>
124-
</html>
126+
</html>

0 commit comments

Comments
 (0)