Docs

Map JS API

  1. Basic
    1. Simple map
    2. Satellite map
    3. Unauthorized access
  2. Layers
    1. Display layers list
    2. Add items to a layer
  3. Geometry
    1. Add a not editable Polygon
    2. Add a not editable marker
    3. Add an editable line
    4. Add a unique map item
    5. Add an editable Marker
    6. Add multiple items
    7. Delete an item
    8. Delete an item by click
    9. Update an existing item
  4. Camera
    1. Fly to position
    2. Tilt and Rotate
    3. Tilt and Display 3D building
  5. Style
    1. Set marker style
    2. Set icon
    3. Set polygon style
    4. Modify item properties - Opacity, size, ...
    5. Show/Hide items
  6. User interaction
    1. Display a popup
    2. Draw on the map
    3. Measure a distance
    4. Measure an area
  7. Events
    1. Basic Item events handling
    2. Change item position in real-time
    3. Handle mouse events
  8. GeoCoding
    1. Geocode an address
    2. Reverse Geocode

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>
Yes No Suggest edit
« LayersAdd items to a layer »
Help Guide Powered by Documentor
Suggest Edit