Jump to content

Center map on marker

mrshiljo

By mrshiljo
in PHP Coding Help

 Share

Recommended Posts

mrshiljo Newbie

mrshiljo

Posted
Posted (edited)

Hi!

I have this code  

<?php
	/**
	 * @Project: Virtual Airlines Manager (VAM)
	 * @Author: Alejandro Garcia
	 * @Web http://virtualairlinesmanager.net
	 * Copyright (c) 2013 - 2016 Alejandro Garcia
	 * VAM is licensed under the following license:
	 *   Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0)
	 *   View license.txt in the root, or visit http://creativecommons.org/licenses/by-nc-sa/4.0/
	 */
?>
<!DOCTYPE html>
<html>
<head>
<script
      src="https://maps.googleapis.com/maps/api/js?key=XXX&callback=initMap" type="text/javascript">
</script>
	<meta http-equiv="refresh" content="300">
</head>
<body>
<?php
	include('./db_login.php');
	$db_map = new mysqli($db_host , $db_username , $db_password , $db_database);
	$db_map->set_charset("utf8");
	if ($db_map->connect_errno > 0) {
		die('Unable to connect to database [' . $db_map->connect_error . ']');
	}
	$sql_map = "select plane_type,ias,flight_id,u.gvauser_id as gvauser_id,u.callsign as callsign,u.name as name,gs,altitude,surname,departure,arrival,latitude,longitude,flight_status,heading,perc_completed,
				pending_nm, a1.latitude_deg as dep_lat, a1.longitude_deg as dep_lon , a2.latitude_deg as arr_lat, a2.longitude_deg as arr_lon , network
				from vam_live_flights lf, gvausers u , airports a1, airports a2 where u.gvauser_id=lf.gvauser_id and lf.departure=a1.ident and lf.arrival=a2.ident";
	if (!$result = $db_map->query($sql_map)) {
		die('There was an error running the query  [' . $db_map->error . ']');
	}
	unset($flights_coordinates);
	unset($flight);
	unset($liveflights);
	unset($datos);
	unset($jsonarray);
	$flights_coordinates = array();
	$datos = array ();
	$flight = array();
	$liveflights = array ();
	$jsonarray = array ();
	$index = 0;
	$index2=0;
	$flightindex=0;
	while ($row = $result->fetch_assoc()) {
			$flight["gvauser_id"]=$row["gvauser_id"];
			$flight["callsign"]=$row["callsign"];
			$flight["name"]=$row["name"];
			$flight["gs"]=$row["gs"];
			$flight["ias"]=$row["ias"];
			$flight["altitude"]=$row["altitude"];
			$flight["surname"]=$row["surname"];
			$flight["departure"]=$row["departure"];
			$flight["arrival"]=$row["arrival"];
			$flight["latitude"]=$row["latitude"];
			$flight["longitude"]=$row["longitude"];
			$flight["flight_status"]=$row["flight_status"];
			$flight["heading"]=$row["heading"];
			$flight["dep_lat"]=$row["dep_lat"];
			$flight["dep_lon"]=$row["dep_lon"];
			$flight["arr_lat"]=$row["arr_lat"];
			$flight["arr_lon"]=$row["arr_lon"];
			$flight["perc_completed"]=$row["perc_completed"];
			$flight["pending_nm"]=$row["pending_nm"];
			$flight["network"]=$row["network"];
			$flight["plane_type"]=$row["plane_type"];
			$liveflights[$flightindex] =$flight;
		$sql_map2 = "select * from vam_live_acars where flight_id='".$row["flight_id"]."' order by id asc";
		if (!$result2 = $db_map->query($sql_map2)) {
			die('There was an error running the query  [' . $db_map->error . ']');
		}
			while ($row2 = $result2->fetch_assoc()) {
				$flights_coordinates ["gvauser_id"] = $row2["gvauser_id"];
				$flights_coordinates ["latitude"] = $row2["latitude"];
				$flights_coordinates ["longitude"] = $row2["longitude"];
				$flights_coordinates ["heading"] = $row2["heading"];
				$datos [$index2][$index] = $flights_coordinates;
				$index ++;
				}
		$index=0  ;
		$index2 ++;
		$flightindex ++;
	}
	$jsonarray[0]=$liveflights;
	$jsonarray[1]=$datos;
?>
<div class="container">
	<div class="row">
		<div id="map-outer" class="col-md-11">
			<div id="map-container" class="col-md-12"></div>
			 <div id="over_map"></div>
		</div><!-- /map-outer -->
	</div> <!-- /row -->
</div><!-- /container -->
<style>
	body { background-color:#FFFFF }
	#map-outer {
		padding: 0px;
		border: 0px solid #CCC;
		margin-bottom: 0px;
		background-color:#FFFFF }
	#map-container { height: 500px }
	@media all and (max-width: 800px) {
		#map-outer  { height: 650px }
	}
</style>
<style>
   #wrapper { position: relative; }
   #over_map { position: absolute; top: 50px; left: 10px; z-index: 99; background: white;}
</style>
</body>
<script type="text/javascript">
	var mapCentre;
	var map ;
	function init_map() {
		var flights = <?php echo json_encode($jsonarray[0]); ?>;
		var locations = <?php echo json_encode($jsonarray[1]); ?>;
		var numpoints=(locations.length);
		console.log(locations);
		var var_location = new google.maps.LatLng(<?php echo $datos[0][0]["latitude"]; ?>,<?php echo $datos[0][0]["longitude"]; ?>);
		var var_mapoptions = {
			center: var_location,
			zoom: 5,
			styles: [{"featureType":"all","elementType":"all","stylers":[{"saturation":"0"},{"lightness":"0"}]},{"featureType":"all","elementType":"geometry","stylers":[{"lightness":"20"}]},{"featureType":"administrative","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"visibility":"on"}]},{"featureType":"administrative","elementType":"labels","stylers":[{"visibility":"on"},{"color":"#716464"},{"weight":"0.01"}]},{"featureType":"administrative.country","elementType":"labels","stylers":[{"visibility":"on"}]},{"featureType":"landscape","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"landscape.natural","elementType":"geometry","stylers":[{"visibility":"simplified"}]},{"featureType":"landscape.natural.landcover","elementType":"geometry","stylers":[{"visibility":"simplified"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"poi","elementType":"geometry.fill","stylers":[{"visibility":"simplified"}]},{"featureType":"poi","elementType":"geometry.stroke","stylers":[{"visibility":"simplified"}]},{"featureType":"poi","elementType":"labels.text","stylers":[{"visibility":"simplified"}]},{"featureType":"poi","elementType":"labels.text.fill","stylers":[{"visibility":"simplified"}]},{"featureType":"poi","elementType":"labels.text.stroke","stylers":[{"visibility":"simplified"}]},{"featureType":"poi.attraction","elementType":"geometry","stylers":[{"visibility":"on"}]},{"featureType":"road","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"on"}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"visibility":"on"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#ffad99"},{"lightness":"45"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"visibility":"on"},{"color":"#fbac99"},{"lightness":"1"}]},{"featureType":"road.highway","elementType":"labels","stylers":[{"visibility":"on"}]},{"featureType":"road.highway.controlled_access","elementType":"geometry.fill","stylers":[{"color":"#ffff80"},{"lightness":"50"}]},{"featureType":"road.highway.controlled_access","elementType":"geometry.stroke","stylers":[{"color":"#ff6666"},{"lightness":"59"},{"visibility":"on"},{"weight":"1.10"}]},{"featureType":"road.arterial","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#fff13a"}]},{"featureType":"road.arterial","elementType":"geometry.stroke","stylers":[{"color":"#f2d344"},{"visibility":"off"},{"weight":"1.41"}]},{"featureType":"road.local","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"visibility":"simplified"}]},{"featureType":"transit.station","elementType":"geometry","stylers":[{"visibility":"on"}]},{"featureType":"water","elementType":"all","stylers":[{"visibility":"simplified"},{"color":"#12586f"},{"lightness":"20"},{"gamma":"6.95"},{"saturation":"-29"}]},{"featureType":"water","elementType":"geometry","stylers":[{"visibility":"on"}]},{"featureType":"water","elementType":"geometry.fill","stylers":[{"visibility":"on"}]}]
};
		map = new google.maps.Map(document.getElementById('map-container'),	var_mapoptions);
		var mapas=[];
		var flightPlanCoordinates=[];
		var flightPath = new google.maps.Polyline({
		strokeColor: "#c3524f",
		strokeOpacity: 1,
		strokeWeight: 2,
		geodesic: true
		});
		var k=0;
		var z=0;
		var coordinate;
		while (k<numpoints) {
			while (z < locations[k].length)
			{
				coordinate =new google.maps.LatLng(locations[k][z]['latitude'],locations[k][z]['longitude']);
				flightPlanCoordinates.push(coordinate);
				z=z+1;
			}
			ruta = new google.maps.Polyline({
			geodesic: true,
			strokeColor: '#FF0000',
			strokeOpacity: 1.0,
			strokeWeight: 2
			});
			ruta.setPath(flightPlanCoordinates);
			mapas.push(ruta);
			z=0;
			k=k+1;
		};
		function createMarker(pos, t) {
		var coord=[];
		var pathcoord=[];
		var flight_id = t;
		currentPath = new google.maps.Polyline({
			geodesic: true,
			strokeColor: '#FF0000',
			strokeOpacity: 1.0,
			strokeWeight: 2
			});
		// Plane marker begin
		var image = new google.maps.MarkerImage("./map_icons/"+flights[t]['heading'] +".png",null,new google.maps.Point(0,0),new google.maps.Point(15, 15),new google.maps.Size(30, 30));
		var icon_airport = new google.maps.MarkerImage("./map_icons/airport_yellow_marker.png");
		var lineSymbol = {path: 'M 0,-1 0,1', strokeOpacity: 1, scale: 1 };
		var lat1 = flights[t]["dep_lat"];
		var lat2 = flights[t]["arr_lat"];
		var lng1 = flights[t]["dep_lon"];
		var lng2 = flights[t]["arr_lon"];
		var dep = new google.maps.LatLng(lat1, lng1)
		var arr = new google.maps.LatLng(lat2, lng2)
		var icon_plane = 'images/plane.png';
		var marker = new google.maps.Marker({
			position: pos,
			icon: image,
			name: t ,
			contenido: flights[t]['callsign']+ ' '+flights[t]['name']+ ' '+flights[t]['surname'] ,
						icao1:new google.maps.Marker({
							position: dep,
							 map: map,
							 icon: icon_airport,
							 visible: false
						}),
						icao2:new google.maps.Marker({
							position: arr,
							 map: map,
							 icon: icon_airport,
							 visible: false
						}),
                        line1:new google.maps.Polyline({
							path: [dep, pos],
							strokeColor: "#08088A",
							strokeOpacity: 1,
							strokeWeight: 2,
							geodesic: true,
							map: map,
							polylineID: t,
							visible: false
                        })	,
                        line2:new google.maps.Polyline({
							path: [pos, arr],
							strokeColor: "#FE2E2E",
							strokeOpacity: .3,
							geodesic: true,
							map: map,
							icons: [{
								icon: lineSymbol,
								offset: '0',
								repeat: '5px'
							}],
							polylineID: t,
							visible: false
                        })
		});
		// On mouse over
        google.maps.event.addListener(marker, 'mouseover', function () {
            //infowindow.open(map, marker);
            this.get('line1').setVisible(true);
            this.get('line2').setVisible(true);
			this.get('icao1').setVisible(true);
			this.get('icao2').setVisible(true);
			infowindow.open(map,marker);
		    infowindow.setContent(marker.contenido);
		    var s=0;
		    coord.length = 0;
		    pathcoord.length = 0;
		   while (s < locations[flight_id].length)
			 {
			 	coord= new google.maps.LatLng(locations[flight_id][s]['latitude'],locations[flight_id][s]['longitude']);
			 	pathcoord.push(coord);
			 	s=s+1;
			 }
			 currentPath.setPath(pathcoord);
			 currentPath.setMap(map);
        });
		// On mouse end
		// mouse out
        google.maps.event.addListener(marker, 'mouseout', function () {
            //infowindow.close();
            //this.get('line1').setVisible(false);
            //this.get('line2').setVisible(false);
			//this.get('icao1').setVisible(false);
			//this.get('icao2').setVisible(false);
			//currentPath.setMap(null);
        });
		// mouse out end
		// On Click begin
		google.maps.event.addListener(marker, 'click', function() {
		   infowindow.open(map,marker);
		   infowindow.setContent(marker.contenido);
		   var s=0;
		   coord.length = 0;
		   pathcoord.length = 0;
		  while (s < locations[flight_id].length)
			{
				coord= new google.maps.LatLng(locations[flight_id][s]['latitude'],locations[flight_id][s]['longitude']);
				pathcoord.push(coord);
				s=s+1;
			}
			currentPath.setPath(pathcoord);
			currentPath.setMap(map);
			if (this.get('line1').visible ='true')
			{
				this.get('line1').setVisible(false);
			}
			if (this.get('line2').visible ='true')
			{
				this.get('line2').setVisible(false);
			}
			if (this.get('icao1').visible ='true')
			{
				this.get('icao1').setVisible(false);
			}
			if (this.get('icao2').visible ='true')
			{
				this.get('icao2').setVisible(false);
			}
			flight_detail='<div class="panel panel-map">\
						  <!-- Default panel contents -->\
						  <div class=\"panel-heading\">'+flights[t]['departure'] + ' <i class="fa fa-arrow-right"></i> ' + flights[t]['arrival']+'</div>\
						  <table class="table-map">\
						    <tr>\
						    	<td><small>Flight completed</small><br><div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="\
								'+flights[t]['perc_completed'] + '" aria-valuemin="0" aria-valuemax="100" style="width:'+flights[t]['perc_completed']+'%">\
								'+flights[t]['perc_completed'] + ' %</div></td>\
						    </tr>\
							<tr>\
						    	<td><small>Callsign</small><br><strong>\
						    	'+flights[t]['callsign'] + '</strong></td>\
						    </tr>\
							<tr>\
						    	<td><small>Flight Status</small><br><strong>\
						    	'+flights[t]['flight_status'] + '</strong></td>\
						    </tr>\
						    <tr>\
						    	<td><small>Plane Type</small><br><strong>\
						    	'+flights[t]['plane_type'] + '</strong></td>\
						    </tr>\
						    <tr>\
						    	<td><small>Network</small><br><strong>\
						    	'+flights[t]['network'] + '</strong></td>\
						    </tr>\
						    <tr>\
						    	<td><small>Pending NM</small><br><strong>\
						    	'+flights[t]['pending_nm'] + '</strong></td>\
						    </tr>\
						    <tr>\
						    	<td><small>GS</small><br><strong>\
						    	'+flights[t]['gs'] + '</strong></td>\
						    </tr>\
						    <tr>\
						    	<td><small>IAS</small><br><strong>\
						    	'+flights[t]['ias'] + '</strong></td>\
						    </tr>\
						    <tr>\
						    	<td><small>Altitude</small><br><strong>\
						    	'+flights[t]['altitude'] + '</strong></td>\
						    </tr>\
						    <tr>\
						    	<td><small>Heading</small><br><strong>\
						    	'+flights[t]['heading'] + '</strong></td>\
						    </tr>\
						  </table>\
						</div>';
			//flights[t]['departure'] + '-' + flights[t]['arrival'] + '<br />' + flights[t]['callsign']+ ' '+flights[t]['name']+ ' '+flights[t]['surname'] + '<br />' + 'ALTITUDE: ' + flights[t]['altitude'] + '<br />' + 'GS: ' + flights[t]['gs']+ '<br />' + 'HEADING: ' + flights[t]['heading'] + '<br />' + flights[t]['flight_status'];
			$('#over_map').html("<div id='mySecondDiv'>"+flight_detail+"</div>");
		});
		// On Click end
		return marker;
	}
		var numflight=0
		while (numflight < flights.length )
		{
			var avionicon =new google.maps.LatLng(flights[numflight]['latitude'],flights[numflight]['longitude']);
			var m1 = createMarker(avionicon, numflight);
			m1.setMap(map);
			numflight = numflight +1;
		}
		var s=0;
		while (s < mapas.length)
		{
			s=s+1;
		}
		var infowindow = new google.maps.InfoWindow({
		  });
		google.maps.event.addListener(infowindow, 'closeclick', function() {
		$('#over_map').html("");
		});
	}
	google.maps.event.addDomListener(window, 'load', init_map);
	$( document ).ready(refreshflights);
	function refreshflights(){
		setInterval(function () {$.ajax({
			  url: 'get_map_coordinates.php',
			  data: "",
			  dataType: 'json',
			  success: function(data, textStatus, jqXHR) {
				init_map();
				}
			})}, 120000);
	}
</script>
</html>

I need map to be centered on marker every time i go on my webpage. Right now is centered on deparrture aiport. So this is map for flights, as flight is ongoing , aircraft (marker) on route, map should be tracking it so every time i refresh my wepage, map should point to marker, not to departure airport. Can anyone halp me. Thank you 

Edited by mrshiljo
Link to comment
https://forums.phpfreaks.com/topic/311917-center-map-on-marker/
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

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.

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

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.