Sample demonstrating how to handle events raise by items

Map JS API

7.1.Sample demonstrating how to handle events raise by items #

This sample introduces how to attach function to events raised by the API. The following events are presented:

ItemCreated
ItemDeleted
ItemClicked
ItemSelectionChanged

Add items with the button and after you can click on map element to raised events.

<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" />
  
</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, 6);       

           // Attach events
           map.ItemClicked.on(OnClicked);
           map.ItemCreated.on(OnCreated);
           map.ItemSelectionChanged.on(OnSelChanged);
           map.ItemDeleted.on(OnDeleted);  
        }       

 function OnClicked(e) {
     alert("Clicked - " + e.properties.device_name);
  }

function OnSelChanged(e) {
    if (e.features.length == 0)
       alert("Unselected - ");

    for (i = 0; i < e.features.length; i++) {
       alert("OnSelChanged - " + e.features[i].properties.device_name);
    }
  }

  function OnCreated(e) {
    for (i = 0; i < e.features.length; i++) {
      alert("Created - " + e.features[i].properties.device_name);
    }
  }

  function OnDeleted(e) {
    for (i = 0; i < e.features.length; i++) {
       alert("OnDeleted - " + e.features[i].properties.device_name);
    }
  }
 
  function Delete() {
    map.DeleteItems("Line1");
  }

function addGeoJSON() { 
     var geoJson = {
       "type": "FeatureCollection",
       "features": [{
       "type": "Feature",
       "id": "Line1",
       "properties": {
       "device_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]]
       }
     },
     {
     "type": "Feature",
     "id": "Polygon1",
     "properties": {
     "device_name": "Polygon1",
     "style.color": "#00FFFF",
     "style.borderwidth": 5
    },
    "geometry": {
     "type": "Polygon",
     "coordinates": [[[-71.33, 46.566],[-70.33, 46.566],[-70.33, 47.566],[-71.33, 47.566],[-71.33, 46.566]]]
     }
     }, {
     "type": "Feature",
     "id": "Point1",
     "properties": {
     "device_name": "Point1",
     "style.color": "#0000ff",
     "style.icon": "star"
    },
     "geometry": {
     "type": "Point",
     "coordinates": [-71.43, 46.466]
    }
    }
   ]
  };

   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 onclick="addGeoJSON()">Add</button>
    <button onclick="Delete()">Delete</button>
  </div>
</div>
     
</body>
</html>

Was this helpful? Yes No

Suggest edit

« Events Change item position in real-time »

Docs

Map JS API

7.1.Sample demonstrating how to handle events raise by items #