AdminArea is responsible for displaying administrative area shapes (as polygons) on a map. Those shapes are hosted at ViaMichelin. Launched via VMLaunch().

AdminAreaConfig parameter object

Constant prefix: ViaMichelin.Api.Constants.Import.AdminArea

map {container: DOMElement, focus: boolean} DOM element containing the map to plot the imported objects.focus specifies if the map should be redrawn to fit all contained graphics objects (including newly imported objects). N/A
area string ISO code of the administrative area(s) to highlight. It can be a level-0 area (ex: FR, a country), a level-1 area (ex: FR-A, a région in France) or a level-2 area (ex: FR-16, a département in France ).
See available administrative codes.
withSubAreas boolean Indicates whether all administrative sub-areas should be displayed. Valid only if area is set to a level-0 or level-1 code. true
styles [{area: string, style:{}}] Style applied on polygon shapes. area defines the ISO code of an administrative area and style defines a set of Polygon properties.
All polygons without private style will use the default style (corresponding to area: [prefix].DEFAULT).
[{ area: ....DEFAULT, style: { strokeColor:"#fff", strokeOpacity: 1.0, strokeWeight: 2, fillColor: "#00f", fillOpacity: 0.4 }}]


Response object in onSuccess

A ComplexLayer object type.


Main dedicated examples

Use administrative areas

Launch this example (div3.htm)

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 : ViaMichelin.Api.Constants.Map.DELAY_LOADING,
   mapTypeControlOptions : {type: ViaMichelin.Api.Constants.Map.TYPE.SATELLITE}
   onSuccess: function(){
    //data to display: population by french regions
    var data = {"FR-A": 1734145, "FR-B": 2908359, "FR-C": 1308878, "FR-P": 1422193, "FR-D": 1610067, "FR-E": 2906197, "FR-F": 2440329, "FR-G": 1342363, "FR-H":260196, "FR-I": 1117059, "FR-Q": 1780192, "FR-J": 10952011, "FR-K": 2295648, "FR-L": 710939, "FR-M": 2310376, "FR-N": 2551687, "FR-O": 3996588, "FR-R": 3222061, "FR-S": 1857481, "FR-T": 1640068, "FR-U": 4502385, "FR-V": 5645407};   
    //Compute min and max values
    var bounds = fGetMinMax(data);
    var adminAreaConf = {
     //We request France...
     area: "FR",
     //... to display its 23 regions
     withSubAreas: true,
     //Dynamically filled below
     styles: [],
     //Target map to display administrative areas
     map:{container: $_id("dMapContainer"), focus:true}   
    //Loop through region ISO codes to set a private style to each one
    for(var item in data){
     //Compute color channel value using extrapolation (min value -> darkest color, max value -> brightest color)
     var channel = parseInt(255 * (data[item] - bounds[0]) / (bounds[1] - bounds[0]));
      area : item,
      style : {
       strokeOpacity: 1.0,
       strokeWeight: 2,
       fillOpacity: 0.5,
       //Convert the channel value into an HEX code.
       fillColor: "#" + fRGBtoHex(channel , 0, 0)              
    VMLaunch("ViaMichelin.Api.Import.AdminArea", adminAreaConf, {
      onSuccess: function(geojsonLayer){
       $_id("dStatus").innerHTML = "" + geojsonLayer.getNumberOfLayers() + " objects have been imported.";
      onError: function(error){
       alert('Whoops! Import of administrative areas cannot be done: ' + error.errorMsg);
   onInitError: function(){
    alert('Whoops! Map cannot be loaded.');

function fGetMinMax(data){
 var min = Number.MAX_VALUE;
 var max = Number.MIN_VALUE
 for(var item in data){
  if(data[item] < min){
   min = data[item];
  }else if(data[item] > max){
   max = data[item];    
 return new Array(min, max);
function fRGBtoHex(R,G,B) {
 return fToHex(R) + fToHex(G) + fToHex(B)

function fToHex(N) {
 if (N==null){
  return "00";
 N =parseInt(N); 
 if (N==0 || isNaN(N)){
  return "00";
 return "0123456789ABCDEF".charAt((N-N%16)/16) + "0123456789ABCDEF".charAt(N%16);

Launch this example (div3.htm)

Back to top