Docs

Map JS API

Update properties of an existing item on the map #

By calling AddMapItems with an exsting Id, the related item will be update with new properties.

 

<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 addGeoJSON() { 
     var geoJson = { 
       "id" : "poly1",
       "type": "Feature",
       "properties": {
          "name": "Polygon1",
          "style.line-color": "#00FF00",
          "style.color": "rgba(255,255,0,0.5)",
          "style.line-width": 10,
        },
        "geometry": {
           "type": "Polygon",
           "coordinates": [[
               [-71.23, 46.466],
               [-70.23, 46.466],
               [-70.23, 47.466],
               [-71.23, 47.466],
               [-71.23, 46.466]
            ]]
         }
     };  
    map.AddMapItems(geoJson, "", false, false);
 }

 function updateGeoJSON() { 
   var geoJson = { 
     "id" : "poly1",
     "type": "Feature",
     "properties": {
        "name": "Polygon1",
        "style.line-color": "#FFFF00",
        "style.color": "rgba(255,0,0,0.3)",
        "style.line-width": 5,
     },
     "geometry": {
        "type": "Polygon",
        "coordinates": [[
           [-72.23, 46.466],
           [-71.23, 46.466],
           [-71.23, 47.466],
           [-72.23, 47.466],
           [-72.33, 47.166],
           [-72.23, 46.466]
        ]]
      }
   }; 
   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 class="btn btn-default" onclick="updateGeoJSON()">Update</button>
  </div>
</div>
     
</body>
</html>
Help Guide Powered by Documentor
Suggest Edit