Add items to a layer

Map JS API

2.2.Add items to a layer #

This sample demonstrates how to add items to an annotation layer of the map using the JS API. In this sample :

Get the list of layers of the map
Browse to find an “Annotation” layer. The Annotation layer is used to logically link map items to this layer (circles, points, lines, polygons)
Map items are added to the Annotation Layer
Click on the buttons to Hide or Show the layer

The MapKey used in this sample contains an emtpy pre-configured Annotation layer. To manage layers on a map, use the REST Api or the Rasters.IO portal (https://app.rasters.io).

<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.23, 46.460457, 6); 
     getLayers();
     addGeoJSON(); 
 }

 function Hide() {
    map.HideLayer(AnnotationLayerId ); 
 }

 function Show() {
    map.ShowLayer(AnnotationLayerId ); 
 }

 function getLayers() {
   // Get all layers in the map
   var layers = map.GetAllLayers();
 
   // Search an Annotation layer and save the ID
   for (var i = 0; i < layers.length; i++) { 
     if (layers[i].Type == "Annotation") {
        AnnotationLayerId = layers[i].Id;
     } 
   } 
 }

 function addGeoJSON() { 
   var geoJson = {
     "type": "FeatureCollection",
     "features": [{
       "type": "Feature",
       "properties": {
         "name": "Line1",
         "style.line-color": "#00FF00",
         "style.line-width": 10
       },
       "geometry": {
         "type": "LineString",
         "coordinates": [
           [-71.23, 46.466], [-70.23, 46.466], [-70.23, 47.466], [-71.23, 47.466]
         ]
       }
     },
     {
       "type": "Feature",
       "properties": {
         "name": "Polygon1",
         "style.color": "#00FFFF",
         "style.borderwidth": 5
    },
    "geometry": {
       "type": "Polygon",
       "coordinates": [[
          [-71.33, 46.566],[-70.33, 46.566],[-70.33, 47.566],[-71.33, 47.566],[-71.33, 46.566]]]
       }
    },
    {
      "type": "Feature",
      "properties": {
          "id": "Point1", 
          "name": "Point1", 
          "style.icon": "circle"
      },
      "geometry": {
         "type": "Point",
         "coordinates": [-71.43, 46.466]
      }
    }
   ]
 };

  // Add the item related to the layer Id
  map.AddMapItems(geoJson, AnnotationLayerId , false, false);

}
</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="Hide()">Hide</button>
    <button class="btn btn-default" onclick="Show()">Show</button>
  </div>
</div>
</body>
</html>

Was this helpful? Yes No

Suggest edit

« Display layers list Geometry »

Docs

Map JS API

2.2.Add items to a layer #