Docs

Map JS API

  1. Basic
    1. Simple map
    2. Satellite map
    3. Unauthorized access
  2. Layers
    1. Display layers list
    2. Add items to a layer
  3. Geometry
    1. Add a not editable Polygon
    2. Add a not editable marker
    3. Add an editable line
    4. Add a unique map item
    5. Add an editable Marker
    6. Add multiple items
    7. Delete an item
    8. Delete an item by click
    9. Update an existing item
  4. Camera
    1. Fly to position
    2. Tilt and Rotate
    3. Tilt and Display 3D building
  5. Style
    1. Set marker style
    2. Set icon
    3. Set polygon style
    4. Modify item properties - Opacity, size, ...
    5. Show/Hide items
  6. User interaction
    1. Display a popup
    2. Draw on the map
    3. Measure a distance
    4. Measure an area
  7. Events
    1. Basic Item events handling
    2. Change item position in real-time
    3. Handle mouse events
  8. GeoCoding
    1. Geocode an address
    2. Reverse Geocode

Add a unique map item with the JS API #

Add a line on the map using a GeoJSON to specify position and different properties. The line is added locally and not related to any layers. The Line is not shared (local to the session) and not locked i.e. the user can click and edit the line.

If the properties “Id” is not specified in the GeoJson, the API will generate automatically an unique id for the item. Each time the button Add Line is clicked, a new item is created with the same “Name”. In this example, the Id is speficied and the item will be updated each time the button Add Line is clicked.

 

<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",
        "id" : "line_id1",
        "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]
           ]
        }
     };  

     // Add the geojson to the map. The feature is Not locked so the user can interact with
     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 Line</button>
  </div>
</div>
     
</body>
</html>
Yes No Suggest edit
« Add an editable lineAdd an editable Marker »
Help Guide Powered by Documentor
Suggest Edit