Jump to content
Nabeel

Google Maps Conversion

Recommended Posts

On 5/19/2018 at 7:13 PM, shakamonkey88 said:

Yep - very happy to be on OSM now. Couple of shots here:

XkMRQG5.jpg

z1Rvx13.png

How did you get your actual route working on the Flight Report map? I just get a straight line... :(

Share this post


Link to post
Share on other sites
12 minutes ago, shakamonkey88 said:

Have you got information populating in the "rawdata" column in the pireps table of your db?

Yes, I have! Please, check file attached.

 

Untitled-1.zip

Edited by Felipe

Share this post


Link to post
Share on other sites

I have the same issue as ProAvia.
I think did install it all correctly. Even twice.
Bu the Acars maps is now completely white. In all browsers.

I am using the PHPVMS version 5.5x.
If I look via Devtools, I still see that

 

Having this error:

TypeError: $(...).ajaxForm is not a function[Meer info]  phpvms.js:27:2

<anoniem> http://www.vlmva.com/lib/js/phpvms.js:27:2
    j http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js:2:26855
    fireWith http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js:2:27673
    ready http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js:2:29465
    I http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js:2:29656


"Google Maps JavaScript API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys" util.js:226:33
"Google Maps JavaScript API warning: SensorNotRequired https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required"

 

Thanks ahead,

 

Rob

Share this post


Link to post
Share on other sites
On 7/11/2018 at 5:14 PM, aarbee said:

I have the same issue as ProAvia.
I think did install it all correctly. Even twice.
Bu the Acars maps is now completely white. In all browsers.

I am using the PHPVMS version 5.5x.
If I look via Devtools, I still see that

 

Having this error:

TypeError: $(...).ajaxForm is not a function[Meer info]  phpvms.js:27:2

<anoniem> http://www.vlmva.com/lib/js/phpvms.js:27:2
    j http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js:2:26855
    fireWith http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js:2:27673
    ready http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js:2:29465
    I http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js:2:29656


"Google Maps JavaScript API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys" util.js:226:33
"Google Maps JavaScript API warning: SensorNotRequired https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required"

 

Thanks ahead,

 

Rob

Seems like you're missing something - maybe jquery from your page

Share this post


Link to post
Share on other sites

I have two problems

1st: When I zoom in or zoom out (default zoom 100%), my map is resizing as well. Picture: https://imgur.com/a/uhzY8fC (zoom 110%)

2nd: How to get this map working in schedule briefing and pirep report?

Thanks in advance for your help!

Share this post


Link to post
Share on other sites
On 7/17/2018 at 8:46 AM, Relja12 said:

I have two problems

1st: When I zoom in or zoom out (default zoom 100%), my map is resizing as well. Picture: https://imgur.com/a/uhzY8fC (zoom 110%)

2nd: How to get this map working in schedule briefing and pirep report?

Thanks in advance for your help!

1st is a CSS issue with your site.

2nd the instructions should include the pirep report. Schedule briefing I'll try to take a look soon.

Share this post


Link to post
Share on other sites

sorry route map works perfectly well if flown with an acars tracking client
just forgot that my last was fspassenger flight

Share this post


Link to post
Share on other sites
On 7/3/2018 at 2:55 PM, shakamonkey88 said:

Have you got information populating in the "rawdata" column in the pireps table of your db?

I would like mine to show the route as well! How do I set it up to populate the raw data table?

Share this post


Link to post
Share on other sites

Nabeel, in the instructions, it mentions the "layout.tpl" file, but I don't use that file.  It was from a long time ago, where I had either missed having that file on  an update or whatever, but have never used it.  I show version 2.1.956, in my admin section.  If I use the layout.tpl, it eliminates my header image and such.

So, I think I need to just fix my layout.tpl file, to include some stuff??!  Once I get the layout.tpl fixed up, I can then update my googlemap issue.  Any help would be appreciated

Share this post


Link to post
Share on other sites
On ‎9‎/‎7‎/‎2018 at 12:56 PM, Heritage1 said:

Following Nabeel's instructions way back, I did manage to get the phpvms default acars map switched over to Leaflet, and it works Great, thanks again Nabeel !

Here's the link to view; http://seairtransport.net/crewcenter/index.php/acars

Looks great in Chrome - doesn't show map in IE11

Share this post


Link to post
Share on other sites

Hello,

I have managed to convert to the openmap, the only thing i cant manage is to convert the flown_routes map.

Is there anyone that can share the code for that?

 

Rick

Share this post


Link to post
Share on other sites

Yes I can, we all live in duh same world, DUH world of "FLIGHT" , hehehe, here ya go, you owe me a cup of Coffee for this one. It does work, see the below link if you'd like, its running full blown Leaflet map now, and works great with no holding of any keys to zoom in and out either. Here is the code for those who need it, and the Link to my site also running phpvms acars conversion.

http://seairtransport.net/crewcenter/index.php/acars

And as Always, MAKE SURE you make a copy of the flown_routes.php file somewhere before doing this, don't say I didn't warn you .

<?php if(!defined('IN_PHPVMS') && IN_PHPVMS !== true) { die(); } ?>
<?php
/**
 * You MUST CONFIGURE your app.config.php & local.config.php files to work with Leaflet ( see below example )
 * THIS SCRIPT IS ONLY FOR THE flown_routes_map.php if your running a tpl file, it should be the exact same
 */
 
?>
<br />
<br />
<div align="center">
<h3>My Routes Map</h3>
    </div>
    <br />
    
<div class="mapcenter" align="center">
	<div id="routemap" style="width: 1100px; height: 640px;"></div><!--Adjustable of course -->
</div>

<?php ////// Leave remarked out for Leaflet please ///////
/**
 * 
 * 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>



# local.config.php & app.config.php example scripting
# app.config.php file only !
# COPY & PASTE 

# Google Map Options changed as of 7/16/2018 to leaflet maps

Config::Set('MAP_WIDTH', '1100px'); #You can change your map dimensions here
Config::Set('MAP_HEIGHT', '640px'); #You can change your map dimensions here
Config::Set('MAP_TYPE', 'OpenStreetMap.BlackAndWhite'); # see Leaflet site many changable options are availible
Config::Set('MAP_LINE_COLOR', '#ff0000');
Config::Set('MAP_CENTER_LAT', '41.149433');
Config::Set('MAP_CENTER_LNG', '-96.425541');
Config::Set('MAP_ZOOM_LEVEL', 4); # !important - This "MUST BE" at zoom level 4 only


#local.config.php file only, this is the same scripting as the app.config.php file, they BOTH MUST BE THE SAME! 

# Google Map Options NOW USING Leaflet maps
Config::Set('MAP_WIDTH', '1100px');
Config::Set('MAP_HEIGHT', '640px');
# Valid types are G_NORMAL_MAP, G_SATELLITE_MAP, G_HYBRID_MAP, G_PHYSICAL_MAP remarked out from Google maps
Config::Set('MAP_TYPE', 'OpenStreetMap.BlackAndWhite'); #changeable through Leaflet web site, many options
Config::Set('MAP_LINE_COLOR', '#ff0000');
Config::Set('MAP_CENTER_LAT', '41.149433');
Config::Set('MAP_CENTER_LNG', '-96.425541');
Config::Set('MAP_ZOOM_LEVEL', 4); # MUST BE at level 4





 

Share this post


Link to post
Share on other sites
3 hours ago, Heritage1 said:

and works great with no holding of any keys to zoom in and out either.

 

Don’t think that Google maps couldn’t do this. You just need to change the gestureHandling variable in the google script. Google maps is a LOT more powerful than people think - most just don’t know how to use it fully. 

See here for more information - https://developers.google.com/maps/documentation/javascript/interaction

That being said, everyone should really move over to OSM using leaflet. 

Share this post


Link to post
Share on other sites

hello,

 

I have got a problem with openstreetmap that I did not have with Googlemaps.

My top menu is dissapering behind the map.

Any suggestions?

Thank you in advange

 

Cor

 

OPM.jpg

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×