Docs

Map JS API

Display layers list #

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

  • 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 : Rasters.io 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 Rasters.io web portal (https://app.rasters.io) or the REST API. 

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

<html>
<head>
    
    <script src="https://rasters.io/maps/v0.8.0/rasters.map.min.js"></script>
    <link rel="stylesheet" href="https://rasters.io/maps/v0.8.0/rasters.css" />

    <style>
        html, body {
            height: 100%;
            -ms-touch-action: none;
        }       
    </style>
</head>
<body>
    <script>       
        var map;
        var MapToken = "Enter your MapToken here";
                              
        Rasters.Map.OnReady = function () {
              map = new Rasters.Map({
                container: 'Map', // container id
                url: 'https://api.rasters.io/', 
                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");
         document.getElementById("layersTable").appendChild(layerButton);
     } 
  }     
    </script>

 <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>
   <div id="layersTable" class="btn-group" style="position: absolute; left: 10px; top: 10px;"></div>
 </div>    
     
</body>
</html>
Help Guide Powered by Documentor
Suggest Edit