Use the JS API to hide or show items on the map

Map JS API

5.5.Use the JS API to hide or show items on the map #

This is an example of how to use the SetVisibilityById API function to show or hide map item using the ID.

<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);    
           addGeoJSON();
        }       

function Hide() {
        map.SetVisibilityById(false, "point1");
	map.SetVisibilityById(false, "line1"); 
	map.SetVisibilityById(false, "poly1"); 
   }

function Show() {
        map.SetVisibilityById(true, "point1");
	map.SetVisibilityById(true, "line1"); 
	map.SetVisibilityById(true, "poly1"); 
   }

function addGeoJSON() { 
      var geoJson = {
       "type": "FeatureCollection",
       "features": [{
         "type": "Feature",
         "id": "line1",
         "properties": {
           "name": "My Line",
           "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",
 "id": "poly1",
 "properties": {
   "name": "My Polygon",
   "style.color": "#00FFFF",
   "style.line-width": 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",
 "id": "point1",
 "properties": {
   "name": "My Point", 
   "style.icon": "circle"
 },
 "geometry": {
 "type": "Point",
    "coordinates": [-71.43, 46.466]
    }
   }
  ]
 };    
      // Set the last parameter to false (is Not Locked)
      map.AddMapItems(geoJson, "", 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 onclick="Hide()">Hide</button>
    <button onclick="Show()">Show</button>   
  </div>
</div>
     
</body>
</html>

Was this helpful? Yes No

Suggest edit

« Modify item properties - Opacity, size, ...User interaction »

Docs

Map JS API

5.5.Use the JS API to hide or show items on the map #