Décoder avec decodePath une chaîne de LatLng encodés

Bibliothèque géométrie sphérique ( Geometry Library ) exemples et tutoriels en Français

Cartographie et webmapping

Partager ce tutoriel sur les réseaux sociaux
Signaler une erreur dans cet article

Décoder avec la méthode decodePath des latitude/longitude encodées

Des LatLng encodés, via la méthode encodePath de la bibliothèque Geometry Library, se présentent sous la forme d'une chaîne de caractères :

{j~uHyajJtesNzeve@ng}\uszPr_yCyneZ_yqE{fa[}jv^{mdC

Cet encodage permet de diminuer le poids des données nécessaires à la construction d'une polyline ou d'un polygone (exemple : stockage en BDD, minimiser le transfert JSON XML).

Pour décoder cette chaîne de caractères, il faut utiliser la méthode decodePath présente dans la bibliothèque Geometry Library.

Celle-ci retourne un tableau Array de LatLng : {Array.<LatLng>}. Il suffit alors de parcourir ce tableau à l'aide d'une simple boucle for :

var html = "";
/**
 * Chaîne de LatLng encodés
 */
var donneesEncodeesAvantEchappement = '{j~uHyajJtesNzeve@ng}\uszPr_yCyneZ_yqE{fa[}jv^{mdC';

/**
 * Attention :
 * Si la chaîne encodée contient un caractère "\" il faut l'échapper,
 * c'est à dire ajouter un antislash devant.
 * Donc "\" devient "\\".
 * En cas d'oubli, le décodage de la chaîne encodée échouera.
 */
var donneesEncodeesApresEchappement = '{j~uHyajJtesNzeve@ng}\\uszPr_yCyneZ_yqE{fa[}jv^{mdC';

/**
 * Décodage de la chaîne de LatLng encodés, à l'aide de la méthode decodePath.
 * Le résultat donneesDecodees est un tableau Array de LatLng.
 */
var donneesDecodees = new google.maps.geometry.encoding.decodePath( donneesEncodeesApresEchappement );

/**
 * Il ne reste plus qu'à parcourir le tableau donneesDecodees
 * pour en extraire les latitudes et longitudes.
 */
for ( var i=0, I=donneesDecodees.length; i < I; i++ ) {
	var data = donneesDecodees[i].toUrlValue(6);
	html+=data+";";
	/**
	 * Il est également possible d'utiliser :
	 * var latitude = data.lat();
	 * var longitude = data.lng();
	 */
}

alert(html);

pour obtenir finalement les latitudes et longitudes décodées :

50.95102,1.85901;
48.38995,-4.48577;
43.48363,-1.55894;
42.69505,2.89799;
43.77441,7.49701;
48.97312,8.18035;

Attention : n'oubliez pas d'ajouter la bibliothèque geometry lorsque vous appelez le script de l'API Google Maps v3 :

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry"></script>

Carte avec décodage à l'aide de decodePath d'une chaîne encodée de LatLng

Exemple de code pour extraire les latitudes/longitudes contenues dans une chaîne encodée de LatLng

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
		<meta charset="UTF-8" />
		<title>Titre de votre page</title>
		<style type="text/css">
			html {
				height: 100%
			}
			body {
				height: 100%;
				margin: 0;
				padding: 0
			}
			#EmplacementDeMaCarte {
				height: 600px
			}
			#info {
				background: #fff;
				padding: 5px;
				font-size: 14px;
				font-family: arial
			}
		</style>
		<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry"></script>
		<script type="text/javascript">
			function initialisation(){
				var html = "";
				var limites = new google.maps.LatLngBounds();
				var optionsCarte = {
					mapTypeId: google.maps.MapTypeId.ROADMAP
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
				/**
				* LatLng encodés : {j~uHyajJtesNzeve@ng}\uszPr_yCyneZ_yqE{fa[}jv^{mdC
				* La chaîne encodée initiale ci-dessus referme un "\"
				* il faut donc l'échapper en ajoutant un antislash avant.
				* La chaîne encodée devient donc :
				* {j~uHyajJtesNzeve@ng}\\uszPr_yCyneZ_yqE{fa[}jv^{mdC
				*/
				var donneesEncodees = '{j~uHyajJtesNzeve@ng}\\uszPr_yCyneZ_yqE{fa[}jv^{mdC';

				/**
				* La méthode statique decodePath() retourne un tableau de LatLng
				* donneesDecodees est donc un tableau que l'on va parcourir
				* afin d'optimiser l'affichage de la polyline
				*/
				var donneesDecodees = google.maps.geometry.encoding.decodePath(donneesEncodees);
				for( var i=0, I=donneesDecodees.length; i < I; i++){
					limites.extend(donneesDecodees[i]);
					html += donneesDecodees[i].toUrlValue()+";";
				}
				maCarte.fitBounds(limites);
				
				/**
				* Options de la Polyline à afficher
				*/
				var optionsPolyline = { 
					map: maCarte, 
					path: donneesDecodees 
				}
				
				/**
				* Création et affichage de la Polyline
				*/
				var polyline = new google.maps.Polyline(optionsPolyline);  

				/**
				* Affichage des LatLng sous leur forme encodée et décodée
				*/
				document.getElementById('info').innerHTML = "Chaîne de LatLng encodés : "+donneesEncodees+"<br/>Chaîne de LatLng décodés : "+html;
			}
			google.maps.event.addDomListener( window, "load", initialisation );
		</script>
	</head>
	<body>
		<div id="EmplacementDeMaCarte" style="width:100%; height:400px"></div>
		<div id="info"></div>
		<noscript>
			<p>Attention : </p>
			<p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
			<p>Or, il semble que JavaScript est désactivé ou qu'il ne soit pas supporté par votre navigateur.</p>
			<p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
		</noscript>
	</body>
</html>