Docs

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
Suggest Edit