Vous avez trouvé ce tutoriel intéressant ? Recommandez le en cliquant sur le bouton +1

Animation pour rétrécir un cercle

Tutoriel publié le 02 Avril 2011

Comment créer un cercle rétrécissable ?

Ce tutoriel est basé sur le code de l'exemple intitulé :

Dessiner un cercle sur une carte Google Maps.

Nous allons maintenant compléter ce code afin d'ajouter un effet visuel.

Le but est d'afficher un cercle qui peu à peu rétrécit pour finalement disparaître.

On va donc :

créer et afficher un cercle,
puis diminuer son rayon de 50 mètres toutes les 30 millisecondes,
pour finalement le supprimer de la carte lorsque son rayon sera inférieur ou égal à 0 mètre.

Carte avec un cercle rétrécissable

Fonction retrecirCercle

Voici la fonction nommée "retrecirCercle()" qui va nous permettre de rétrécir de façon dynamique un cercle sur une carte créée à l'aide de l'API Google Maps JavaScript Version3.

Cette fonction utilise un paramètre :

objetCercle : cercle que l'on souhaite rétrécir,

et trois variables sont définies à l'intérieur :

rayon : le rayon initial du cercle est récupéré à l'aide de objetCercle.getRadius(),
diminue : distance, en mètres, retirée au rayon du cercle,
delai : delai, en millisecondes, d'attente entre deux variations du rayon du cercle.

Dans cet exemple, ces 3 variables sont définies afin que le rayon du cercle soit égal à son rayon initial, puis pour que le rayon du cercle diminue de 50 mètres toutes les 30 millisecondes.

La ligne de code ci-dessous permet, pour l'objet cercle monCercle désigné, d'affecter à son rayon (.setRadius) une nouvelle valeur égale à rayon.

monCercle.setRadius(rayon);

<!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:0px; padding:0px}
			#EmplacementDeMaCarte{height:100%}
		</style>
		<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript">
			function initialisation(){
				var centreCarte = new google.maps.LatLng(47.389982, 0.688877);
				var optionsCarte = {
					zoom: 12,
					center: centreCarte,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
				var optionsCercle = {
					center: centreCarte,
					map: maCarte,
					radius: 3000
				}
				var monCercle = new google.maps.Circle(optionsCercle);
			}
			function retrecirCercle(objetCercle){
				var rayon = objetCercle.getRadius();
				var diminue = 50;
				var delai = 30;
				function decremente(){
					objetCercle.setRadius(rayon);
					if(0<=rayon){
						rayon=rayon-diminue;
						setTimeout(decremente,delai);
					}else{
						objetCercle.setMap(null);
					}
				};
				setTimeout(decremente,delai);
			}
			google.maps.event.addDomListener(window, 'load', initialisation);
		</script>
	</head>
	
	<body>
		<div id="EmplacementDeMaCarte"></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>

Attendre que la carte soit affichée

On va commencer à faire disparaître le cercle uniquement lorsque toutes les tuiles de la carte seront totalement chargées.

Pour cela on va observer l'événement 'tilesloaded'.

<!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:0px; padding:0px}
			#EmplacementDeMaCarte{height:100%}
		</style>
		<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript">
			function initialisation(){
				var centreCarte = new google.maps.LatLng(47.389982, 0.688877);
				var optionsCarte = {
					zoom: 12,
					center: centreCarte,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
				var optionsCercle = {
					center: centreCarte,
					map: maCarte,
					radius: 3000
				}
				var monCercle = new google.maps.Circle(optionsCercle);
				google.maps.event.addListenerOnce(maCarte, 'tilesloaded', function(){
					.....
				});
			}
			function retrecirCercle(objetCercle){
				var rayon = objetCercle.getRadius();
				var diminue = 50;
				var delai = 30;
				function decremente(){
					objetCercle.setRadius(rayon);
					if(0<=rayon){
						rayon=rayon-diminue;
						setTimeout(decremente,delai);
					}else{
						objetCercle.setMap(null);
					}
				};
				setTimeout(decremente,delai);
			}
			google.maps.event.addDomListener(window, 'load', initialisation);
		</script>
	</head>
	
	<body>
		<div id="EmplacementDeMaCarte"></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>

Rétrécir le cercle une fois la carte affichée

Enfin, une fois toutes les tuiles chargées, il ne reste plus qu'a appeler la fonction nommée retrecirCercle() en lui passant en paramètre :

l'objet cercle que l'on souhaite rétrécir : monCercle

Attention : Selon les caractéristiques de votre ordinateur et/ou navigateur la fluidité de l'animation peut être très variable.

<!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:0px; padding:0px}
			#EmplacementDeMaCarte{height:100%}
		</style>
		<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript">
			function initialisation(){
				var centreCarte = new google.maps.LatLng(47.389982, 0.688877);
				var optionsCarte = {
					zoom: 12,
					center: centreCarte,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
				var optionsCercle = {
					center: centreCarte,
					map: maCarte,
					radius: 3000
				}
				var monCercle = new google.maps.Circle(optionsCercle);
				google.maps.event.addListenerOnce(maCarte, 'tilesloaded', function(){
					retrecirCercle(monCercle);
				});
			}
			function retrecirCercle(objetCercle){
				var rayon = objetCercle.getRadius();
				var diminue = 50;
				var delai = 30;
				function decremente(){
					objetCercle.setRadius(rayon);
					if(0<=rayon){
						rayon=rayon-diminue;
						setTimeout(decremente,delai);
					}else{
						objetCercle.setMap(null);
					}
				};
				setTimeout(decremente,delai);
			}
			google.maps.event.addDomListener(window, 'load', initialisation);
		</script>
	</head>
	
	<body>
		<div id="EmplacementDeMaCarte"></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>

Code final

Un cercle s'affiche, une fois toutes les tuiles de la carte affichées, puis rétrécit peu à peu jusqu'à disparaître.

Son rayon diminue de 50 mètres toutes les 30 millisecondes jusqu'à sa disparition totale.

<!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:0px; padding:0px}
			#EmplacementDeMaCarte{height:100%}
		</style>
		<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript">
			function initialisation(){
				var centreCarte = new google.maps.LatLng(47.389982, 0.688877);
				var optionsCarte = {
					zoom: 12,
					center: centreCarte,
					mapTypeId: google.maps.MapTypeId.ROADMAP
				}
				var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
				var optionsCercle = {
					center: centreCarte,
					map: maCarte,
					radius: 3000
				}
				var monCercle = new google.maps.Circle(optionsCercle);
				google.maps.event.addListenerOnce(maCarte, 'tilesloaded', function(){
					retrecirCercle(monCercle);
				});
			}
			function retrecirCercle(objetCercle){
				var rayon = objetCercle.getRadius();
				var diminue = 50;
				var delai = 30;
				function decremente(){
					objetCercle.setRadius(rayon);
					if(0<=rayon){
						rayon=rayon-diminue;
						setTimeout(decremente,delai);
					}else{
						objetCercle.setMap(null);
					}
				};
				setTimeout(decremente,delai);
			}
			google.maps.event.addDomListener(window, 'load', initialisation);
		</script>
	</head>
	
	<body>
		<div id="EmplacementDeMaCarte"></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>

Vous pouvez retrouver un exemple d'utilisation de cette animation ici :

Séismes au Japon depuis le 11/03/2011

API Google Maps JavaScript version 3

Rétrécir un cercle de façon dynamique

Google Maps API & Google Web Services