Docs

Map JS API

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>
Help Guide Powered by Documentor
Suggest Edit