Display layers list #

Fetch the list of all current layers of the map with the JS API. There are several layer types supported by :

  • Base : This is the default layer when a map is created. The map contains streets, parcs, water, cities, … The Base layer can be deleted and replaced by custom GIS data.
  • Vectors : supports vector layers from ShapeFile, and Tile Vector.
  • Rasters : It is possible to add GeoTiff and Rasters Tiles.
  • Annotation : This is a layer to add annotations to map (polygons, markers, circles, and lines)
  • IoT : This layer can be added and configured via the portal or the REST API and provide a direct connection to an IoT data source. All IoT will be automatically displayed on the map.
  • Collect : A Collect layer is used by the mobile application (Android/IOS) to collect geographic information from the field and display it on the map.

To add layers, use the web portal ( or the REST API. 

The following sample display a preconfigured map which contains the base layer and 1 Annotation layer.

    <script src=""></script>
    <link rel="stylesheet" href="" />

        html, body {
            height: 100%;
            -ms-touch-action: none;
        var map;
        var MapToken = "Enter your MapToken here";
        Rasters.Map.OnReady = function () {
              map = new Rasters.Map({
                container: 'Map', // container id
                url: '', 
                mapKey: "",
                authenticationMode: Rasters.AuthenticationMode.MapToken,               
                token: MapToken 
   map.OnReady = OnConnectHander;

 function OnConnectHander() {
            map.SetPosition(-71.2170425, 46.810457, 10);    

function getLayers() {
   var layers = map.GetAllLayers();

   for (var i = 0; i < layers.length; i++) { 
         var layerButton = document.createElement("button");
         layerButton.innerText = layers[i].Name;
         layerButton.setAttribute("class", "btn btn-default btn-sm");

 <div style='width: 100%; height: 400px; position: relative;'> 
   <div id="Map" style='width: 100%; height: 100%;'></div>
   <div class="btn-group" style="position: absolute; right: 10px; top: 10px;">
      <button class="btn btn-default" onclick="getLayers()">Get Layers</button>
   <div id="layersTable" class="btn-group" style="position: absolute; left: 10px; top: 10px;"></div>
Help Guide Powered by Documentor
Suggest Edit