Webjax.eu :: Gestion de marqueurs par niveau de zoom

Visualisation d'une page Webjax

Gestion de marqueurs par niveau de zoom

Cet exemple est propulsé par

Si vous suivez la présentation de la librairie GMaps dans l'ordre proposé par ce site, vous devez être familier du placement de marqueurs sur des cartes GMaps.
Cette familiarité vous est nécessaire afin de pouvoir comprendre et utiliser les concepts présentées sur cette page.
Cette page présente des exemples de gestion complexe de marqueurs, complexe dans le sens ou l'on gère les marqueurs par niveau de zoom.
Un premier exemple de cette page vous permet de créer une carte GMaps contenant 25 points fixés aléatoirement sur l'espace de l'Europe et de placer sur ces points des marqueurs de "météo" de façon "fictive".

Carte météo de l'Europe (simple)

Ce premier exemple vous présente une carte météo de l'Europe simple ou le nombre de marqueurs à afficher a été fixé à 25.
Le niveau de zoom par défaut de la carte est de 3 et le nombre marqueurs par niveau de zoom est géré par un objet GMarkerManager .

L'exemple est testable ci après :

Utilisation de l'exemple #00

ZONE DE CHARGEMENT DE LA CARTE GMAPS

Le code source de l'exemple est repris ci après avec dans l'ordre :

le code Javascript permettant de créer la carte et lancer la procédure de récupération des marqueurs avec données météo associées.

le code html du bouton d'appel des fonctions javascript.

var IMAGES = [ "sun", "rain", "snow", "storm" ]; var ICONS = []; var map = null; var mgr = null; /* fonction intialisatrice de la création de la carte / function chargerCarteMeteoEurope () { map = new GMap2(document.getElementById("map_0")); map.disableDragging(); var center = new GLatLng(48.25, 11.00); map.setCenter(center, 4); window.setTimeout(parametrerMarqueursMeteo, 0); } // fonction qui crée et retourne un tableau de 10 points aléatoires // avec la valeur d'icone météo associée function lireMarqueursMeteo(n) { var batch = []; for (var i = 0; i < n; ++i) { batch.push(new GMarker(getRandomPoint(), { icon: getWeatherIcon() })); } return batch; } // fonction qui crée un gestionnaire de marqueurs // définit 25 marqueurs pour le niveau de zoom 4 function parametrerMarqueursMeteo() { mgr = new GMarkerManager(map); mgr.addMarkers(lireMarqueursMeteo(25), 4); mgr.refresh(); } // fonction permettant de déterminer aléatoirement // une donnée météo pour créer ensuite la classe // d'icone de marqueur correspondante // qui est renvoyée en contexte principal pour symboliser // l'icône du marqueur météo à associer au point function getWeatherIcon() { var i = Math.floor(IMAGES.lengthMath.random()); if (!ICONS[i]) { var icon = new GIcon(); icon.image = "images/meteo/gmaps." + IMAGES[i] + ".png"; icon.iconAnchor = new GPoint(16, 16); icon.infoWindowAnchor = new GPoint(16, 0); icon.iconSize = new GSize(32, 32); icon.shadow = "images/meteo/gmaps." + IMAGES[i] + "-shadow.png"; icon.shadowSize = new GSize(59, 32); ICONS[i] = icon; } return ICONS[i]; } // fonction de création aléatoire de point function getRandomPoint() { var lat = 48.25 + (Math.random() - 0.5)14.5; var lng = 11.00 + (Math.random() - 0.5)36.0; return new GLatLng(Math.round(lat10)/10, Math.round(lng10)/10); }
Le code HTML du bouton d'action :
 <input type="button" name="ok_0" value="charger la carte météo de l'Europe (25 marqueurs)" onClick="chargerCarteMeteoEurope();" />

ico time

: 30/01/2007 15:57:47 | ico tag

ico tag

: Google, Maps, GMarkerManager, getWeatherIcon, getWeatherMarkers, météo, marker, xml, cartes, cartographie, géolocalisation, marqueurs,

ico com

Aucun commentaire enregistré