Docs

Map JS API

Add a not editable Polygon #

Add a polygon on the map which is NOT editable

Add a polygon on the map using a GeoJSON to specify position and different properties. The polygon is not shared and LOCKED (NOT editable by the user)

 

<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.3170425, 46.4604, 6);    
   }
  
function addGeoJSON() { 
    var geoJson = { 
       "type": "Feature",
       "properties": {
         "name": "Polygon1",
         "style.bordercolor": "#00FF00",
         "style.color": "rgba(255,255,0,0.5)",
         "style.borderwidth": 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]
      ]]
    }
 }; 
      // Set the last parameter to true (isLocked)
      map.AddMapItems(geoJson, "", false, true);
  }
</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="addGeoJSON()">Add Polygon</button>
  </div>
</div>
     
</body>
</html>
Help Guide Powered by Documentor
Suggest Edit