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

Delete an item with a mouse click #

Remove an item on the map with a click event on the item. Attach to the ItemClicked event to get information of the element on the map. Retreive the item Id and delete it. Here is the GeoJson structure of the item returned by the event click :

  • geometry: {coordinates: Array(2), type: “Point”}
  • id: “6607355376ce2859d05ea4903808f196”
  • properties:
    • date: “2018-09-19T15:44:15.882Z”
    • is_locked: false
    • is_shared: false
    • layer_id: “”
    • style.active-icon-size: 1.5
    • style.icon: “star”
    • style.icon-color: “rgba(0,0,0,1)”
    • style.icon-opacity: 1
    • style.inactive-icon-size: 1.2
    • style.shape: “point”
    • style.text-color: “rgb(0,0,0)”
    • style.text-opacity: 1
    • style.text-size: 12
    • style.visible: true
    • text: “My point”
    • type: “MapItems”
  • type: “Feature”

 

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

       // Attach to the item clicked event   
       map.ItemClicked.on(OnClicked);
           
   }

  function OnConnectHander() {
            map.SetPosition(-71.2170425, 46.810457, 10);    
            addGeoJSON();
        }       

  function OnClicked(e) {
      map.DeleteItems(e.id);
  }


   function addGeoJSON() { 
      var geoJson = { 
          "type": "Feature",
          "properties": {
              "text": "My Point", 
              "style.icon": "star",
              "Customprop": "my property 1"
          },
          "geometry": {
             "type": "Point",
             "coordinates": [-71.217042, 46.810457]
          } 
      }; 
    
      // Set the last parameter to false (is not Locked)
      map.AddMapItems(geoJson, "", false, false);
  }
</script>

  <div id="Map" style='width: 100%; height: 100%;'></div>
     
</body>
</html>
Yes No Suggest edit
« Delete an itemUpdate an existing item »
Help Guide Powered by Documentor
Suggest Edit