Extension Time map

présentation

LOADING

Extension Time-map

Version 1

Découvrez l'extension Time map de mon framework javascript pour Google Map version 3. Cette extension a pour but de coupler une timeline avec une carte Google Map. Ainsi cela permet d'ajouter la vision du temps aux informations de carthographique.

Exemple

Ci dessous vous trouverez les extraits de code qui ont été utilisé pour créer la time-map ci dessus :

Les scripts

Import JS
            
	<script type='text/javascript' src='Utils.js'></script>
	<script type='text/javascript' src='Map.js'></script>
	<script type='text/javascript' src='Import.js'></script>
	<script type='text/javascript' src='Timeline.js'></script>


	// ou ...

	<script type='text/javascript' src='packageTimeMap.js'></script>
Import CSS

Tous le skin de la timeline s'effectu via un fichier CSS. Vous pouvez tous skinner, alors à vos Firebug ... :).
Le nom des classes sont préfixées par default en "timelineX_" avec X le numero de la timeline sur la page, vous pouvez fournir un prefixe perso en utilisant l'option "prefixe_class".
Exemple de fichier CSS ici 

            
	<link href="timeline.css" rel="stylesheet" />
Téléchargement
OU

Initialisation

L'import de marker s'effectu avec un fichier XML sur le model de l'import de mon framework javascript pour google map (ici :) ) La date doit respecter un format précis : jj-dd-aaaa 

            
	<?xml version="1.0" encoding="UTF-8"?>
    <markers>
            <marker isHidden="1" title="mon_titre" icon=""  width="0" height="0" ancreX="0"  ancreY="0" lat="lat" lng="lng" html="" ancreXbulle="0" ancreYbulle="0" onclick="" openBulle="true" text="coucou" date="11-03-2011"/>
    </markers>

Initialisation JS

            

var myOpt = {
			zoom : 5,
			center : {
				lat : 56.5,
				lng : 5.3
			},
			type :"SATELLITE"
		};

		var myControl = {
			hidden : true,
			scale: false,
			type : false,
			dblClickZoomDisable: false
		}
		map = new Map("gmap",myOpt,myControl);



    var opt = {
        contener : "timemap",
        map : map,
        url : "/xml/get-marker.php?timemap&nbr=300",
        indicator : "day",
        begin : "01-01-2012",
        end : "31-12-2012",
        line : 2,
        indic_on_timeline : "somme",
        t_visible_timeline : ["day", "month"],
        start : "01-02-2012"

    };

    t = new Timeline(opt);