Jump to content

Google Maps Conversion

Nabeel

By Nabeel
in Support Forum

 Share

Recommended Posts

Felipe Newbie

Felipe

Posted
Posted
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... :(

  • Replies 72
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Heritage1
Heritage1

I finally got all of our maps converted and fixed to Leaflet maps. WOW is all I've got to say, what a pain in the butt that was. The only map I could NOT get to work and converted was the Module we bo

shakamonkey88
shakamonkey88

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

flyalaska
flyalaska

I did it without a headache!

Posted Images

Felipe Newbie

Felipe

Posted
Posted (edited)
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
  • 2 weeks later...
aarbee Explorer

aarbee

Posted
Posted

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

  • Administrators
Nabeel Grand Master

Nabeel

Posted
  • Author
  • Administrators
Posted
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

  • Administrators
Nabeel Grand Master

Nabeel

Posted
  • Author
  • Administrators
Posted
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.

  • 1 month later...
Jonah0037 Newbie

Jonah0037

Posted
Posted
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?

CPC900 Newbie

CPC900

Posted
Posted

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

ncd200 Newbie

ncd200

Posted
Posted

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

Heritage1 Newbie

Heritage1

Posted
Posted

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

 

  • Moderators
shakamonkey88 Newbie

shakamonkey88

Posted
  • Moderators
Posted
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. 

Cor Newbie

Cor

Posted
Posted

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

  • 4 weeks later...
Heritage1 Newbie

Heritage1

Posted
Posted

Sorry about the delay on your post, 

I have seen this many times before, question, is your map on the frontpage_main.php file or the layout.php file ? This makes a difference. I'm sure I can help you out, and again sorry about the delay on the post here.......let me know. Jim

aarbee Explorer

aarbee

Posted
Posted
On 7/17/2018 at 2:32 PM, Nabeel said:

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

Nabeel,

sorry for not getting back earlier. I was simply to busy with the family.

 

The  only jquery on the layout is about a  slider.
Which I tried to disable and it still does not work.

Using 5.5. So I had renamed the .tpl in .php
Wondering what I am still doing wrong.

 

RobB

  • 2 weeks later...
ARV187 Rookie

ARV187

Posted
Posted (edited)
On 9/12/2018 at 8:07 PM, Heritage1 said:

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 .

 

In http://argavirtual.com/index.php/pireps/routesmap or /core/templates/profile_myroutesmap.tpl isn't working to me (no marks, only map), I use phpvms v2 and *.tpl files:

 

profile_myroutesmap.tpl 

<br />
<br />
<div align="center">
<h3>Mi mapa de rutas</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>

Does anyone know what is failing me?

Edited by ARV187
  • 3 weeks later...
ARV187 Rookie

ARV187

Posted
Posted (edited)

No errors there, only that marks aren't showing in map, the map is empty:

VN1yPiY.jpg

 

And the expected behavior is like the old:

Plan_800.jpg

 

The others maps work right as you did with your instructions, but you forgot modify that file and the instructions to this: (url)index.php/pireps/routesmap or the same file /core/templates/profile_myroutesmap.tpl

Edited by ARV187
  • 6 months later...
BlackSwan Newbie

BlackSwan

Posted
Posted (edited)

I also have the "blank map" issue. There is still no issue. I use CrewCenter form MarkSwan on phpvms simpilot 5.5.2... I followed all instructions, but still no solution for me. All CSS and JS Files are included to the page when I analyze the source code with firefox. Could anybody help please?

Here I have some errors

ReferenceError: L is not defined

base_map.js:10:9

    <anonym> https://crew.germanexpressva.de/lib/js/base_map.js:10

 

 

ReferenceError: acars_map_defaults is not defined

acarsmap.js:36:15

    <anonym> https://crew.germanexpressva.de/lib/js/acarsmap.js:36

 

 

ReferenceError: L is not defineddashboard:545:5

    <anonym> https://crew.germanexpressva.de/dashboard:545

 

 

Thanks ahead

Tolga

Edited by BlackSwan
Forgot Info
BlackSwan Newbie

BlackSwan

Posted
Posted
On 6/20/2018 at 11:07 PM, Oleg said:

I have found the solution of this problem in own skin. In the layout.tpl (after line 30) there weren't enough references. Copy them from the defoult skin (from crystal). 

P.S. And step 2: change wrong data in local.config.php (line 66)  from G_PHYSICAL_MAP to OpenStreetMap.Mapnik

Whate references do you mean?

gio1961 Rookie

gio1961

Posted
Posted
1 hour ago, BlackSwan said:

Whate references do you mean?

Configuration Modifications

In your core/app.config.php and core/local.config.php, replace the following:

MAP_TYPE

The base map can be customized and changed out to different providers.

Find:

Config::Set('MAP_TYPE', 'G_PHYSICAL_MAP');

and replace with:

Config::Set('MAP_TYPE', 'OpenStreetMap.Mapnik');

You can also change OpenStreetMap.Mapnik to a different basemap. Those options can be found here:

http://leaflet-extras.github.io/leaflet-providers/preview

To use a base map that requires an API key, see the notes in libs/js/base_map.js.

MAP_ZOOM_LEVEL

The scaling for zoom is different between Google Maps and the Leaflet zoom system. Find:

Config::Set('MAP_ZOOM_LEVEL', 12);

and replace with:

Config::Set('MAP_ZOOM_LEVEL', 5);

  • 1 month later...
Boogace Rookie

Boogace

Posted
Posted

Hi all if you can help i have been through the instructions now so many times, followed them to the letter but now i am missing my Acars map and my frontpage map, routemap,, Acars map - http://prntscr.com/obo4yr

Front page map - http://prntscr.com/obo53b  and also my routes map in admin - http://prntscr.com/obo5mm .   please can anyone help its driving me insane I have been on this nearly a whole day.

Kind regards

 

Wazza

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
 Share
Go to topic listing
×
×
  • Create New...