Description :

Notre but est de créer un site web pour montrer le réseau de transport indien (Aérien et Ferroviaire). L’utilisateur choisit les réseaux (uniquement 2 réseaux pour le moment : AIR et RAIL) qu’il souhaite voir et une carte est mise a jour automatiquement.

 Librairies :

• Jquery : librairies de fonction JavaScript
  «jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.»
  http://jquery.com/
• Gmap3 : librairie Jquery wrappant l’API Javascript de google map
  «A JQuery plugin to create google maps with advanced features (overlays, clusters, callbacks, events…) »
  http://gmap3.net/

 Fonctionnement :

Dans un premier temps il faut installer les frameworks nécessaires. Gmap3 contient déjà une version de Jquery et il n’est donc pas nécessaire d’installer Jquery directement. L’installation de Gmap3 est très simple (voir leur site) et se résume à 2 fichiers à uploader sur votre serveur (gmap3.min.js et jquery-1.6.1.min.js)

Il faut également une database Sqlite qui contient les gares et les aéroports indiens…. Je vous laisse trouver ca sur le net.

Le processus se fait dans 2 fichiers distincts :

ServiceProvider

Il est le provider de données et interroge la DataBase Sqlite en utilisant l’interface de PHP Data Objects (PDO). Cette interface permet une abstraction du SGBD utilise et on peut donc imaginer migrer vers une nouvelle base sans difficulté). Pour plus de détails sur PDO http://www.php.net/manual/fr/intro.pdo.php

Le Service Provider est appelé depuis la page d’accueil du site en AJAX avec un argument « action » (dont la valeur peut être AIR ou RAIL) et renvoi les stations correspondantes (aéroport ou gare) a la page d’accueil. La réponse est le résultat de la requête SQL encode en JSON (pour plus d’info sur le JSON http://fr.wikipedia.org/wiki/JavaScript_Object_Notation).

<?php
try
{
	//connect to SQLite database
	$dbh = new PDO("sqlite:../DataBase/DataBase2.db");

	if(isset($_REQUEST['action']))
	{
		switch($_REQUEST['action'])
		{
			case "AIR" :
			//SQL works
			$aSqlRequest = "select ... from AIR where (COUNTRY='IN')";
			break;
			case "RAIL" :
			$aSqlRequest = "select ... from RAIL where (COUNTRY='IN')";
			break;
		}
		$aListOfPointRequest = $dbh->query($aSqlRequest);
		$aListOfPoint = $aListOfPointRequest->fetchAll();
		//Response object
		$resultat = $aListOfPoint;
		print(json_encode($resultat));
	}

	//close the database connection
	$dbh = null;
}
catch(PDOException $e)
{
	echo $e->getMessage();
}
?>

La page d’accueil

Elle gère la vue et les interactions avec l’utilisateur.
A chaque changement dans la liste des modes de transport (RAIL ou AIR) la page envoi une requête AJAX au service provider pour récupérer les points et mettre à jour la carte. Voici le code simplifié avec les commentaires ajoute pour mieux comprendre :

$('input', $dpts).change(function () {
<<-- Recupere le tag clique (AIR ou RAIL)
  var region = $('label[for=' + $(this).attr('id') + ']', $dpts).html(),
<<-- Est ce que le tag a ete selectionne ou deselectionne
    checked = $(this).is(':checked'),
    map = $('#test1').gmap3('get'),
    markers;
<<-- Si le tag clique a ete selectionne
  if (checked) {
<<-- Appel AJAX au data provider avec le TAG clique (AIR ou RAIL)
    $.getJSON("ServiceProvider.php", {"action": region,"nombre_a": region},
<<-- fonction declanche lors de la reception AJAX du service provider
	function (data2) {
      $("input#resultat_addition").val(data2['resultat_addition']);
      var aTravelLocations = data2;
      var data = [];
<<--Mise a jour des donnees avec les nouvelles locations recu du data provider
      $.each(aTravelLocations, function (i, ville) {
        data.push({lat: ville.LATITUDE,lng: ville.LONGITUDE,tag: region,data: ville,
options: {icon: new google.maps.MarkerImage("http://djynet.net/Icon/" + region + ".png")}
        });
      });
<<-- mettre a jour la carte avec les nouveaux marqueurs (dans data)
      $('#test1').gmap3({action: 'addMarkers',markers: data});
    });
  }
<<-- le tag clique a ete deselctionne (on doit efface les marqueurs qui ont ce tag)
  else {
<<-- effacer les marqueurs qui ont le tag deselectione (AIR par exemple)
  var clear = {action: 'clear',name: 'marker',tag: region};$('#test1').gmap3(clear);
  }
});

Voilà le code complet de la page :

<html>

  <head>
	<TITLE> Indian Transportation Map </TITLE>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="jquery-1.6.1.min.js"></script>
    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
    <script type="text/javascript" src="gmap3.min.js"></script>
    <style>
      body {
        text-align:center;
      }
      #container {
        width: 100%;
        height: 90%;
        margin: 2% auto;
      }
      .gmap3 {
        border: 1px dashed #C0C0C0;
        width: 90%;
        height: 100%;
      }
      #dpts {
        float:right;
        width: 10%;
        height: 33%;
        text-align:left;
        border: 1px solid #999999;
        font-family: verdana;
        font-size: 11px;
        background-color:#99B3CC;
        color:#000000;
        text-shadow: #ffffff 1px 1px, #ffffff -1px 1px, #ffffff -1px -1px, #ffffff 1px -1px;
        line-height:17px;
      }
      #dpts input[type=checkbox] {
        margin-right:10px;
      }
    </style>
    <script type="text/javascript">
      $(function () {
        var regions = [];
        var k = [];
        var $dpts = $("#dpts");
        regions.push("RAIL");
        regions.push("AIR");
        regions = regions.sort();
        for (k in regions) {
          $dpts.append('<input id="chk' + k + '" type="checkbox"><label for="chk' + k + '">' + regions[k] + '</label><br />');
        }
        $('input', $dpts).change(function () {
          var region = $('label[for=' + $(this).attr('id') + ']', $dpts).html(),
            checked = $(this).is(':checked'),
            map = $('#test1').gmap3('get'),
            markers;
          if (checked) {
            $.getJSON("ServiceProvider.php", {
              "action": region,
              "nombre_a": region
            }, function (data2) {
              $("input#resultat_addition").val(data2['resultat_addition']);
              var aTravelLocations = data2;
              var data = [];
              $.each(aTravelLocations, function (i, ville) {
                data.push({
                  lat: ville.LATITUDE,
                  lng: ville.LONGITUDE,
                  tag: region,
                  data: ville,
                  options: {
                    icon: new google.maps.MarkerImage("http://djynet.net/Icon/" + region + ".png")
                  }
                });
              });
              $('#test1').gmap3({
                action: 'addMarkers',
                markers: data
              });
            });
          }
          else {
            var clear = {
              action: 'clear',
              name: 'marker',
              tag: region
            };
            $('#test1').gmap3(clear);
          }
        });
        $('#test1').gmap3({
          action: 'init',
          options: {
            center: [46.578498, 2.457275],
            zoom: 5
          }
        });
      });
    </script>

    <body>
      <div id="container">
        <div id="dpts"></div>
        <div id="test1"></div>
      </div>
    </body>

</html>

Le résultat final est visible ICI :

http://djynet.net/GoogleMapTest2/