Map JS API
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>
Help Guide Powered by Documentor