Map JS API
Add a unique map item with the JS API
Add a line on the map using a GeoJSON to specify position and different properties. The line is added locally and not related to any layers. The Line is not shared (local to the session) and not locked i.e. the user can click and edit the line.
If the properties “Id” is not specified in the GeoJson, the API will generate automatically an unique id for the item. Each time the button Add Line is clicked, a new item is created with the same “Name”. In this example, the Id is speficied and the item will be updated each time the button Add Line is clicked.
<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; } function OnConnectHander() { map.SetPosition(-71.3170425, 46.4604, 6); } function addGeoJSON() { var geoJson = { "type": "Feature", "id" : "line_id1", "properties": { "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] ] } }; // Add the geojson to the map. The feature is Not locked so the user can interact with 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 class="btn btn-default" onclick="addGeoJSON()">Add Line</button> </div> </div> </body> </html>
Help Guide Powered by Documentor