VIAMICHELIN JAVASCRIPT API


Layer

Layer est la classe de base des objets graphiques affichés sur la carte. Elle n'est pas instanciée directement.

Principaux exemples concernés

Insérer des objets graphiques

Exécuter cet exemple (div1.htm)

var myFirstMap = null;
var points = new Array();

function fLoadMap(){
VMLaunch("ViaMichelin.Api.Map",{//Service parameters
 container : $_id("map_container"),
 center : { coords : {lon: 2.24344, lat: 48.83381}},
 zoom : 5,
 mapTypeControl : true,
 mapTypeControlOptions : {type: ViaMichelin.Api.Constants.Map.TYPE.HYBRID},
 situationMapControl : true,
 menuPoiControl : true,
 //Display all available service POIs layers
 menuPoiControlOptions:{mode:ViaMichelin.Api.Constants.Map.POI.MODE.ALL}
},{
 onInit: function(serviceMap){
  myFirstMap = serviceMap;
 },
 onSuccess: function(){
  //create a marker to display ViaMichelin headquarters
  var marker = new ViaMichelin.Api.Map.Marker({
	 coords : {lon: 2.24414, lat: 48.83514},
	 htm : "ViaMichelin<hr/>110, avenue Victor-Hugo<br/>F-92514 BOULOGNE-BILLANCOURT Cedex",
	 //image is 52*36 so offset is half those dimensions
	 icon : {url: 'http://business-solutions.travel.michelin.fr/dl/api_jsv2/images/petit_bib.gif', offset : {x : -26, y: -18}},
	 autoOpen: true,
	 title: 'Bibendum'
  });
  //Add image switch on mouseover/mouseout
  marker.addEventListener("onMouseover", function(){
   marker.setIcon("http://business-solutions.travel.michelin.fr/dl/api_jsv2/images/petit_bib_negat.gif");
  });
  marker.addEventListener("onMouseout", function(){
   marker.setIcon("http://business-solutions.travel.michelin.fr/dl/api_jsv2/images/petit_bib.gif");
  });
  myFirstMap.addLayer(marker);
  //create a serie of circle shapes to display subsidiaries
  var subsidiaries = new Array();
  subsidiaries.push({coords: {lon: -3.69635, lat: 40.41357}, htm : "Madrid"});
  subsidiaries.push({coords: {lon: 9.18587, lat: 45.46306}, htm : "Milano"});
  subsidiaries.push({coords: {lon: -0.11069, lat: 51.50752}, htm : "London"});
  subsidiaries.push({coords: {lon: 8.67563, lat: 50.10611}, htm : "Frankfurt am Main"});    
  for(var i=0;  i< subsidiaries.length; ++i){
   for(var j= 10; j >0; --j){
	var circle = new ViaMichelin.Api.Map.Circle({
		center : subsidiaries[i].coords,
		radius : j * 20000,
		strokeColor: '#f00',
		strokeOpacity: 0.0, //transparent
		strokeWeight: 1,
		fillColor: '#f00',
		fillOpacity: 1.0/j,
        htm: subsidiaries[i].htm
	   });
	myFirstMap.addLayer(circle);
   }
  }
 },
 onInitError: function(){
  alert('Whoops!Map cannot be loaded!');
 },
 onClick: function(event){
  //Draw a polyline with all clicked points
  if(null == polyline){
   //First point: create the polyLine
   polyline = new ViaMichelin.Api.Map.PolyLine({
	  coords : [event],
	  strokeColor: '#f00',
	  strokeOpacity: 0.8,
      htm: "my polyline"	  
	 });
   myFirstMap.addLayer(polyline);
  }else{
   //Next points: update the path 
   var path = polyline.getPath();//as[{lon,lat}]
   path.push(event);
   polyline.setPath(path);
  }
 }
});
};//fLoadMap

Exécuter cet exemple (div1.htm)