[SOLVED] Route Map on BID layout

[CarlosEduardo2409]

A few days ago, I started customizing the bid layout, but I have a question. How can I map the route? (With the starting and ending point the same as the report layout).And if possible I wanted to put a gif of an airplane around the line from the start and finish point.

Sorry if I said something wrong because I'm using google translator.

 

Thanks,

 

Carlos

Edited November 10, 2017 by CarlosEduardo2409

[CarlosEduardo2409]

Someone? Sorry for the rush is I need to release my VA from maintenance

[web541]

Do you want to use Google Maps or something else? What code do you have for the bidding and are the variables going to give us enough data to produce this? (e.g. latitude and longitude of departure airport, arrival airport, each waypoint and aircraft location)

[CarlosEduardo2409]

I wanted to use Google Maps, and you say the airport variables of the bid? Because if yes is the same as traditional ($bid->depicao / $bid->arricao), and what I'm trying to do is a map of the destination and arrival on the bid page, similar to vAMSYS (https://gyazo.com/f79cba000f48f332d04c1978e889d24d), Just the map and if it is easy I wanted to put that gif of the plane flying on the blue line, without a waypoint, just straight, the same as pirep_viewreport (https://prnt.sc/h71zvw)

Edited November 7, 2017 by CarlosEduardo2409

[LeonardIGO4036]

Hi Carlos, you want a your flight route map like vAMSYS correct? 

 

They use a method which is something called as "Animated Symbols" 

You would need the following : 

1. Take a copy of the route_map.php (never work on the active one) 

2. Go to Google Developers and get your API key for this feature. 

3. Change the Color and style of your map using http://snazzymaps.io to make it look more attractive.

4. Create a custom icon in gif format (like that Airplane) 

5. Follow this link https://developers.google.com/maps/documentation/javascript/examples/overlay-symbol-animate and do as mentioned, you need to do some experiments with it, because it's not easy to get it working. 

^ Analyze the JS Code, and define the Symbol's code too properly. 

 

Hope this was helpful, All the best

[CarlosEduardo2409]

Thank you, I do not understand a little more I will try to do.

 

Thank you again for the response web541 and LeonardIGO4036

 

EDIT**

 

I did something wrong, I just do not know what it is, my map is not showing up on the bids page. It occupies the map space, more without the map. http://prntscr.com/h7h9kl

 

My code:

<div class="mapcenter" align="center">
	<div id="map" style="width:<?php echo  Config::Get('MAP_WIDTH');?>; height: <?php echo Config::Get('MAP_HEIGHT')?>"></div>
</div>
<?php
if(isset($bid))
	$mapdata = $bid;
?>


<div id="map"></div>

<script type="text/javascript">

<!-- Start initMap -->
function initMap() {
	
var options = {
	mapTypeId: google.maps.MapTypeId.ROADMAP
}

var map = new google.maps.Map(document.getElementById('routemap'), {
center: {lat: 20.291, lng: 153.027},
zoom: 6,
mapTypeId: options
});

<!-- Start Line and SymbolAnimation -->
var lineSymbol = {
path: google.maps.SymbolPath.CIRCLE,
scale: 8,
strokeColor: '#ffffff'
};

var line = new google.maps.Polyline({
path: depMarker, arrMarker,
icons: [{
icon: lineSymbol,
offset: '100%'
}],
map: map
});

animateCircle(line);
}
<!-- /.Finish initMap -->

function animateCircle(line) {
var count = 0;
window.setInterval(function() {
count = (count + 1) % 200;

var icons = line.get('icons');
icons[0].offset = (count / 2) + '%';
line.set('icons', icons);
}, 20);
}
<!-- /.Finish Line and SymbolAnimation -->


<!-- Start Location and Bounds -->
var dep_location = new google.maps.LatLng(<?php echo $mapdata->deplat?>,<?php echo $mapdata->deplng;?>);
var arr_location = new google.maps.LatLng(<?php echo $mapdata->arrlat?>,<?php echo $mapdata->arrlng;?>);

var bounds = new google.maps.LatLngBounds();                                                                                                     
bounds.extend(dep_location);
bounds.extend(arr_location);
<!-- /.Finish Location and Bounds -->

<!-- Start Makers -->
var depMarker = new google.maps.Marker({
	position: dep_location,
	map: map,
	icon: depicon,
	title: "<?php echo $mapdata->depicao;?>"
});

var arrMarker = new google.maps.Marker({
	position: arr_location,
	map: map,
	icon: arricon,
	title: "<?php echo $mapdata->arricao;?>"
});
<!-- /.Finish Makers -->

<!-- Start FlightPath -->
var flightPath = new google.maps.Polyline({
	path: [dep_location, <?php if(count($list) > 0) { echo implode(',', $list).','; }?> arr_location],
	strokeColor: "#FF0000", strokeOpacity: 1.0, strokeWeight: 2
}).setMap(map);
<!-- /.Finish FlightPath -->

// Resize the view to fit it all in
map.fitBounds(bounds); 

</script>

<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=MYKEY&callback=initMap">
</script>

 

Schedule_bids.php code to display the map.

<div class="box box-primary">
    <div class="box-header with-border">
         <h3 class="box-title">Flight Map</h3>
    </div>
  
    <div class="box-body" align="center">
         <?php $this->show('routemapreport.php'); ?>
    </div>
</div> 

 

Edited November 7, 2017 by CarlosEduardo2409

[web541]

Don't put this here

<script async defer src="https://maps.googleapis.com/maps/api/js?key=MYKEY&callback=initMap"></script>

It should already be in your core_htmlhead.php and will cause errors if it's added twice. If removing that doesn't work, check the browser console for errors.

[CarlosEduardo2409]

I do not think there's anything in my core_htmlhead.php

But it is also giving an error in the console that is missing the APIKey, but I do not know where to put.

 

Errors on the chrome console:

Uncaught Error: Graph container element not found
    at d [as constructor] (morris.min.js:6)
    at d.c [as constructor] (morris.min.js:6)
    at new d (morris.min.js:6)
    at HTMLDocument.<anonymous> (dashboard.js:127)
    at j (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at Function.ready (jquery.min.js:2)
    at HTMLDocument.I (jquery.min.js:2)

Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys
ZB.j @ util.js:229

Google Maps API warning: SensorNotRequired https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required

Edited November 7, 2017 by CarlosEduardo2409

[RuiMiguel]

Hello,

 do not understand anything about java, but I tried to do it and it works not very well but it works

<?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 type="text/javascript">
      // This example adds an animated symbol to a polyline.

      function initMap() {
        var map = new google.maps.Map(document.getElementById('routemap'), {
          center: {lat: <?php echo $mapdata->deplat?>, lng: <?php echo $mapdata->arrlng;?>},
          zoom: 5,
          mapTypeId: 'terrain'
        });

        // Define the symbol, using one of the predefined paths ('CIRCLE')
        // supplied by the Google Maps JavaScript API.
        
        var lineSymbol = {
          path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
          scale: 4,
          strokeColor: '#393'
        };

        // Create the polyline and add the symbol to it via the 'icons' property.
        var line = new google.maps.Polyline({
          path: [{lat: <?php echo $mapdata->deplat?>, lng: <?php echo $mapdata->deplng;?>}, {lat: <?php echo $mapdata->arrlat?>, lng: <?php echo $mapdata->arrlng;?>}],
          icons: [{
            icon: lineSymbol,
            offset: '100%'
          }],
          map: map
        });

        animateCircle(line);
      }

      // Use the DOM setInterval() function to change the offset of the symbol
      // at fixed intervals.
      function animateCircle(line) {
          var count = 0;
          window.setInterval(function() {
            count = (count + 1) % 200;

            var icons = line.get('icons');
            icons[0].offset = (count / 2) + '%';
            line.set('icons', icons);
        }, 20);
      }
 
var options = {
    mapTypeId: google.maps.MapTypeId.ROADMAP
}

var map = new google.maps.Map(document.getElementById("routemap"), options);
var dep_location = new google.maps.LatLng(<?php echo $mapdata->deplat?>,<?php echo $mapdata->deplng;?>);
var arr_location = new google.maps.LatLng(<?php echo $mapdata->arrlat?>,<?php echo $mapdata->arrlng;?>);

var bounds = new google.maps.LatLngBounds();                                                                                                     
bounds.extend(dep_location);
bounds.extend(arr_location);

var depMarker = new google.maps.Marker({
    position: dep_location,
    map: map,
    icon: depicon,
    title: "<?php echo $mapdata->depname;?>"
});
<?php
/* Populate the route */
if(is_array($mapdata->route_details))
{
    $list = array();
    
    foreach($mapdata->route_details as $route)
    {
        if($route->type == NAV_VOR)
            $icon = fileurl('/lib/images/icon_vor.png');
        else
            $icon = fileurl('/lib/images/icon_fix.png');
        
        /*    Build info array for the bubble */
        ?>
        var v<?php echo $route->name?>_info = {
            freq: "<?php echo $route->freq ?>",
            name: "<?php echo $route->name ?>",
            title: "<?php echo $route->title ?>",
            type: "<?php echo $route->type ?>",
            lat: "<?php echo $route->lat ?>",
            lng: "<?php echo $route->lng ?>"
        };
        
        var v<?php echo $route->name?>_navpoint_info = tmpl("navpoint_bubble", {nav: v<?php echo $route->name?>_info});
        var v<?php echo $route->name?>_coords = new google.maps.LatLng(<?php echo $route->lat?>, <?php echo $route->lng?>);
        var v<?php echo $route->name?>_marker = new google.maps.Marker({
            position: v<?php echo $route->name?>_coords,
            map: map,
            icon: "<?php echo $icon; ?>",
            title: "<?php echo $route->title; ?>",
            infowindow_content: v<?php echo $route->name?>_navpoint_info
        })
        
        bounds.extend(v<?php echo $route->name?>_coords);
        
        google.maps.event.addListener(v<?php echo $route->name?>_marker, 'click', function() 
        {
            info_window = new google.maps.InfoWindow({ 
                content: this.infowindow_content,
                position: this.position
            });
            
            info_window.open(map, this);
        });
        
        <?php
            
        // For the polyline
        $list[] = "v{$route->name}_coords";
    }
}
?>
var arrMarker = new google.maps.Marker({
    position: arr_location,
    map: map,
    icon: arricon,
    title: "<?php echo $mapdata->arrname;?>"
});

var flightPath = new google.maps.Polyline({
    path: [dep_location, <?php if(count($list) > 0) { echo implode(',', $list).','; }?> arr_location],
    strokeColor: "#FF0000", strokeOpacity: 1.0, strokeWeight: 2
}).setMap(map);

// Resize the view to fit it all in
map.fitBounds(bounds); 
</script>

<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOURKEY&callback=initMap">
</script>

[CarlosEduardo2409]

Worked in bid page?

[RuiMiguel]

In pirep view report

[CarlosEduardo2409]

@RuiMiguel  Actually, this is working in pirep_viewreport, but I'm trying to put it in schedule_bids, but all the map codes I try to put do not appear on the page, it simply appears blank with the map space, just like in this image (http://prntscr.com/h7vtvw)

Edited November 8, 2017 by CarlosEduardo2409

[web541]

22 hours ago, CarlosEduardo2409 said:

I do not think there's anything in my core_htmlhead.php

But it is also giving an error in the console that is missing the APIKey, but I do not know where to put.

 

Errors on the chrome console:

Uncaught Error: Graph container element not found
    at d [as constructor] (morris.min.js:6)
    at d.c [as constructor] (morris.min.js:6)
    at new d (morris.min.js:6)
    at HTMLDocument.<anonymous> (dashboard.js:127)
    at j (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at Function.ready (jquery.min.js:2)
    at HTMLDocument.I (jquery.min.js:2)

Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys
ZB.j @ util.js:229

Google Maps API warning: SensorNotRequired https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required

You should have something in your core_htmlhead.php or layout.php file, because otherwise all maps on your site won't work (including ACARS).

https://github.com/DavidJClark/phpvms_5.5.x/blob/master/core/templates/core_htmlhead.php#L35

And "Google Maps API warning: NoApiKeys" tells me that you have not included your API key in the reference so you should check here how to properly add it

 

[RuiMiguel]

for it to work I had to put the key script in route_map

[CarlosEduardo2409]

20 hours ago, web541 said:

You should have something in your core_htmlhead.php or layout.php file, because otherwise all maps on your site won't work (including ACARS).

https://github.com/DavidJClark/phpvms_5.5.x/blob/master/core/templates/core_htmlhead.php#L35

And "Google Maps API warning: NoApiKeys" tells me that you have not included your API key in the reference so you should check here how to properly add it

 

Thanks web541, the API problem has already been solved, now the same problem is the map that does not work in schedule_bids.php

 

But in the console of the site it speaks of an error like this:

Error parsing header X-XSS-Protection: 1, 1; mode=block: expected semicolon at character position 2. The default protections will be applied.

Edited November 9, 2017 by CarlosEduardo2409

[Mickey]

Is there a way to do this with openstreetmap? @web541

Edited May 3, 2020 by Mickey

[CarlosEduardo2409]

10 hours ago, Mickey said:

Is there a way to do this with openstreetmap? @web541

Yeah, there is a way yes, and it’s not that complicated. Yesterday I posted my new skin, it has the map on the reservations page (using Leaflet/openstreetmap), if you want to download just to see the code feel free, i can't send you the code now because i'm not on the computer.