OSM Pirep Route_Map

William · June 4, 2020

Hey guys,

I'm really stuck on this one and need a fresh pair of eyes. Running CrewCenter with OSM Leaflet conversion.

On the frontend every Map works fine, Acars, Schedule details, Flown-Routes, Trackflight, etc.

In Admin it's a nightmare, I cannot get the Map to display in Pireps, no matter what I try. Layout file is ok, scripts are all there.

Pirep is parsing through json but something is preventing the Map from loading altogether. Any ideas?

Below is the current route_map code:

<?php if(!defined('IN_PHPVMS') && IN_PHPVMS !== true) { die(); } ?>
<?php

// SKINNED FOR CREWCENTER - OPTIMISED FOR PIREPVIEW

?>
<div align="center">
<h3>My Routes Map</h3>
    </div>
    <br />
<div id="routemap" style="width: 100%; height: <?php echo Config::Get('MAP_HEIGHT')?>"></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;  
?>

<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 src="<?php echo SITE_URL?>/lib/js/acarsmap.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: 'red',
	steps: 10
}).addTo(map);
map.fitBounds(selPointsLayer.getBounds());
</script>

<?php
// CLOSING FOR PIREPVIEW
?>

                </div>
            </div>
        </section>
    </div>
</section>

Edited June 4, 2020 by William

web541 · June 5, 2020

Nothing immediately jumps out, but it looks like it can't load the scripts properly. Have you updated the contents of your lib/js/acarsmap.js and lib/js/base_map.js? I'm going to assume so as the maps are working on the other pages.

The first error L is not defined means it cannot find/cannot load the lib/js/leaflet/leaflet.js file.

The createMap error means it cannot find/load the lib/js/base_map.js file.

The runtime error is particularly odd, that shouldn't be there.

Maybe check that your lib/js and lib/js/leaflet directory permissions to 755, clear your browser cache and reload? Seems weird that they work on all the other pages.

William · June 5, 2020

Absolutely works perfectly everywhere that's the front-end. Permissions are good, scripts are modified, cache is clear.

Still no dice. If I put back the Gmap route_map code iin Admin, map shows up. When using OSM route_map it doesn't.

Clearly basemap.js is unable to "create map" for some reason.

Can't pin my finger on it 🥵

Below Firefox console output

Edited June 5, 2020 by William

web541 · June 5, 2020

Is that in your admin/templates/route_map.php file? It looks like you may have just copied the front end version across and I don't think the OSM conversion includes the admin part.

Can you check whether you have the leaflet.js/leaflet.css files in your source code for that page (do a Ctrl + F for 'leaflet.js')? You may try replacing this:

<script src="<?php echo SITE_URL?>/lib/js/base_map.js"></script>
<script src="<?php echo SITE_URL?>/lib/js/acarsmap.js"></script>

with this:

<script src="<?php echo SITE_URL?>/lib/js/leaflet/leaflet.js"></script>
<script src="<?php echo SITE_URL?>/lib/js/base_map.js"></script>

or better yet in your admin/lib/layout/header.php file after this:

<?php
Template::Show('core_htmlhead.php');
?>

put this:

<link rel="stylesheet" href="<?php echo SITE_URL?>/lib/js/leaflet/leaflet.css" />
<script src="<?php echo SITE_URL?>/lib/js/leaflet/leaflet.js"></script>

and then you probably don't need the acarsmap.js <script> in admin/templates/route_map.php anymore as the map loading should be done in base_map.js.

Edited June 5, 2020 by web541

William · June 5, 2020

Hey, thanks, I really appreciate the help.

That is indeed the admin/templates/route_map.php file and yes I copied the code as it seemed the only resource available.

Yes the leaflet.js is there and loads up with the page (however I did add the script to admin/lib/layout), but I don't think that's the problem. It seems like it's not meant to work in Admin as you said and variables are missing. And that is way above my pay-grade..... Would be interesting to see if someone had it working on Crewcenter and has the right code.

Edited June 5, 2020 by William

web541 · June 5, 2020

2 hours ago, William said:

It seems like it's not meant to work in Admin as you said and variables are missing

No it should be working, I meant that the conversion was only for the front end so I don't think anyone actually thought about the admin map there. It's weird that it's not working.

2 hours ago, William said:

Would be interesting to see if someone had it working on Crewcenter and has the right code.

Not sure if anyone's swapped that part over but it's a good thought.

What happens if you put this:

<script>
var url = "<?php echo SITE_URL; ?>";
</script>

above this in your route_map.php file:

<script src="<?php echo SITE_URL?>/lib/js/base_map.js"></script>

Edited June 5, 2020 by web541

William · June 5, 2020

14 hours ago, web541 said:
What happens if you put this:
<script>
var url = "<?php echo SITE_URL; ?>";
</script>

Ha! Genius. Go figure. That script is already in the Admin header so I never thought of that. Brilliant

Works like a charm now, thanks!!

I got one more issue (well many really lol) but one particularly if you feel like helping me a little more

Edited June 6, 2020 by William

web541 · June 6, 2020

1 hour ago, William said:

Ha! Genius. Go figure. That script is already in the Admin header so I never thought of that. Brilliant

Works like a charm now, thanks!!

I think the admin uses 'baseurl' instead of 'url' that is used in the base_map.js file so if you just added it in I figured it should fix that up. Glad it's working 👍

1 hour ago, William said:

I got one more issue (well many really lol) but one particularly if you feel like helping me a little more

What's the issue? If I can't help then maybe someone else will jump in.

William · June 6, 2020

I would like to show the Map modal (as it show in Pirep Admin) somewhere else (aka the HubOps pirep admin page). I'll post the picture and the code below.

I'm missing something in my code as the map link shows a blank page.

<?php
if(!$pireps)
{
	echo '<p>No reports have been found</p></div>';
}
else
{
?>
<p>There are a total of <?php echo count($pireps);?> flight reports in this category. <a href="<?php echo SITE_URL ?>/<?php echo $mloc ?>.php/HubOps/approveallpireps/<?php echo $hub->icao ?>">Click to approve all PIREPs for this Hub</a></p>

<table class="cc_hubadm_tablea">
    <tr>
		<th>Date</th>
        <th>Flight</th>
        <th>From</th>
		<th>To</th>
		<th>Pilot</th>
		<th>Aircraft</th>
		<th>Flighttime</th>
		<th>Fuel Used</th>
		<th>Landingrate</th>
		<th>Finance</th>
		<th>Log</th>
		<th>Route</th>
		<?php if(PilotGroups::group_has_perm(Auth::$usergroups, FULL_ADMIN) || $pilotpermissions->editpireps == '1')
            { ?>
		<th>Comments</th>
		<th>Edit</th>
		<th>Options</th>
		<?php } ?>
        </tr>
    <?php
foreach($pireps as $pirep)
{
	if($pirep->accepted == PIREP_PENDING)
		$td_class = 'pending';
	else
		$td_class = '';

	$error = false;
?>
	<?php if($pirep->accepted == "0")
			{
	?>
	    <tr class="cc_hubadm_pendingfield">
		<?php } elseif($pirep->accepted == "2") { ?>
		<tr class="cc_hubadm_rejectedfield">
		<?php } else { ?>
			<tr>
		<?php } ?>
	<td><?php echo date(DATE_FORMAT, $pirep->submitdate); ?></td>
	<td><?php echo $pirep->code.$pirep->flightnum; ?><br />ID: <?php echo $pirep->pirepid; ?></td>
	<td><?php echo $pirep->depicao; ?><br /><?php echo substr($pirep->depname,0,20); ?></td>
	<td><?php echo $pirep->arricao; ?><br /><?php echo substr($pirep->arrname,0,20); ?></td>
	<td><?php echo PilotData::GetPilotCode($pirep->pcode, $pirep->pilotid) . '<br />' .$pirep->firstname .' ' . $pirep->lastname;?></td>
	<td><?php
			if($pirep->aircraft == '')
			{
				$error = true;
				echo '<span style="color: red">No aircraft! Edit to change</span>';
			}
			else
				echo $pirep->aircraft. "<br />($pirep->registration)";
			?></td>
	<td><?php echo $pirep->flighttime_stamp; ?></td>
	<td><?php echo ($pirep->fuelused!='') ? $pirep->fuelused.Config::Get('LIQUID_UNIT_NAMES', Config::Get('LiquidUnit')) : '-';?></td>
	<td><?php echo $pirep->landingrate; ?> ft/min</td>
	<td>Revenue: <?php echo FinanceData::formatMoney($pirep->revenue);?><br />
		Pilot Pay: <?php echo FinanceData::formatMoney($pirep->pilotpay);?></td>
	<td><span id="<?php echo $pirep->pirepid; ?>" class="log cc_hubadm_link_tbl_pir">View Log</span></td>

	<td><a class="cc_hubadm_link_tbl_pir"
	   href="<?php echo SITE_URL?>/admin/action.php/operations/viewmap?type=pirep&id=<?php echo $pirep->pirepid;?>">View Map</a>
	</td>
			<?php if(PilotGroups::group_has_perm(Auth::$usergroups, FULL_ADMIN) || $pilotpermissions->editpireps == '1')
            { ?>

	<td><span id="<?php echo $pirep->pirepid; ?>" class="comment cc_hubadm_link_tbl_pir">Comments <span class="hubcommentcount<?php echo $pirep->pirepid; ?>" style="font-size: 12px; margin-top: -3px; font-weight:bold;">(<?php echo PIREPData::getCommentCount($pirep->pirepid); ?>)</span></span></td>
	<td><span id="<?php echo $pirep->pirepid; ?>" class="editpirep cc_hubadm_link_tbl_pir">Edit</span></td>
				<td><span id="<?php echo $pirep->pirepid ?>" name="<?php echo $pirep->pilotid; ?>" class="acceptpirep cc_hubadm_greenbutt pirepactions">Accept</span><br /><span id="<?php echo $pirep->pirepid ?>" name="<?php echo $pirep->pilotid; ?>" class="rejectpirep cc_hubadm_redbutt pirepactions">Reject</span><br /><span id="<?php echo $pirep->pirepid ?>" name="<?php echo $pirep->pilotid; ?>" class="deletepirep cc_hubadm_redbutt pirepactions">Delete</span></td>
				<?php } ?>
	</tr>
	<?php
}
?>
</table>
<?php } ?>
<div id="pirepinfoscreen"></div>

Edited June 6, 2020 by William

web541 · June 6, 2020

Do you mean when you click on the "View" route button? I think you may be missing the 'jqmodal' class on the button as that is what it needs for the JS to pick it up:

<a class="cc_hubadm_link_tbl_pir"
	   href="<?php echo SITE_URL?>/admin/action.php/operations/viewmap?type=pirep&id=<?php echo $pirep->pirepid;?>">View Map</a>

should be:

<a class="cc_hubadm_link_tbl_pir jqModal" id="dialog"
	   href="<?php echo SITE_URL?>/admin/action.php/operations/viewmap?type=pirep&id=<?php echo $pirep->pirepid;?>">View</a>

and it won't hurt to throw in the id either. Will you be using this on the front end or the admin side? If it's the admin then it should work like that. If it's the front end then there are some scripts that need to be loaded to get it to work, namely the .jqmodal related ones in this file: https://github.com/DavidJClark/phpvms_5.5.x/blob/master/admin/lib/phpvmsadmin.js

Edited June 6, 2020 by web541

William · June 6, 2020

Thanks for the response. The problem is not so much the modal setup, it is instead the fact the map link/page sows up blank.

And yes, this is a module that shows up in the front end. However it has permissions coded in and also inherits Admin permissions too.

I tried copying over the code from Pirep_list, but it still comes up blank.

<a id="dialog" class="jqModal" style="font-weight: 400;"
	   href="<?php echo SITE_URL?>admin/action.php/operations/viewmap?type=pirep&id=<?php echo $pirep->pirepid;?>">View Map</a>

For the time being, I solved it by pointing to Pirep recap as shown here (it's dark because you're not logged in)

http://americanva.org/crew/index.php/pireps/view/310

But ideally I wanted to show the map only and put it on a modal

Edited June 6, 2020 by William

Sign In

OSM Pirep Route_Map

Recommended Posts

William

Link to comment

Share on other sites

web541

Link to comment

Share on other sites

William

Link to comment

Share on other sites

web541

Link to comment

Share on other sites

William

Link to comment

Share on other sites

web541

Link to comment

Share on other sites

William

Link to comment

Share on other sites

web541

Link to comment

Share on other sites

William

Link to comment

Share on other sites

web541

Link to comment

Share on other sites

William

Link to comment

Share on other sites

Join the conversation