VIAMICHELIN JAVASCRIPT API


MAP

Map is responsible for map and its navigation and is launched via VMLaunch().

MapConfig parameter object

Constant prefix: ViaMichelin.Api.Constants.Map

PropertyTypeDescriptionDefault
container DOMElement DOM element containing the map. N/A
center {locId:string} or {address: {GeocodingConfig}} or {coords: GeoPoint} or {poi: POIId} or {geoBoundaries:{no: GeoPoint, se: GeoPoint}} or [prefix]. FROM_ GEOLOCATION or [prefix]. DELAY_LOADING The initial Map center.
The constant [prefix].FROM_GEOLOCATION initialize map centre with current position (if available).
[prefix].DELAY_LOADING to value the map centre based on response from another API service when its map parameter is set (see ItineraryConfig, PoiConfig, ImportConfig and AdminAreaConfig).
A geocoding is performed if an address is input.
{coords:{lon:-1.51135, lat:48.63597}}
zoom int The initial Map zoom level. (0: small scale, 16: big scale). 4
geoConstraints {zoom: {min:int, max:int}, bounds: {sw:GeoPoint, ne:GeoPoint}} Restricts navigation to the specified geographical area and zoom range. The defined geo area must be able to fully include the view at a defined minimum zoom level. center and zoom settings must be compatible with constraints. -
scrollwheel boolean Indicates whether scrollwheel zooming on the map is activated. true
traffic boolean Indicates whether traffic info is displayed in covered countries. Should be refreshed every 3mins via the refresh() method. false
trafficOptions {events : boolean, boxLegend : boolean} Options to traffic information.
events: displays/hides traffic events.
boxLegend: displays/hides traffic legend box .
{events : true, boxLegend : true}
tileOpacity float Set opacity of background map tiles. 1.0

Mobile and Tablet dedicated settings.

skin SKIN Selects the skin to apply on map controls. Selections should depend on screen resolution of the target device (smartphone, tablet, etc). SKIN has one of the following values:
[prefix].SKIN.DEFAULT
[prefix].SKIN.MOBILE.SMALL

[prefix].SKIN.MOBILE.MEDIUM
[prefix].SKIN.MOBILE.LARGE
...SKIN.DEFAULT
settingByOverlay boolean Move map controls in a modal dialogue box displayed as a full map overlay. This helps avoid overloading the map with too many controls. This parameter should be used in conjunction with skin. false

 

markerControl boolean Indicates whether the target should be present on the map. false
mapTypeControl boolean Indicates whether map type selector is displayed. false
mapTypeControlOptions {type:MAPTYPE} Options to select map type, including initial map type. MAPTYPE has one of the following values:
[prefix].TYPE.ROADMAP
[prefix].TYPE.SATELLITE
[prefix].TYPE.HYBRID
[prefix].TYPE.SATELLITE
[prefix].TYPE.HYBRID
[prefix].TYPE.OBLIQUE: available only at zoom level bigger than 16 in about 1000 european urban areas. With this view type, traffic information (see setTraffic()) and service POIs (see menuPoiControl) are not displayed.
[prefix].TYPE.OBLIQUEHYBRID: idem
[prefix].TYPE.EMPTY
[prefix].TYPE.LIGHT: light maps dedicated to mobiles and tablets.
{type: ...ROADMAP}
mapMenuControl boolean Indicates whether map menus are displayed. Provides global menu management. true
mapMenuControlOptions {style:{align: string}} Map menu options. {style:{align:"left"}}
menuPoiControl boolean Indicates whether service POIs (Service stations, schools, etc) menu is displayed.
NB: even if this parameter is set at true, the control remains unavailable if skin is not set at its default value. Then settingByOverlay must be at true to access the control.
false
menuPoiControlOptions {mode:POIMODE, layer:[string]} POI menu options.POIMODE has one of the following values:
[prefix].POI.MODE.ALL: displays all available layers.
[prefix].POI.MODE.MORE: displays only layers specified in layer array.
[prefix].POI.MODE.LESS: displays all layers minus those specified in layer array.
For more information please contact the Support Team.
{mode:...ALL}
mapToolsControl true Indicates whether map controls are displayed. true
mapToolsControlOptions {style:{align: string}} Map tools options. {style:{align:"left"}}
navigationControlOptions {type:NAVCONTYPE} Navigation graphic control options including size.NAVCONTYPE has one of the following values:
[prefix].NAVIGATION.CONTROL. DEFAULT
[prefix].NAVIGATION.CONTROL .MINI

This setting is valid only with default skin.
{type: ...DEFAULT}
navigationMode NAVMODE Indicates the navigation mode. NAVMODE has one of the following values:
[prefix].NAVIGATION.STATIC: static map,
[prefix].NAVIGATION.DRAG: pan & scan with mouse,
[prefix].NAVIGATION.DRAGZOOM: zone selection with mouse.
...DRAG
situationMapControl boolean Indicates whether mini navigation map is displayed in the bottom right corner. false
geolocationControl boolean Indicates whether geolocation control is displayed. false
weatherControl boolean Indicates whether weather control is displayed. false
weatherControlOptions {withBubble: boolean, mode: MODE} Weather options on the map. mode sets the behaviour when no weather station is available in the map viewport. It has one of the following values:
ViaMichelin.Api.Constants.Weather.
POSITION_MODE.TRACKER
: displays a directional indicator for the closest station;
ViaMichelin.Api.Constants.Weather.
POSITION_MODE.CENTER
: clones the closest station marker in the map centre.
withBubble specifies if forecast should be displayed when clicking on the marker.
{withBubble: true, mode: TRACKER}

 

Methods

List of available methods on Map service object (that you get as response of onInit or onSuccess callbacks).

MethodsReturn valueDescription
getCenter() GeoPoint Returns the current geographical coordinates of the map centre.
getZoomLevel() int Returns current zoom level.
getZoomConfig() int Returns the initial zoom level.
getMapId() string Returns the ViaMichelin owner ID of the map (called MapId). See ViaMichelin REST API documentation.
getNorthWest(), getNorthEast(), getSouthWest(),getSouthEast() GeoPoint Provides the geographical coordinates of the requested corner of the map.
getMapType() MAPTYPE Returns current map type. Possible values can be found in mapTypeControlOptions of MapConfig.
drawMap(center:object, zoom:int) - Displays a map centered on geographical coordinates and using a scale factor. center has the same type as the property with the same name in MapConfig.
redrawInitialMap() - Redraws the map based on the initial centre and zoom level.
mapZoomIn() - Increases the zoom level to zoom in.
mapZoomOut() - Decreases the zoom level to zoom out.
setZoomLevel(zoom:int) - Set a new zoom level.
moveEast(), moveNorth(), moveSouth(), moveWest () - Pans the map in the requested direction.
panTo(coords:GeoPoint), moveTo(coords:GeoPoint) - Centres the map on new geographical coordinates. With panTo, the transition is smoothly animated.
resizeTo(Size) - Changes the map dimensions.
refresh() - Refreshes map content. Useful for hot data such as traffic information.
getTileOpacity() float Returns opacity of the background map.
setTileOpacity(newOpacity:float) - Changes opacity of the background map.
setLightsOff(flag:boolean, opt: {color: string, opacity: float}) - Switches on/off lights to highlight the map. Background curtain takes the requested colour and opacity (default: #000 et 0.8).

 

setMapTypeControl(flag:boolean) - Hides/displays map type selector.
setMapType(maptype:MAPTYPE) - Changes map type. Possible values can be found in mapTypeControlOptions of MapConfig.
setMarkerControl(flag:boolean) - Hides/displays target on the map.
setMapToolsControl(flag:boolean, opt:object) - Hides/displays map tools. The opt object has the same type mapToolsControlOptions of MapConfig.
setNavigationControl(flag:boolean, opt:object) - Hides/displays zoom bar. opt object has the same type navigationControlOptions of MapConfig.
setMapMenuControl(flag:boolean, opt:object) - Hides/displays map menu. The opt object has the same type mapMenuControlOptions de MapConfig.
setSituationMapControl(flag:boolean) - Hides/displays situation map.
setGeolocationControl(flag:boolean) - Hides/displays geolocation control.
setWeatherControl(flag:boolean, opt:object) - Hides/displays weather control. The opt object has the same type weatherControlOptions of MapConfig.
setNavigationMode(navMode:NAVMODE) - Sets map navigation mode.Possible values can be found in navigationControlOptions of MapConfig.
setMenuPoiControl(flag:boolean, opt:object) - Hides/displays Service POIs menu. The opt object has the same type menuPoiControlOptions of MapConfig
setTraffic(flag:boolean, opt:object) - Hides/displays traffic information on the map. Should be refreshed every 3mins via the refresh() method. The opt object has the same type trafficOptions of MapConfig.
setScrollwheel(flag:boolean) - Activates/deactivates scrollwheel zoom function.
setMapFullscreen(flag:boolean) - Activates/deactivates fullscreen map display.

 

addLayer(layer:...Layer) - Adds a graphics object to the map.
removeLayer(layer:...Layer) - Removes a graphic object from the map.
removeAllLayers() - Removes all graphics objects from the map.
drawMapFromLayers([layer:...Layer]) - Redraws the map to fit all contained graphics objects given as parameter, or if not set added with addLayer().

 

convertGeoToPixel(coords:GeoPoint) Point Converts geographical coordinates into pixel coordinates (to the upper left corner).
convertPixelToGeo (point:Point) GeoPoint Converts pixel coordinates of a point on the map (relative to the upper left corner) into geographical coordinates.
convertPixelToMeter(pixelSize:int) int Converts a pixel distance into a projected distance (in metres).

 

Events

EventsArgumentsDescription
onClick GeoPoint Fired when the mouse is clicked on the map.
onRightClick GeoPoint Fired when the mouse is right clicked on the map.
onDoubleClick GeoPoint Fired when the mouse is double clicked on the map.
onMapTypeChanged - Fired when map type changes.
onMapCenterChanged GeoPoint Fired when map centre is has been changed.
onBubbleOpen - Fired when info-bubble is open.
onBubbleClosed - Fired when info-bubble is closed.
onMouseWheelDown GeoPoint Fired when the mouse wheel is used on the map.
onMouseWheelUp GeoPoint Fired when the mouse wheel is used on the map.
onZoomChanged - Fired when zoom level changes.
onStartDragZoom GeoPoint Fired when map drag and zoom begins.
onDragZoom GeoPoint Fired when map drag and zoom is used.
onStopDragZoom GeoPoint Fired when map drag and zoom ends.

 

Billing

A charged request = initial map loading, any zoom in/out and pan and geocoding of the map centre (if center is an address). Mini-map use doubles requests. Weather use also doubles requests.

 

Main dedicated examples

hello World!

Launch this example (map0.htm)

function fGetCurrentPosition() {
 if(navigator.geolocation){
  //get position from GPS
  return ViaMichelin.Api.Constants.Map.FROM_GEOLOCATION; 
 }else{
  return { coords : {lon: 8.53, lat: 47.38}};
 }
};

function fLoadMap(){
 VMLaunch("ViaMichelin.Api.Map",{//Service parameters
   //Map container (DOM element)
   container : $_id("map_container"),
   //Initial map center
   center : fGetCurrentPosition(),
   //Initial zoom level
   zoom : 11
  },{
   onInitError: function(){
    alert('Whoops Map cannot be loaded!');
   }
  });
};//fLoadMap

Launch this example (map0.htm)

 

Create a map

Launch this example (map1.htm)

var myMap = null;

function fGetBestConf(conf) {
 var useragent = navigator.userAgent;
 if(useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 || useragent.indexOf('iPad') != -1 ) {
  conf.container.style.width = '100%';
  conf.container.style.height = '100%';
  conf.skin = ViaMichelin.Api.Constants.Map.SKIN.MOBILE.SMALL;
  //Display geolocation control
  conf.geolocationControl = true;   
  if(useragent.indexOf('iPad') != -1){
   conf.skin = ViaMichelin.Api.Constants.Map.SKIN.MOBILE.LARGE;
  }
 }else{  
  conf.skin = ViaMichelin.Api.Constants.Map.SKIN.DEFAULT;
  //Display service POIs selector
  conf.menuPoiControl = true;
  //Display only Service station layer
  conf.menuPoiControlOptions = {mode:ViaMichelin.Api.Constants.Map.POI.MODE.MORE, layer:['STS']};
  //Display situation map
  conf.situationMapControl =true;
 }
 return conf;
};//fGetBestConf

function fLoadMap(){
 var commonConf = {//Service parameters
  //Map container (DOM element)
  container : $_id("map_container"),
  //Initial geographical coordinates of the map center
  center : { coords : {lon: 8.53, lat: 47.38}},
  //You can also use an address
  //center : {address:{city:"Paris", countryISOCode: "FRA"}},
  //You can also use a locID (already includes the best zoom level)
  //center : {locId:"31NDFhcWsxMGNOVEV1TlRBd01qUT1jTFRBdU1USTNNRFk9"},
  //You can also use a (dbID, poiID) pair (which implicitely includes the best zoom level)
  //center : {poi:{db:163978,id=ND1216}},
  //You can also use current position (from a GPS sensor)
  //center : ViaMichelin.Api.Constants.Map.FROM_GEOLOCATION,
  //Initial zoom level. See onSuccess below if center is a locID or a poiID
  zoom : 11,
  //Display map type selector
  mapTypeControl : true,
  //Set map type
  mapTypeControlOptions : {type: ViaMichelin.Api.Constants.Map.TYPE.HYBRID},
  //Display geolocation selector
  geolocationControl : true
 };
 VMLaunch("ViaMichelin.Api.Map", fGetBestConf(commonConf),{
   onInit: function(serviceMap){
    myMap = serviceMap;
   },
   onClick: function(event){
    //Display current mouse coordinates
    $_id("position").innerHTML = "Center geo-coordinates of the map are (" + event.lon.toFixed(5)  + ', ' + event.lat.toFixed(5) + ')';
   },
   onInitError: function(){
    alert('Whoops Map cannot be loaded!');
   }/*,
  //If center is a locID or a (dbID, poiID) pair, you must uncomment this section
  //to set the zoom level defined in the zoom parameter
  onSuccess: function(){
    this.refresh();
  }*/
  });
};//fLoadMap

Launch this example (map1.htm)

 

Display traffic info

Launch this example (map2.htm)

var parisMap = null;
var franceMap = null;

function fRefreshFranceMap(){
franceMap.refresh();
};//fRefreshFranceMap

function fLoadMaps(){
//France
VMLaunch("ViaMichelin.Api.Map",{//Service parameters
 container : $_id("map_container1"),
 center : { coords : {lon: 2.21484, lat: 46.33403}},
 zoom : 6,
 mapTypeControl : true,
 mapTypeControlOptions : {type: ViaMichelin.Api.Constants.Map.TYPE.SATELLITE},
 traffic:true
},{
  onInit: function(serviceMap){
	franceMap = serviceMap;
  },		
  onInitError: function(){
	alert('Whoops! Map cannot be loaded!');
  },
  onSuccess: function(){
	//Refresh traffic layer every 3mn
	setInterval("fRefreshFranceMap()", 180000);
  }
});
//Paris
VMLaunch("ViaMichelin.Api.Map",{//Service parameters
 container : $_id("map_container2"),
 center : { coords : {lon: 2.34448, lat: 48.85729}},
 zoom : 11,
 mapTypeControl : true,
 //Initial map type is empty
 mapTypeControlOptions : {type: ViaMichelin.Api.Constants.Map.TYPE.EMPTY},
 traffic:true,
 //Constraint the visible geo area to Paris urban area.
 geoConstraints : {bounds:{sw:{lon:1.80, lat:48.54}, ne:{lon:2.92, lat:49.18}}, zoom:{min:10,max:12}}
},{
 onInit: function(serviceMap){
  parisMap = serviceMap;
 },
 onInitError: function(){
  alert('Whoops! Map cannot be loaded!');
 }
});
};//fLoadMaps

Launch this example (map2.htm)

 

Play with lights and space

Launch this example (map3.htm)

var myMap = null;
var isMapFullscreen = false;

function fLoadMap(){ 
 VMLaunch("ViaMichelin.Api.Map",{//Service parameters
   container : $_id("dMapContainer"),
   //Initializes map center with data from another service called in the onSuccess callback
   center : {coords:{lon:2.0, lat:48.0}},
   mapTypeControl : true,
   zoom: 6,
   mapTypeControlOptions : {type: ViaMichelin.Api.Constants.Map.TYPE.SATELLITE}
  },{
   onInit: function(serviceMap){
    myMap = serviceMap;
   },
   onInitError: function(){
    alert('Whoops! Map cannot be loaded.');
   },
   onDoubleClick: function(){
    if(isMapFullscreen){
     myMap.setMapFullscreen(false);
     isMapFullscreen = false;
    }
   },
  });
 //Slider to change map tile opacity
 $("#slider").slider({
  min:0, max:100, value:100,  
  slide: function(event, ui) {
   myMap.setTileOpacity(ui.value/100);
  }});
}//fLoadMap

function fSetLightsOff(){
 myMap.setLightsOff(true);
};//fSetLightsOff

function fSetMapFullscreen(){
 isMapFullscreen = true;
 myMap.setMapFullscreen(true);
};//fSetMapFullscreen

Launch this example (map3.htm)

Back to top