I did all the changes according to given in this link https://gist.github.com/nabeelio/8b7ab29fb67dfe27284d63d7136388dc
but I still have no map on my front page
In Template Modifications section I applied step number 1 and step number 2 , my final states of core/templates/acarsmap.tpl (not .tpl in my rootfiles. it is .php) and core/templates/route_map.tpl ( not .tpl again) are like ;
ACARSMAP.PHP
<?php if(!defined(‘IN_PHPVMS’) && IN_PHPVMS !== true) { die(); } ?>
<?php
/**
* These are some options for the ACARS map, you can change here
*
* By default, the zoom level and center are ignored, and the map
* will try to fit the all the flights in. If you want to manually set
* the zoom level and center, set “autozoom” to false.
*
* You can use these MapTypeId’s:
* http://code.google.com/apis/maps/documentation/v3/reference.html#MapTypeId
*
* Change the “TERRAIN” to the “Constant” listed there - they are case-sensitive
*
* Also, how to style the acars pilot list table. You can use these style selectors:
*
* table.acarsmap { }
* table.acarsmap thead { }
* table.acarsmap tbody { }
* table.acarsmap tbody tr.even { }
* table.acarsmap tbody tr.odd { }
*/
?>
<div class=“mapcenter” align=“center”>
<div id=“acarsmap” style=“width:<?php echo Config::Get(‘MAP_WIDTH’);?>; height: <?php echo Config::Get(‘MAP_HEIGHT’)?>”></div>
</div>
<?php
/* See below for details and columns you can use in this table */
?>
<table border = “0” width=“100%” class=“acarsmap”>
<thead>
<tr>
<td><b>Pilot</b></td>
<td><b>Flight Number</b></td>
<td><b>Departure</b></td>
<td><b>Arrival</b></td>
<td><b>Status</b></td>
<td><b>Altitude</b></td>
<td><b>Speed</b></td>
<td><b>Distance/Time Remain</b></td>
</tr>
</thead>
<tbody id=“pilotlist”></tbody>
</table>
<script src=“<?php echo SITE_URL?>/lib/js/base_map.js”></script>
<script src=“<?php echo SITE_URL?>/lib/js/acarsmap.js”></script>
<?php
/* This is the template which is used in the table above, for each row.
Be careful modifying it. You can simply add/remove columns, combine
columns too. Keep each “section” (<%=…%>) intact
Variables you can use (what they are is pretty obvious)
Variable: Notes:
<%=flight.pilotid%>
<%=flight.firstname%>
<%=flight.lastname%>
<%=flight.pilotname%> First and last combined
<%=flight.flightnum%>
<%=flight.depapt%> Gives the airport name
<%=flight.depicao%>
<%=flight.arrapt%> Gives the airport name
<%=flight.arricao%>
<%=flight.phasedetail%>
<%=flight.heading%>
<%=flight.alt%>
<%=flight.gs%>
<%=flight.disremaining%>
<%=flight.timeremaning%>
<%=flight.aircraft%> Gives the registration
<%=flight.aircraftname%> Gives the full name
<%=flight.client%> FSACARS/Xacars/FSFK, etc
<%=flight.trclass%> “even” or “odd”
You can also use logic in the templating, if you so choose:
http://ejohn.org/blog/javascript-micro-templating/
*/
?>
<script type=“text/html” id=“acars_map_row”>
<tr class=“<%=flight.trclass%>”>
<td><a href=“<?php echo url(‘/profile/view’);?>/<%=flight.pilotid%>”><%=flight.pilotid%> - <%=flight.pilotname%></a></td>
<td><%=flight.flightnum%></td>
<td><%=flight.depicao%></td>
<td><%=flight.arricao%></td>
<td><%=flight.phasedetail%></td>
<td><%=flight.alt%></td>
<td><%=flight.gs%></td>
<td><%=flight.distremaining%> <?php echo Config::Get(‘UNITS’);?> / <%=flight.timeremaining%></td>
</tr>
</script>
<?php
/* This is the template for the little map bubble which pops up when you click on a flight
Same principle as above, keep the <%=…%> tags intact. The same variables are available
to use here as are available above.
*/
?>
<script type=“text/html” id=“acars_map_bubble”>
<span style=“font-size: 10px; text-align:left; width: 100%” align=“left”>
<a href=“<?php echo url(‘/profile/view’);?>/<%=flight.pilotid%>”><%=flight.pilotid%> - <%=flight.pilotname%></a><br />
<strong>Flight <%=flight.flightnum%></strong> (<%=flight.depicao%> to <%=flight.arricao%>)<br />
<strong>Status: </strong><%=flight.phasedetail%><br />
<strong>Dist/Time Remain: </strong><%=flight.distremaining%> <?php echo Config::Get(‘UNITS’);?> / <%=flight.timeremaining%><br />
</span>
</script>
<?php
/* This is a small template for information about a navpoint popup
Variables available:
<%=nav.title%>
<%=nav.name%>
<%=nav.freq%>
<%=nav.lat%>
<%=nav.lng%>
<%=nav.type%> 2=NDB 3=VOR 4=DME 5=FIX 6=TRACK
*/
?>
<script type=“text/html” id=“navpoint_bubble”>
<span style=“font-size: 10px; text-align:left; width: 100%” align=“left”>
<strong>Name: </strong><%=nav.title%> (<%=nav.name%>)<br />
<strong>Type: </strong>
<?php /* Show the type of point */ ?>
<% if(nav.type == 2) { %> NDB <% } %>
<% if(nav.type == 3) { %> VOR <% } %>
<% if(nav.type == 4) { %> DME <% } %>
<% if(nav.type == 5) { %> FIX <% } %>
<% if(nav.type == 6) { %> TRACK <% } %>
<br />
<?php /* Only show frequency if it’s not a 0*/ ?>
<% if(nav.freq != 0) { %>
<strong>Frequency: </strong><%=nav.freq%>
<% } %>
</span>
</script>
<script type=“text/javascript”>
<?php
/* These are the settings for the Google map. You can see the
Google API reference if you want to add more options.
There’s two options I’ve added:
autozoom: This will automatically center in on/zoom
so all your current flights are visible. If false,
then the zoom and center you specify will be used instead
refreshTime: Time, in seconds * 1000 to refresh the map.
The default is 10000 (10 seconds)
*/
?>
const opts = {
render_elem: ‘acarsmap’,
provider: ‘<?php echo Config::Get(“MAP_TYPE”); ?>’,
autozoom: true,
zoom: <?php echo Config::Get(‘MAP_ZOOM_LEVEL’); ?>,
center: L.latLng(“<?php echo Config::Get(‘MAP_CENTER_LAT’); ?>”, “<?php echo Config::Get(‘MAP_CENTER_LNG’); ?>”),
refreshTime: 10000
};
renderAcarsMap(opts);
</script>
and
ROUTEMAP.PHP
<?php if(!defined(‘IN_PHPVMS’) && IN_PHPVMS !== true) { die(); } ?>
<h3>Route Map</h3>
<div class=“mapcenter” align=“center”>
<div id=“routemap” style=“width:<?php echo Config::Get(‘MAP_WIDTH’);?>; height: <?php echo Config::Get(‘MAP_HEIGHT’)?>”></div>
</div>
<?php
/**
*
* This is the new Google Maps v3 code. Be careful of changing
* things here, only do something if you know what you’re doing.
*
* These are some options for the map, you can change here.
*
* This map is used for schedules and PIREPS
*
* By default, the zoom level and center are ignored, and the map
* will try to fit the all the flights in. If you want to manually set
* the zoom level and center, set “autozoom” to false.
*
* If you want to adjust the size of the map - Look at the above
* “routemap” div with the CSS width/height parameters. You can
* easily adjust it from there.
*
* And for reference, you want to tinker:
* http://code.google.com/apis/maps/documentation/v3/basics.html
*/
if(isset($pirep))
$mapdata = $pirep;
if(isset($schedule))
$mapdata = $schedule;
?>
<?php
/* This is a small template for information about a navpoint popup
Variables available:
<%=nav.title%>
<%=nav.name%>
<%=nav.freq%>
<%=nav.lat%>
<%=nav.lng%>
<%=nav.type%> 2=NDB 3=VOR 4=DME 5=FIX 6=TRACK
*/
?>
<script type=“text/html” id=“navpoint_bubble”>
<span style=“font-size: 10px; text-align:left; width: 100%” align=“left”>
<strong>Name: </strong><%=nav.title%> (<%=nav.name%>)<br />
<strong>Type: </strong>
<?php /* Show the type of point */ ?>
<% if(nav.type == 2) { %> NDB <% } %>
<% if(nav.type == 3) { %> VOR <% } %>
<% if(nav.type == 4) { %> DME <% } %>
<% if(nav.type == 5) { %> FIX <% } %>
<% if(nav.type == 6) { %> TRACK <% } %>
<br />
<?php /* Only show frequency if it’s not a 0*/ ?>
<% if(nav.freq != 0) { %>
<strong>Frequency: </strong><%=nav.freq%>
<% } %>
</span>
</script>
<?php
/* Below here is all the javascript for the map. Be careful of what you
modify!! */
?>
<script src=“<?php echo SITE_URL?>/lib/js/base_map.js”></script>
<script type=“text/javascript”>
// Write the PIREP data out into JSON
// The big reason being we don’t need to have PHP writing JS - yuck
const flight = JSON.parse(‘<?php echo json_encode($mapdata); ?>’);
console.log(flight);
const map = createMap({
render_elem: ‘routemap’,
provider: ‘<?php echo Config::Get(“MAP_TYPE”); ?>’,
});
const depCoords = L.latLng(flight.deplat, flight.deplng);
selDepMarker = L.marker(depCoords, {
icon: MapFeatures.icons.departure,
}).bindPopup(flight.depname).addTo(map);
const arrCoords = L.latLng(flight.arrlat, flight.arrlng);
selArrMarker = L.marker(arrCoords, {
icon: MapFeatures.icons.arrival,
}).bindPopup(flight.arrname).addTo(map);
let points = ;
points.push(depCoords);
// rendering for if there’s smartcars data
if(flight.rawdata instanceof Object
&& flight.rawdata.points !== undefined
&& Array.isArray(flight.rawdata.points)
) {
$.each(flight.rawdata.points, function(i, nav) {
if(nav.lat === undefined || nav.lng === undefined) {
return;
}
points.push(L.latLng(nav.lat, nav.lng));
});
} else {
$.each(flight.route_details, function(i, nav) {
const loc = L.latLng(nav.lat, nav.lng);
const icon = (nav.type === 3) ? MapFeatures.icons.vor : MapFeatures.icons.fix;
points.push(loc);
const marker = L.marker(loc, {
icon: icon,
title: nav.title,
})
.bindPopup(tmpl(“navpoint_bubble”, { nav: nav }))
.addTo(map);
});
}
points.push(arrCoords);
const selPointsLayer = L.geodesic([points], {
weight: 2,
opacity: 0.5,
color: ‘black’,
steps: 10
}).addTo(map);
map.fitBounds(selPointsLayer.getBounds());
</script>