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