Use the manual mode to create annotations with the mouse #

This example introduces the manual mode to create and edit polygons, lines, and markers with the SwitchMode API function.

    <script src=""></script>
    <link rel="stylesheet" href="" />

        html, body {
            height: 100%;
            -ms-touch-action: none;
        var map;
        var MapToken = "Enter your MapToken here";
        Rasters.Map.OnReady = function () {
              map = new Rasters.Map({
                container: 'Map', // container id
                url: '', 
                mapKey: "",
                authenticationMode: Rasters.AuthenticationMode.MapToken,               
                token: MapToken 
        map.OnReady = OnConnectHander;           

  function OnConnectHander() {
            map.SetPosition(-71.2170425, 46.810457, 10);              

 function Draw(mode) {

            var options = {
                layerId: "",
                isShared: false,
                isLocked: false,
                defaultItemName: "default",
                defaultItemStyles: {
                    "style.color": "#FF0000"

            map.SwitchMode(mode, options);        


<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="Draw('draw_polygon')">Polygon</button>
    <button onclick="Draw('draw_line_string')">Line</button>
    <button onclick="Draw('draw_point')">Marker</button>
Help Guide Powered by Documentor
Suggest Edit