Accueil

Tutoriel HTML - sommaire

Vous pouvez me contacter via Facebook (questions, suggestions) : page facebook relative à mon site

Trois API non implémentées mais utiles

Dans ce chapitre je vais aborder trois API JavaScript utiles mais à la différence de celles du chapitre précédent, elles ne sont pas implémentées par les navigateurs puisqu'elles ne font pas partie de la norme HTML5 édicté par le W3C.
Il faudra donc les télécharger ...

Projet OpenStreetMap

Sachez qu'il existe une alternative à Google maps.

Google maps : service payant ?

En effet depuis Juin 2018 pour afficher dans une page web une carte google Maps dynamique (qui interagit avec la position GPS) il faut obtenir une clé API. Et pour obtenir cette clé il faut ouvrir un compte de facturation ...

Mais il existe un service de cartographie en ligne et gratuit : OpenStreetMap (OSM).

Mais OSM c'est uniquement une base de données cartographique en ligne. Pour afficher une carte OSM dynamique dans une page web il faut associer cette base de données à une API appelée leaflet.

API leaflet

Vous pouvez interagir avec le service OSM en ligne via l'API leaflet.
Leaflet.js est une librairie JavaScript de cartographie interactive open-source.
Cette API n'est pas intégrée dans le navigateur donc il faut la charger !

Utilisez l'API leaflet pour se connecter au service en ligne OSM est donc une alternative à la solution Google Maps.

Première carte avec leaflet

Voir carte !

Le code HTML correspondant

... <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" /> <script type="text/javascript" src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script> ... <body> <div id="carte" style="width:100%; height:100%"></div> ...

Comme cette API n'est pas intégrée au navigateur il faut la charger. Attention l'API comprend non seulement un fichier javascript mais aussi une feuille de style.
Ici les deux fichiers sont récupérés sur un site : unpkg.com. On est donc assuré d'avoir la dernière version de la librairie.

Il faut créer une boite identifiée carte qui va contenir effectivement une carte.

Le script

        var ma_carte = L.map('carte').setView([50.94, 1.87], 12); 
		// centrer la carte sur Calais avec un niveau de zoom de 12

        var osm_fond = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 
            attribution: '© OpenStreetMap contributors',       maxZoom: 19     });
		// définir un fond de carte
        ma_carte.addLayer(osm_fond); // ajouter ce fond à la boite identifiée "ma_carte"

Avec la méthode L.map on définit le centre de la future carte et le niveau de zoom ; le centre a les coordonnées GPS 50.94 de latitude et 1.87 de longitude et un niveau de zoom de 12.
Avec la méthode L.tileLayer on définit une carte.
Ensuite il faut que cette carte devienne le "background" de la boite.

Deuxième carte

Nouveauté : un marqueur au centre de la carte ! Voir carte !

Le code HTML

... <link rel="stylesheet" href="../leaflet/leaflet.css" /> <script type="text/javascript" src="../leaflet/leaflet.js"></script> ... <body> <div id="carte" style="width:100%; height:100%"></div> ...

Différence notable avec l'exemple précédent : on suppose que le dossier correspondant à la librairie a été récupéré sur le site https://leafletjs.com puis décompressé et installé en local.

Les différents fichiers du framework :

Notez le dossier "images" contenant les marqueurs.

Le script

	var ma_carte = L.map('carte', { zoomControl:false }).setView([48.80952, 7.776818], 13);
				
		var osm_fond = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 
            attribution: '© OpenStreetMap contributors',
            maxZoom: 19     });
		// définir un fond de carte
        ma_carte.addLayer(osm_fond); // ajouter ce fond à la boite identifiée ma_carte
			
		var marker = L.marker([48.804128, 7.776792]).addTo(ma_carte).bindPopup("LIJE Creative");

Le centre de la carte correspond à la position GPS de la ville de Hagueneau en Alsace !

Par rapport au script précédent une instruction supplémentaire pour positionner un marqueur au centre de la carte.

Indiquer à l'internaute sa position sur la carte via un marqueur

Il faut donc récupérer la position GPS de l'internaute grâce à l'objet geolocation de JS (qui est implémentée par tous les navigateurs récents) puis utiliser l'API leaflet pour définir le centre de la carte, ajouter le fond de carte et positionner le marqueur. Voir carte !

Le script correspondant

if(navigator.geolocation) navigator.geolocation.getCurrentPosition(fcarte) ;
	function fcarte(position)
	{
		var vlatitude = position.coords.latitude; 
		var vlongitude = position.coords.longitude; 
				
		var ma_carte = L.map('carte').setView([vlatitude, vlongitude], 17); 				
		var osm_fond = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 
            attribution: '© OpenStreetMap contributors',
            maxZoom: 19     });
		// définir un fond de carte
        ma_carte.addLayer(osm_fond); // ajouter ce fond à la boite identifiée ma_carte
			
		var marker = L.marker([vlatitude, vlongitude]).addTo(ma_carte).bindPopup("LIJE Creative");

L'internaute est géolocalisé (si son navigateur l'autorise) et ses coordonnées sont récupérées dans deux variables.
Les méthodes L.map et L.marker sont alors argumentées avec ces deux variables.

Ce n'est donc pas plus compliqué qu'avec l'API proposée par Google.

API google traduction

GOOGLE propose diverses API qu'il est relativement facile d'installer dans une page web.
Vous connaissez tous Google Maps. Maintenant je traite de l'API Google traduction qui permet à un visiteur étranger de traduire toute la page dans sa langue.

Exemple

Sélectionnez "anglais" dans la liste déroulante ci-dessous.

Notez l'ajout d'une barre de menus qui permet entre autres de revenir au texte original.
Mais comment ça marche ?

Installer le service de traduction GOOGLE dans une page web

C'est relativement simple. Dans la partie HEAD il faut créer un lien vers le service de traduction mis à disposition par Google.

<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"> </script>

Attention écrivez bien "https" (et non pas "http").

Il faut ensuite et dans la partie BODY, créer une boîte DIV vide mais qui sera remplie par l'API : une liste déroulante proposant toutes les langues possibles et la mention "powered by GOOGLE".
Le code correspondant de cette boite DIV :

<div id="traduction" style ="width : 30%; border : 1px solid red; margin : auto; "></div>

Il faut ensuite écrire une fonction JS dont le code (sans les balises SCRIPT) est le suivant :

	function googleTranslateElementInit() 
	{
	new google.translate.TranslateElement({pageLanguage: 'fr'}, 'traduction');
	}

Utilisation basique de Google Maps

Point besoin d'ouvrir un compte chez Google pour afficher une carte figée.

Point besoin d'être développeur web chevronné pour intégrer une carte Google statique dans une page.
Il suffit d'ouvrir google.fr de saisir le nom d'une localité (ou région ou pays) puis de cliquer sur l'onglet "Maps". La carte apparait ! Il faut alors cliquer sur "partager" puis "intégrer une carte" pour obtenir du code HTLM qu'il suffit ensuite de coller dans la page.

Ci-dessus une carte correspondant à la commune de Calais.
Le code généré par l'application Google Maps est le suivant :

<iframe src="https://www.google.com/maps/embed?pb=... width="600" height="450" frameborder="0" style="border:0" allowfullscreen> </iframe>

Notez le lien vers un site sécurisé (protocole https).