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 "local" marker to the map which can be editable by users #

Add a “local” marker/point on the map with the JS API which can be edited by the user. In this example, the marker is added on the local map and not related to any Layer. It’s possible to link an annotation with an existing layer so when a layer is hidden, all related annotations are hidden.

The API method AddMapItem is used to add a feature on the map and the following parameters can be set :

  • items : GeoJSon defining the features and all properties to add
  • layerId : Id of the related layer for the features. If no layer is related set to “”.
  • isShared : indicates if the features added are shared and persistent (true) OR live only in the current session (false)
  • isLocked : Indicates if the features can be moved by the user (false) or not (true). A Locked feature can be still deleted or updated via the JS API.

 

<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": "Feature",
          "id": "Point1",
          "properties": {
              "name": "Point1", 
              "style.icon": "star"
          },
          "geometry": {
             "type": "Point",
             "coordinates": [-71.217042, 46.810457]
          } 
      }; 
    
      // 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 Point</button>
  </div>
</div>
     
</body>
</html>
Yes No Suggest edit
« Add a unique map itemAdd multiple items »
Help Guide Powered by Documentor
Suggest Edit