Add multiple items using GeoJSON on the map

Map JS API

3.6.Add multiple items using GeoJSON on the map #

Add multiple items on the map using a FeatureCollection in the GeoJSON to specify geometry and different properties. This sample presents the following properties:

Polygon :

style.color
style.line-width

Line :

style.line-color
style.line-width

Marker :

style.icon

For a complete list of the style properties see the section Style.

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

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]
    }
   }
  ]
 };

      // 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 class="btn btn-default" onclick="addGeoJSON()">Add Items</button>
  </div>
</div>
     
</body>
</html>

Was this helpful? Yes No

Suggest edit

« Add an editable Marker Delete an item »

Docs

Map JS API

3.6.Add multiple items using GeoJSON on the map #