VIAMICHELIN JAVASCRIPT API


MarkerClusterer

MarkerClusterer is a marker manager for large sets of Marker objects. It groups markers into clusters according to their distance from a cluster's centre. Calculations being made on the browser, the number of reasonably manageable POIs depends on the platform of the browser (from a few hundred to several thousand).
Launched via new but does not inherit from Layer: map is directly passed as constructor parameter.

Constructor

PropertyTypeDescriptionDefault
map Map service object Map associated with the marker clusterer. N/A
markers [Marker] Array of markers managed by the clusterer. N/A
gridSize int The grid size of a cluster in pixel. The higher the value, the stronger the clustering. 60
styles [{url: string, size:Size, overlayText: {text: string, offset: Point, style: object}}] Custom styles for the cluster markers. The array is ordered according to increasing cluster size in multiples of 10 (the 1st style applies to clusters with between 2 and 9 POIs, the 2 nd one to those with between 10 and 99 POIs, etc.).. url is an image URL, size.height and size.width are its dimensions in px and style defines complementary CSS settings (in JavaScript notation) applied to the overlay text (aka the number of markers in the cluster). internal style

 

Methods

MéthodesValeur retournéeDescription
clear() - Removes clusters and markers from the linked map and destroy the clusterer (therein unusable).

 

Main dedicated examples

Manage hundreds of markers

Launch this example (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

Launch this example (poi2.htm)

Back to top