Jump to content

[FREE] Destinations Module


magicflyer
 Share

Recommended Posts

Hello!

A simple destination module has been created and published on Zumeweb. Have a look!

Demo Link: http://zumeweb.com/e...et=Destinations

Download Link: http://zumeweb.com/d...tionsModule.zip

There's a credit link at the bottom of the module, however we take no harm if you remove it.

How to change the style of the Map

In the file destinations.tpl found in /core/templates look for the line containing var _styles =

You can modify the options that are on there, or visit https://snazzymaps.com/ and pick a style you love.

Then, Copy&Paste the style code right after the equal sign.

How to change the airport icons

The icons can be found in /lib/images/mapassets, replace the icons as you wish however keep in mind

that if you have a lot of destinations, it's wise to keep the icons very small or otherwise it would be unreadable

at the default map zoom level. That's why we went with the dots, we suggest you keep it that way.

Do you like this product? Let us know, so we can make more!

Publish a review to Google

Like us on Facebook

Follow us on Twitter

Link to comment
Share on other sites

No, there will not be a pro version of this module. CrazyCreatives already has a more advanced version of this, and the market is simply too small to make for a healthy competition. This module is just for the virtual airlines that want a simple, and FREE solution.

Doesn't mean I might not add a few little unique tweaks in the future.

  • Like 1
Link to comment
Share on other sites

  • 3 months later...
  • 2 months later...

I figured it out guys. How to make routes appear and all!!! Here's the code:

In Destinations.tpl:

function addMarker(lat, lng, icontype, info){

if(icontype == "default"){
var image = "<?php echo fileurl('lib/images/mapassets/airport_icon.png'); ?>";
}else if(icontype == "hub"){
var image = "<?php echo fileurl('lib/images/mapassets/hub_icon.png'); ?>";
}

var marker = new google.maps.Marker({
position: CreateLatLngObject(lat, lng),
map: map,
icon: image
});

// Add this code
[b]google.maps.event.addListener(marker, 'click', function() {
for (i=0; i<lines.length; i++)
{
lines[i].setMap(null); //or line[i].setVisible(false);
}
$.getJSON("<?php echo actionurl("Destinations/getAirportsByArpt"); ?>/" + info.icao, function (data) {
$.each( data, function( key, val ) {
var line = new google.maps.Polyline({
path: [CreateLatLngObject(lat, lng), new google.maps.LatLng(val.lat, val.lng)],
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2,
geodesic: true
});
line.setMap(map);
lines.push(line);
});
});
});[/b]
[b]// END NEW CODE[/b]
google.maps.event.addListener(marker, 'mouseover', function() {
$("#info_icao").html(info.icao);
$("#info_name").html(info.name);
$("#info_country").html(info.country);
});

myMarkers.push(marker);
}

Now in Destinations.php, you have to add this method:

public function getAirportsByArpt($icao){
 $sql = "SELECT b.* FROM phpvms_schedules as a LEFT JOIN phpvms_airports as b on b.icao=a.arricao WHERE a.depicao = '$icao' GROUP BY a.arricao";
 echo json_encode(DB::get_results($sql));
}

Note: you may have to replace phpvms with ur prefix for tables...

Also: If you want to only show the airports that have routes connecting to them, modify the getAirports() method as follows:

public function getAirports(){
 $airports = DB::get_results("SELECT b.* FROM phpvms_schedules as a LEFT JOIN phpvms_airports as b on b.icao=a.depicao GROUP BY a.depicao");
 echo json_encode($airports);
}

Have fun!

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...
  • 4 months later...

code I have does not work, there is an example on the site?

<script type="text/javascript">
var myMarkers = new Array();
var lines = new Array();
$.getJSON( "<?php echo actionurl("Destinations/getAirports"); ?>", function( data ) {
 var items = [];
 $.each( data, function( key, val ) {

 var icontype = "default";
   if(val.hub == 1){
 var icontype = "hub";
  $("#info_icao").html(val.icao);
 $("#info_name").html(val.name);
 $("#info_country").html(val.country);
   }
   addMarker(val.lat, val.lng,icontype, val);
 });
});

function addMarker(lat, lng, icontype, info){

if(icontype == "default"){
 var image = "<?php echo fileurl('lib/images/mapassets/airport_icon.png'); ?>";
}else if(icontype == "hub"){
 var image = "<?php echo fileurl('lib/images/mapassets/hub_icon.png'); ?>";
}

var marker = new google.maps.Marker({
   position: CreateLatLngObject(lat, lng),
   map: map,
   icon: image
  });

// Polyline
google.maps.event.addListener(marker, 'click', function() {
for (i=0; i<lines.length; i++)
{
lines[i].setMap(null); //or line[i].setVisible(false);
}
$.getJSON("<?php echo actionurl("Destinations/getAirportsByArpt"); ?>/" + info.icao, function (data) {
$.each( data, function( key, val ) {
var line = new google.maps.Polyline({
path: [CreateLatLngObject(lat, lng), new google.maps.LatLng(val.lat, val.lng)],
geodesic: true,
strokeColor: '#7CFC00',
strokeOpacity: 0.6,
strokeWeight: 1
});
line.setMap(map);
lines.push(line);
});
});
});
// Polyline

google.maps.event.addListener(marker, 'mouseover', function() {
 $("#info_icao").html(info.icao);
 $("#info_name").html(info.name);
 $("#info_country").html(info.country);
});

myMarkers.push(marker);
}
function CreateLatLngObject(Latitude, Longitude) {
    var latlng = new google.maps.LatLng(parseFloat(Latitude), parseFloat(Longitude));
    return latlng;
}
var styles = [
{
 "featureType": "landscape",
 "stylers": [
  {
   "color": "#01356a"
  }
 ]
}, {
 "featureType": "administrative",
 "stylers": [
  {
   "visibility": "off"
  }
 ]
} , {
 "featureType": "transit",
 "stylers": [
  {
   "visibility": "off"
  }
 ]
},
{
 "featureType": "road",
 "stylers": [
{
"visibility": "off"
}
 ]
},
{
 "featureType": "water",
 "stylers": [
  {
   "color": "#0b508e"
  }
 ]
},
{
 "featureType": "poi",
 "stylers": [
 {
   "visibility": "off"
  }
 ]
},{ featureType: "all", elementType: "labels", stylers: [ { visibility: "off" } ] }
];
var acars_map_defaults = {
 mapTypeControl: false,
 mapTypeControlOptions: {
	 style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
	 position: google.maps.ControlPosition.BOTTOM_CENTER
 },
 zoomControl: true,
 zoomControlOptions: {
	 style: google.maps.ZoomControlStyle.SMALL,
	 position: google.maps.ControlPosition.TOP_RIGHT
 },
 scaleControl: false,
 streetViewControl: false,

autozoom: true,
zoom: 2,
center: new google.maps.LatLng("<?php echo Config::Get('MAP_CENTER_LAT'); ?>", "<?php echo Config::Get('MAP_CENTER_LNG'); ?>"),
mapTypeId: google.maps.MapTypeId.ROADMAP,
refreshTime: 10000,
styles:_styles
};
</script>

http://www.skydream-airlines.com/index.php/destinations

Link to comment
Share on other sites

  • 3 years later...

Hi guys 

i need to know how can i fix the problem 

i got white maps = BLANK 

Is there any way to fix it before it was work well 

here is the link http://www.omanair-va.org/index.php/destinations

 

as well as i found in google chrome counsel this error

Uncaught ReferenceError: map is not defined at addMarker (destinations:330) at Object.<anonymous> (destinations:316) at Function.each (jquery.min.js:30) at Object.success (destinations:307) at b (jquery.min.js:124) at XMLHttpRequest.x.onreadystatechange (jquery.min.js:129)

 

Link to comment
Share on other sites

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

×
×
  • Create New...