VIAMICHELIN JAVASCRIPT API


MarkerClusterer

MarkerClusterer est en charge de la gestion de grosses collections d'objets de type Marker et de leur regroupement en clusters en fonction de leur répartition spatiale. Les calculs se faisant sur dans le navigateur, le nombre de POIs raisonnablement gérables est dépendant de la plate-forme du navigateur (de quelques centaines à quelques milliers).
Elle est instanciée par new mais n'hérite pas de Layer: la carte est directement passée en paramètre du constructeur.

Paramètres du constructeur

PropriétésTypeDescriptionDéfaut
map objet de service Map Carte à laquelle est associée le gestionnaire de marqueur. N/A
markers [Marker] Tableau des marqueurs pris en charge par le gestionnaire. N/A
gridSize int Taille en px de la zone de capture d'un cluster. Plus la valeur est grande, plus le regroupement est fort. 60
styles [{url: string, size:Size, overlayText: {text: string, offset: Point, style: object}}] Styles appliquées aux clusters. Le tableau est ordonnée par taille croissante des clusters par multiple de 10 (le 1er style s'applique aux clusters de 2 à 9 POIs, le 2ème à ceux de 10 à 99, etc). url est l'URL de l'image du cluster, size.height et size.width sont ses dimensions en pixels et style définit le style complémentaire (CSS en notation JavaScript) appliqué au texte en surimpression du cluster (qui le nombre de marqueurs dans le cluster). style interne

 

Méthodes

MéthodesValeur retournéeDescription
clear() - Enlève les marqueurs & clusters de la carte associée et déruit le gestionnaire (qui devient alors inutilisable).

 

Principaux exemples concernés

Gérer l'affichage de centaines de POI

Exécuter cet exemple (poi2.htm)

var myMap = null;

function fLoadMap(){
 VMLaunch("ViaMichelin.Api.Map", {//Service parameters
  container : $_id("map_container"),
  center : { coords : {lon: 3.0, lat: 47.0}},
  zoom : 6,
  mapTypeControl : true,
  mapTypeControlOptions : {type: ViaMichelin.Api.Constants.Map.TYPE.SATELLITE}
 },{
   onInit: function(serviceMap){
    myMap = serviceMap;
   },
   onSuccess: function(){
    var markers = [];
    //Loads all Markers from poi2.json file
    for (var i = 0, dataPhoto; dataPhoto = data.photos[i]; i++) {
     var marker = new ViaMichelin.Api.Map.Marker({
       coords : {lon: dataPhoto.longitude, lat: dataPhoto.latitude},
       title: '' + i,
       htm: '' + i,
       icon : {url: "http://business-solutions.travel.michelin.fr/dl/api_jsv2/images/photo_icon.gif", offset : {x : -16, y: -16}}
     });
     markers.push(marker);  
    }    
    //Create the marker clusterer
    var markerClusterer = new ViaMichelin.Api.Map.MarkerClusterer({
     map : myMap, //Map service object
     markers : markers, //Array of markers
     gridSize: 70/*,
    //Uncomments this section to set a customized style instead of the default one,
	styles: [{
	url: 'http://business-solutions.travel.michelin.fr/dl/api_jsv2/images/people35.png',
	size:{height: 35,width: 35},
	overlayText : {
	 offset : {x : 15, y: 20}
	 style: {color:"#fff", fontSize:"60%"}}
	}, {
	url: 'http://business-solutions.travel.michelin.fr/dl/api_jsv2/images/people45.png',
	size:{height: 45,width: 45},
	overlayText : {
	 offset : {x : 15, y: -22}
	 style: {color:"#fff", fontSize:"80%"}}
	}, {
	url: 'http://business-solutions.travel.michelin.fr/dl/api_jsv2/images/people55.png',
	size:{height: 55,width: 55},
	overlayText : {
	 offset : {x : 16, y: 30}
	 style: {color:"#fff"}}
	}, {
	url: 'http://business-solutions.travel.michelin.fr/dl/api_jsv2/images/people55.png',
	size:{height: 55,width: 55},
	overlayText : {
	 offset : {x : 5, y: 24}
	 style: {color:"#fff", fontSize:"120%"}}
	}]*/
    });
   $_id("status").innerHTML = data.photos.length + " POI are loaded.";
   },
   onInitError: function(){
    alert('Whoops Map cannot be loaded!');
   }
  });
};//fLoadMap

Exécuter cet exemple (poi2.htm)

 

Retour haut de page