Use the JS API directly to modifiy style properties

Map JS API

5.4.Use the JS API directly to modifiy style properties #

This is an example of how to use the SetItemProperties API function to set style properties for 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 Update() {
  map.SetItemProperties("point1",  { Name: "style.icon-opacity", Value: 0.2 });
  map.SetItemProperties("point1",  { Name: "style.inactive-icon-size", Value: 1.9 });

  map.SetItemProperties("line1",  { Name: "style.line-color", Value: "#FFFFFF" }); 
  map.SetItemProperties("line1",  { Name: "style.line-width", Value: 5 });

  map.SetItemProperties("poly1",  { Name: "style.line-opacity", Value: 0.4 }); 
  map.SetItemProperties("poly1",  { Name: "style.color", Value: "rgba(0,0,0,0)" });
}


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="Update()">Update1</button>
  </div>
</div>
     
</body>
</html>

Was this helpful? Yes No

Suggest edit

« Set polygon style Show/Hide items »

Docs

Map JS API

5.4.Use the JS API directly to modifiy style properties #