Map JS API
Draw a line and measure the total distance
This example explains how to draw a line and measure the total distance using events and length function.
<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, 10); map.ItemUpdated.on(OnUpdated); map.ItemCreated.on(OnCreated); } function Draw(mode) { var options = { layerId: "", isShared: false, isLocked: false, defaultItemName: "default", defaultItemStyles: { "style.color": "#FF0000" } } map.SwitchMode(mode, options); } function OnUpdated(e) { // Get the length in meters with the feature id var dist = map.GetLineLength(e.features[0].id) / 1000.0; document.getElementById('distancebtn').innerHTML = dist.toFixed(2) + ' Km'; } function OnCreated(e) { // Get the length in meters with the feature id var dist = map.GetLineLength(e.features[0].id) / 1000.0; document.getElementById('distancebtn').innerHTML = dist.toFixed(2) + ' Km'; } </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 id="distancebtn" onclick="Draw('draw_line_string')">Line</button> </div> </div> </body> </html>
Help Guide Powered by Documentor