VIAMICHELIN JAVASCRIPT API


Examples

Introduction

The map component is called ViaMichelin.Api.Map.

When it launched, it displays a map in a container with the parameters required.

Find an easy example via the quickstart guide.

 

The main uses of the map

Display a country map

For displaying a country map, Thailand in this example, you have to specify 2 options: the map’s center and zoom level.

The zoom level is defined with zoom parameters. It’s a positive integer between 1 and 19.

The map’s center is defined with the zoom parameters, which can contain an object of coordinates with latitude and longitude.

 

var conf = {
  container : $_id("mapContainer"),
  center : {
    coords : {
      lon : 100.50128,
      lat : 13.75421
    }
  },
  zoom : 5
};
VMLaunch("ViaMichelin.Api.Map", conf);             

Consult the page demonstration.

 

Center the map with the user position

To center the map on the user, the parameter "center" will take as value a constant of the API : ViaMichelin.Api.Constants.Map.FROM_GEOLOCATION.

His position can be pointed out by a sight on the center of the map. We use markerControl for this functionality.

And the geolocationControl will allow you to display a button which will centre the user map.

Be careful ! Before using the GPS position user, make sure that the navigator allows access to this functionality.

 

function getPosition () {
  if (navigator.geolocation) {
    // we get back the gps position user 
    return ViaMichelin.Api.Constants.Map.FROM_GEOLOCATION;
  } else {
    // by défault we choose Paris
    return {
      coords : {
        lon : 2.35107,
        lat : 48.85684
      }
    };
  }
}
var conf = {
  container : $_id("mapContainer"),
  center : getPosition(),
  zoom : 14,
  markerControl : true,
  geolocationControl : true
};
VMLaunch("ViaMichelin.Api.Map", conf);
                 

Consult the page demonstration.

 

Add constraints to the navigator

In this example, we display the map of Britain in order to adjust its size by filling the available space in a best way and restrict the navigation to this area.

The area’s surroundings will be visible, but the user wouldn’t be able to reduce the zoom level too much. The world map or France won’t be accessible, and he won’t be able to move the map outside of the area.

You can activate the restriction with the geoConstraints parameter.

 

var conf = {
  container : $_id("mapContainer"),
  center : {
    coords : {
      lon: -2.96592,
      lat: 48.06553
    }
  },
  geoConstraints : {
    zoom : {
      min : 8,
      max : 16
    },
    bounds : {
      ne : {
        lon : -0.97,
        lat : 49.1
      },
      sw : {
        lon : -5.1,
        lat : 47
      }
    }
  },
  zoom : 8
};
VMLaunch("ViaMichelin.Api.Map", conf);
                 

Consult the page demonstration.

 

Deactivate the zoom wheel

Basically, it is possible to make zoom in or out with the mouse wheel. You can deactivate this functionality by using the scrollwheel parameter. It is a Boolean parameter, with takes "true" by default for its value . Then you have to put false at this property to deactivate the scroll on the map.

 

var conf = {
  container : $_id("mapContainer"),
  scrollwheel : false
};
VMLaunch("ViaMichelin.Api.Map", conf);
                 

Consult the page demonstration.

Display the road traffic

To use this option, you have to specify traffic and value to true on the configuration.

The traffic is illustrated by colored highlightings roads, and by default it appears on a sidebar, with a legend for the colors and traffic pictograms.

These 2 functionalities can be deactivated with the  trafficOptions parameter which contains 2 properties, boxLegend and events, like the example below :

 

var bordeaux = {
  coords : {
    lon : -0.57574,
    lat : 44.83498
  }
};
var conf = {
  container : $_id("mapContainer"),
  // centrée sur Bordeaux
  center : bordeaux,
  zoom : 11,
  traffic : true,
  trafficOptions : {
    events : false,
    boxLegend : false
  }
};
VMLaunch("ViaMichelin.Api.Map", conf);               

Consult the page demonstration.

Other options

Change the view of the map

By default, the map displayed in “Map View”, but you can also opt to satellite mode or into hybrid mode.

 

The  mapTypeControl parameter allows you to display a menu to switch the type of the map.

The mapTypeControlOptions parameter permits you to specify the type of map you want to select.

 

var conf = {
  container : $_id("mapContainer"),
  mapTypeControl : true,
  mapTypeControlOptions : {
    type : ViaMichelin.Api.Constants.Map.TYPE.SATELLITE
  }
};
var callbacks = {
  onInit : function (component) {
    map = component;
  },
  onMapTypeChanged : function () {
    log("Map changed to " + map.getMapType());
  }
};
VMLaunch("ViaMichelin.Api.Map", conf, callbacks);                 

Consult the page demonstration.

Display and hide the menu of the map

The mapMenuControl parameter allows you to display or hide menus of the map. In this example, we set this value to "true".

The mapMenuControlOptions enables you to stylize these menus. Here, aligned on the right side.

The setMapMenuControl method is used to display or hide menus, hidden by default.

The method setMapMenuControl makes it possible to modify the value given at the creation of the map mapMenuControl and thus to make visible the hidden menus, or conversely.

In order to modify the map after its creation (to call one of its methods), it is necessary to store the reference to the map created. The event onInit started once the initialized map transmits the instance instance of the component.

Note : in this example, we created a button which displays and hides menus.

var menuControl = false, map;
var conf = {
  container : $_id("mapContainer"),
  mapTypeControl : true,
  menuPoiControl : true,
  mapMenuControlOptions : {
    style : {
      align : "right"
    }
  },
  mapMenuControl : menuControl
};
var callbacks = {
  onInit : function (component) {
    map = component;
  }
};
$_id("btn").onclick = function () {
  menuControl = !menuControl;
  map.setMapMenuControl(menuControl);
};
VMLaunch("ViaMichelin.Api.Map", conf, callbacks);
                 

Consult the page demonstration.

 

Display or hide the map tools

The mapToolsControl enables you to display or hide the map tools like the zoom or the manifying glass.

The mapToolsControlOptions changes the tools position, which basically are at the right side.

The navigationControlOptions permits to reduce the size of the buttons tools.

The setMapToolsControl

The method setMapToolsControl makes it possible to modify the value given at the creation of the map mapToolsControl and thus to make visible the hidden tools, or conversely.

To modify the map after its creation (to call one of its methods), it is necessary to store the reference to the map created. The event onInit started once the initialized map transmits this reference.

Note : in this example, we created a button which displays and hides menus.

 

var mapToolsControl = false, map;
var conf = {
  container : $_id("mapContainer"),
  mapToolsControl : mapToolsControl,
  mapToolsControlOptions : {
    style : {
      align : "right"
    }
  },
  navigationControlOptions : {
    type : ViaMichelin.Api.Constants.Map.NAVIGATION.CONTROL.MINI
  }
};
var callbacks = {
  onInit : function (component) {
    map = component;
  }
};
$_id("btn").onclick = function () {
  mapToolsControl = !mapToolsControl;
  map.setMapToolsControl(mapToolsControl);
};
VMLaunch("ViaMichelin.Api.Map", conf, callbacks);          

Consult the page demonstration.

Display a static map

It is possible to display a static map thanks to the navigationMode option. You have to set ViaMichelin.Api.Constants.Map.NAVIGATION.STATIC to its value, like the example below.

Don’t forget to set mapToolsControl to false in order to hide the navigation tools of the map. If not, the user will be able to move the map.

 

var conf = {
  container : $_id("mapContainer"),
  navigationMode : ViaMichelin.Api.Constants.Map.NAVIGATION.STATIC,
  zoom : 6,
  center : {
    coords : {
      lat : 40,
      lon : -3
    }
  },
  mapToolsControl : false
};
VMLaunch("ViaMichelin.Api.Map", conf);                

Consult the page demonstration.

Create a map remote control

We will create different buttons which handles the map features.

We create 4 buttons which move the map to the north, the south, the east and west.

Plus, we create 2 buttons which enable to zoom in and out the map, with zoomIn and zoomOut methods.

 

We create finally a reset button which permits to put the map back on its basic position (coordinates datas and zoom).

The map will be replaced by using the drawMap method.

var center0 = {
    coords : {
      lon : 2.35107,
      lat : 48.85684
    }
  },
  zoom0 = 6,
  map,
  conf = {
    container : $_id("mapContainer"),
    center : center0,
    zoom : zoom0,
    mapToolsControl : false
  },
  callbacks = {
    onInit : function (component) {
      map = component;
    }
  };
VMLaunch("ViaMichelin.Api.Map", conf, callbacks);
 
$_id("north").onclick = function () {
  map.moveNorth();
};
$_id("south").onclick = function () {
  map.moveSouth();
};
$_id("west").onclick = function () {
  map.moveWest();
};
$_id("east").onclick = function () {
  map.moveEast();
};
$_id("zoomIn").onclick = function () {
  map.mapZoomIn();
};
$_id("zoomOut").onclick = function () {
  map.mapZoomOut();
};
$_id("reset").onclick = function () {
  map.drawMap(center0, zoom0);
};
$_id("resizeSmall").onclick = function () {
  map.resizeTo(600, 400);
};
$_id("resizeLarge").onclick = function () {
  map.resizeTo(800, 600);
};
                 

Consult the page demonstration.