API CUB > Tutoriaux > Carte simple

Intégration d'une carte simple

Difficulté :

Objectif du tutorial

Apprendre à intégrer l'API CUB dans n'importe quelle page web. Dans ce tutorial, nous allons voir comment initialiser l'API, puis comment afficher la carte en plein écran, puis comment afficher la carte dans une zone définie.

Prérequis

Intégration du code de l'API

Prenons une page HTML standard :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Carte simple - API CUB</title>
	</head>
	<body>

	</body>
</html>

Nous allons appeler le script JavaScript contenant le code source de l'API. Juste après les balises rajouter l'inclusion du fichier XJS de l'API CUB (en rouge). Vous devez posséder une clé logicielle, sans quoi celle-ci ne s'initialisera pas.

Imaginons que nous possédons une clé ABCDE01234 (Cette clé est fictive, elle sert simplement d'exemple). Dans notre balise de script, nous allons passer à l'API notre clé en paramètre (N'oubliez pas de remplacer ABCDE01234 par votre clé)

<head>
	<title>Carte simple - API CUB</title>
	<script type="text/javascript" src="http://data.bordeaux-metropole.fr/api/cub.xjs?key=ABCDE01234"></script>
</head>

Votre page web doit maintenant charger le code de l'API ! Cependant, cette page ne produit...rien ! Il faut maintenant que nous initialisons l'API. Pour ce faire, nous devons tout d'abord attendre que le navigateur ait chargé toute la page avant de commencer à utiliser l'API. Celle-ci offre une façon d'exécuter une fonction dès que l'initialisation de la page est terminée : il s'agit de CUB.onReady().

Voici l'usage de cette fonction. Incluez le code en rouge dans votre programme :

	<script type="text/javascript" src="http://data.bordeaux-metropole.fr/api/cub.xjs?key=ABCDE01234"></script>
	<script type="text/javascript">
		CUB.ready(function() {
			alert('API prête !');
		});
	</script>
</head>

Le code de la fonction que nous venons de créer sera exécuté immédiatement l'initialisation de la page terminée. Si vous testez ce code, vous devriez avec un message "API prête !".

Ma première carte

Reprenons le code précédent. Nous allons initialiser l'API :

CUB.ready(function() {
	CUB.init()
});

Testez la page. Félicitation ! Vous avez l'API CUB en plein écran sur votre page ! Elle est opérationnelle, vous pouvez déjà naviguer dessus.

Carte dans une zone

Si vous ne voulez pas que la carte prenne tout l'écran, vous pouvez la positionner dans une zone. Imaginons que nous avons une zone de 256 pixels par 256 pixels que nous identifions par "zone_carte", entre les balises <body> :

<div id="zone_carte" style="width: 256px; height: 256px; border: 1px solid black"></div>

Lors de l'initialisation de l'API, il s'agit de passer en paramètre le nom de la zone qui va contenir la carte :

CUB.init('zone_carte');

Voici le résultat :

Code source en entier :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Carte simple</title>
		<script type="text/javascript" src="http://data.bordeaux-metropole.fr/api/cub.xjs?key=ABCDE01234"></script>

		<script type="text/javascript">		
			CUB.ready(function() {
				CUB.init('zone_carte');
			});
		</script>
	</head>
	<body>
		<div id="zone_carte" style="width: 256px; height: 256px; border: 1px solid black"></div>
	</body>
</html>
Forum | Clé logicielle
Flux RSS du site OpenData Bordeaux Métropole