Community

how to add draw widget along with text labels?

5825
6
Jump to solution
10-15-2018 02:08 PM
Rocky_
by
Occasional Contributor
‎10-15-2018 02:08 PM

I am trying to add drawing tool on map. so user can draw different geometries (polygon, polyline, arrow, square, circle, traingle. etc)... I have already implement simple toolbar using below sample

https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=sketch-geometr...

but I have also want to add text input ...for labeling on map area or geometries.. along with different color and font size..

In short I am trying to implement smart draw tool using ArcGIS JavaScript.

Any help appreciated.

Thank You  

0 Kudos
1 Solution

Accepted Solutions
BlakeTerhune
by MVP Regular Contributor
MVP Regular Contributor
‎10-17-2018 11:07 AM

Here's a quick update I did to the Esri sketch geometry sandbox to include a text graphic button. The Esri icon font graphic example also has a simplified way of displaying a point graphic with textSymbol.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Sketch temporary geometries - 4.9</title>

  <link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css">
  <script src="https://js.arcgis.com/4.9/"></script>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
      font-family: verdana;
    }

    #topbar {
      background: #fff;
      position: absolute;
      top: 15px;
      right: 15px;
      padding: 10px;
    }

    .action-button {
      font-size: 16px;
      background-color: transparent;
      border: 1px solid #D3D3D3;
      color: #6e6e6e;
      height: 32px;
      width: 32px;
      text-align: center;
      box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
    }

    .action-button:hover,
    .action-button:focus {
      background: #0079c1;
      color: #e4e4e4;
    }

    .active {
      background: #0079c1;
      color: #e4e4e4;
    }

  </style>

  <script>
    require([
      "esri/views/MapView",
      "esri/Map",
      "esri/widgets/Sketch/SketchViewModel",
      "esri/Graphic",
      "esri/layers/GraphicsLayer"
    ], function (
      MapView, Map,
      SketchViewModel, Graphic, GraphicsLayer
    ) {

      let editGraphic;

      // GraphicsLayer to hold graphics created via sketch view model
      const graphicsLayer = new GraphicsLayer({
        id: "tempGraphics"
      });

      const map = new Map({
        basemap: "gray",
        layers: [graphicsLayer]
      });

      const view = new MapView({
        container: "viewDiv",
        map: map,
        zoom: 3
      });

      const pointSymbol = {
        type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
        style: "square",
        color: "#8A2BE2",
        size: "16px",
        outline: { // autocasts as new SimpleLineSymbol()
          color: [255, 255, 255],
          width: 3
        }
      };

      const polylineSymbol = {
        type: "simple-line", // autocasts as new SimpleLineSymbol()
        color: "#8A2BE2",
        width: "4",
        style: "dash"
      };

      const polygonSymbol = {
        type: "simple-fill", // autocasts as new SimpleFillSymbol()
        color: "rgba(138,43,226, 0.8)",
        style: "solid",
        outline: {
          color: "white",
          width: 1
        }
      };
      const textSymbol = {
        type: "text",  // autocasts as new TextSymbol()
        color: "white",
        haloColor: "black",
        haloSize: "1px",
        text: "",
        xoffset: 3,
        yoffset: 3,
        font: {  // autocast as new Font()
          size: 12,
          family: "sans-serif",
          weight: "bold"
        }
      };

      view.when(function () {
        // create a new sketch view model
        const sketchViewModel = new SketchViewModel({
          view,
          layer: graphicsLayer,
          pointSymbol,
          polylineSymbol,
          polygonSymbol
        });

        setUpClickHandler();

        // Listen to create-complete event to add a newly created graphic to view
        sketchViewModel.on("create-complete", addGraphic);

        // Listen the sketchViewModel's update-complete and update-cancel events
        sketchViewModel.on("update-complete", updateGraphic);
        sketchViewModel.on("update-cancel", updateGraphic);

        // called when sketchViewModel's create-complete event is fired.
        function addGraphic(event) {
          // Create a new graphic and set its geometry to
          // `create-complete` event geometry.
          let graphicSymbol;
          if (document.querySelector("button.active").id === "textButton") {
            graphicSymbol = textSymbol;
            graphicSymbol.text = prompt("Please enter some text", "Default Text");
          } else {
            graphicSymbol = sketchViewModel.graphic.symbol;
          }
          const graphic = new Graphic({
            geometry: event.geometry,
            symbol: graphicSymbol
          });
          graphicsLayer.add(graphic);
        }

        // Runs when sketchViewModel's update-complete or update-cancel
        // events are fired.
        function updateGraphic(event) {
          // Create a new graphic and set its geometry event.geometry
          var graphic = new Graphic({
            geometry: event.geometry,
            symbol: editGraphic.symbol
          });
          graphicsLayer.add(graphic);

          // set the editGraphic to null update is complete or cancelled.
          editGraphic = null;
        }

        // set up logic to handle geometry update and reflect the update on "graphicsLayer"
        function setUpClickHandler() {
          view.on("click", function (event) {
            view.hitTest(event).then(function (response) {
              var results = response.results;
              if (results.length > 0) {
                for (var i = 0; i < results.length; i++) {
                  // Check if we're already editing a graphic
                  if (!editGraphic && results[i].graphic.layer.id === "tempGraphics") {
                    // Save a reference to the graphic we intend to update
                    editGraphic = results[i].graphic;
    
                    // Remove the graphic from the GraphicsLayer
                    // Sketch will handle displaying the graphic while being updated
                    graphicsLayer.remove(editGraphic);
                    sketchViewModel.update(editGraphic);
                    break;
                  }
                }
              }
            });
          });
        }

        // activate the sketch to create a point
        var drawPointButton = document.getElementById("pointButton");
        drawPointButton.onclick = function () {
          // set the sketch to create a point geometry
          sketchViewModel.create("point");
          setActiveButton(this);
        };

        // activate the sketch to create a polyline
        var drawLineButton = document.getElementById("polylineButton");
        drawLineButton.onclick = function () {
          // set the sketch to create a polyline geometry
          sketchViewModel.create("polyline");
          setActiveButton(this);
        };

        // activate the sketch to create a polygon
        var drawPolygonButton = document.getElementById("polygonButton");
        drawPolygonButton.onclick = function () {
          // set the sketch to create a polygon geometry
          sketchViewModel.create("polygon");
          setActiveButton(this);
        };

        // activate the sketch to create text
        var drawRectangleButton = document.getElementById(
          "textButton");
        drawRectangleButton.onclick = function () {
          // set the sketch to create a polygon geometry
          sketchViewModel.create("point");
          setActiveButton(this);
        };

        // reset button
        document.getElementById("resetBtn").onclick = function () {
          sketchViewModel.reset();
          graphicsLayer.removeAll();
          setActiveButton();
        };

        function setActiveButton(selectedButton) {
          // focus the view to activate keyboard shortcuts for sketching
          view.focus();
          var elements = document.getElementsByClassName("active");
          for (var i = 0; i < elements.length; i++) {
            elements[i].classList.remove("active");
          }
          if (selectedButton) {
            selectedButton.classList.add("active");
          }
        }
      });
    });

  </script>
</head>

<body>
  <div id="viewDiv">
    <div id="topbar">
      <button class="action-button esri-icon-blank-map-pin" id="pointButton"
        type="button" title="Draw point"></button>
      <button class="action-button esri-icon-polyline" id="polylineButton" type="button"
        title="Draw polyline"></button>
      <button class="action-button esri-icon-polygon" id="polygonButton" type="button"
        title="Draw polygon"></button>
      <button class="action-button esri-icon-comment" id="textButton"
        type="button" title="Add Text"></button>
      <button class="action-button esri-icon-trash" id="resetBtn" type="button"
        title="Clear graphics"></button>
    </div>
  </div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

6 Replies
BlakeTerhune
by MVP Regular Contributor
MVP Regular Contributor
‎10-16-2018 04:20 PM

You should be able to create a TextSymbol graphic and add it to a GraphicsLayer. As for the interface to do so, you'd have to build that. Probably when they click on the text graphic button, you can get the text from an input element ahead of time or show a prompt(). Then create the graphic with the user's text and add it to the GraphicsLayer with some default styling.

0 Kudos
Rocky_
by
Occasional Contributor
‎10-17-2018 09:39 AM

Hello Blake,

    Am trying to implement function by which user can add text on map manually for labeling purpose. Can you please help me with that. and if possible can you share any snippet for that..

Thanks

Raj

0 Kudos
BlakeTerhune
by MVP Regular Contributor
MVP Regular Contributor
‎10-17-2018 11:07 AM

Here's a quick update I did to the Esri sketch geometry sandbox to include a text graphic button. The Esri icon font graphic example also has a simplified way of displaying a point graphic with textSymbol.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Sketch temporary geometries - 4.9</title>

  <link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css">
  <script src="https://js.arcgis.com/4.9/"></script>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
      font-family: verdana;
    }

    #topbar {
      background: #fff;
      position: absolute;
      top: 15px;
      right: 15px;
      padding: 10px;
    }

    .action-button {
      font-size: 16px;
      background-color: transparent;
      border: 1px solid #D3D3D3;
      color: #6e6e6e;
      height: 32px;
      width: 32px;
      text-align: center;
      box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
    }

    .action-button:hover,
    .action-button:focus {
      background: #0079c1;
      color: #e4e4e4;
    }

    .active {
      background: #0079c1;
      color: #e4e4e4;
    }

  </style>

  <script>
    require([
      "esri/views/MapView",
      "esri/Map",
      "esri/widgets/Sketch/SketchViewModel",
      "esri/Graphic",
      "esri/layers/GraphicsLayer"
    ], function (
      MapView, Map,
      SketchViewModel, Graphic, GraphicsLayer
    ) {

      let editGraphic;

      // GraphicsLayer to hold graphics created via sketch view model
      const graphicsLayer = new GraphicsLayer({
        id: "tempGraphics"
      });

      const map = new Map({
        basemap: "gray",
        layers: [graphicsLayer]
      });

      const view = new MapView({
        container: "viewDiv",
        map: map,
        zoom: 3
      });

      const pointSymbol = {
        type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
        style: "square",
        color: "#8A2BE2",
        size: "16px",
        outline: { // autocasts as new SimpleLineSymbol()
          color: [255, 255, 255],
          width: 3
        }
      };

      const polylineSymbol = {
        type: "simple-line", // autocasts as new SimpleLineSymbol()
        color: "#8A2BE2",
        width: "4",
        style: "dash"
      };

      const polygonSymbol = {
        type: "simple-fill", // autocasts as new SimpleFillSymbol()
        color: "rgba(138,43,226, 0.8)",
        style: "solid",
        outline: {
          color: "white",
          width: 1
        }
      };
      const textSymbol = {
        type: "text",  // autocasts as new TextSymbol()
        color: "white",
        haloColor: "black",
        haloSize: "1px",
        text: "",
        xoffset: 3,
        yoffset: 3,
        font: {  // autocast as new Font()
          size: 12,
          family: "sans-serif",
          weight: "bold"
        }
      };

      view.when(function () {
        // create a new sketch view model
        const sketchViewModel = new SketchViewModel({
          view,
          layer: graphicsLayer,
          pointSymbol,
          polylineSymbol,
          polygonSymbol
        });

        setUpClickHandler();

        // Listen to create-complete event to add a newly created graphic to view
        sketchViewModel.on("create-complete", addGraphic);

        // Listen the sketchViewModel's update-complete and update-cancel events
        sketchViewModel.on("update-complete", updateGraphic);
        sketchViewModel.on("update-cancel", updateGraphic);

        // called when sketchViewModel's create-complete event is fired.
        function addGraphic(event) {
          // Create a new graphic and set its geometry to
          // `create-complete` event geometry.
          let graphicSymbol;
          if (document.querySelector("button.active").id === "textButton") {
            graphicSymbol = textSymbol;
            graphicSymbol.text = prompt("Please enter some text", "Default Text");
          } else {
            graphicSymbol = sketchViewModel.graphic.symbol;
          }
          const graphic = new Graphic({
            geometry: event.geometry,
            symbol: graphicSymbol
          });
          graphicsLayer.add(graphic);
        }

        // Runs when sketchViewModel's update-complete or update-cancel
        // events are fired.
        function updateGraphic(event) {
          // Create a new graphic and set its geometry event.geometry
          var graphic = new Graphic({
            geometry: event.geometry,
            symbol: editGraphic.symbol
          });
          graphicsLayer.add(graphic);

          // set the editGraphic to null update is complete or cancelled.
          editGraphic = null;
        }

        // set up logic to handle geometry update and reflect the update on "graphicsLayer"
        function setUpClickHandler() {
          view.on("click", function (event) {
            view.hitTest(event).then(function (response) {
              var results = response.results;
              if (results.length > 0) {
                for (var i = 0; i < results.length; i++) {
                  // Check if we're already editing a graphic
                  if (!editGraphic && results[i].graphic.layer.id === "tempGraphics") {
                    // Save a reference to the graphic we intend to update
                    editGraphic = results[i].graphic;
    
                    // Remove the graphic from the GraphicsLayer
                    // Sketch will handle displaying the graphic while being updated
                    graphicsLayer.remove(editGraphic);
                    sketchViewModel.update(editGraphic);
                    break;
                  }
                }
              }
            });
          });
        }

        // activate the sketch to create a point
        var drawPointButton = document.getElementById("pointButton");
        drawPointButton.onclick = function () {
          // set the sketch to create a point geometry
          sketchViewModel.create("point");
          setActiveButton(this);
        };

        // activate the sketch to create a polyline
        var drawLineButton = document.getElementById("polylineButton");
        drawLineButton.onclick = function () {
          // set the sketch to create a polyline geometry
          sketchViewModel.create("polyline");
          setActiveButton(this);
        };

        // activate the sketch to create a polygon
        var drawPolygonButton = document.getElementById("polygonButton");
        drawPolygonButton.onclick = function () {
          // set the sketch to create a polygon geometry
          sketchViewModel.create("polygon");
          setActiveButton(this);
        };

        // activate the sketch to create text
        var drawRectangleButton = document.getElementById(
          "textButton");
        drawRectangleButton.onclick = function () {
          // set the sketch to create a polygon geometry
          sketchViewModel.create("point");
          setActiveButton(this);
        };

        // reset button
        document.getElementById("resetBtn").onclick = function () {
          sketchViewModel.reset();
          graphicsLayer.removeAll();
          setActiveButton();
        };

        function setActiveButton(selectedButton) {
          // focus the view to activate keyboard shortcuts for sketching
          view.focus();
          var elements = document.getElementsByClassName("active");
          for (var i = 0; i < elements.length; i++) {
            elements[i].classList.remove("active");
          }
          if (selectedButton) {
            selectedButton.classList.add("active");
          }
        }
      });
    });

  </script>
</head>

<body>
  <div id="viewDiv">
    <div id="topbar">
      <button class="action-button esri-icon-blank-map-pin" id="pointButton"
        type="button" title="Draw point"></button>
      <button class="action-button esri-icon-polyline" id="polylineButton" type="button"
        title="Draw polyline"></button>
      <button class="action-button esri-icon-polygon" id="polygonButton" type="button"
        title="Draw polygon"></button>
      <button class="action-button esri-icon-comment" id="textButton"
        type="button" title="Add Text"></button>
      <button class="action-button esri-icon-trash" id="resetBtn" type="button"
        title="Clear graphics"></button>
    </div>
  </div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
Rocky_
by
Occasional Contributor
‎10-17-2018 11:14 AM

It works perfectly Blake. thanks for the reply. I am sharing one of widget here.. I am working on that but its in 3.10 js...

Can you check it once for me.. its a advanced tool for drawing geometries and labeling on  the map.

Can we implement this draw tool in 4.9 js...

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
  2. <html>  
  3.   
  4. <head>  
  5.   <title>Create a Map</title>  
  6.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  7.   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">  
  8.   <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/claro/claro.css">  
  9.   <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">  
  10.   <style>  
  11.      
  12.     html,  
  13.     body,  
  14.     #mapDiv {  
  15.       padding: 0;  
  16.       margin: 0;  
  17.       height: 100%;  
  18.     }  
  19.     button {  
  20.       display: block;  
  21.     }  
  22.   </style>  
  23.   
  24.   <script src="http://js.arcgis.com/3.10/"></script>  
  25.   <script>  
  26.     var map, tb;  
  27.   
  28.     require([  
  29.         "esri/map", "esri/toolbars/draw",  
  30.         "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol",  
  31.         "esri/symbols/PictureFillSymbol", "esri/symbols/CartographicLineSymbol",  
  32.         "esri/graphic", "esri/Color", "dojo/dom", "dojo/on", "dojo/parser",  
  33.         "dijit/form/Button", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/form/ComboBox",  
  34.         "dijit/layout/TabContainer", "dijit/form/NumberSpinner", "dijit/form/TextBox", "dijit/ColorPalette",  
  35.         "dojo/domReady!"  
  36.       ], function (  
  37.       Map, Draw,  
  38.       SimpleMarkerSymbol, SimpleLineSymbol,  
  39.       PictureFillSymbol, CartographicLineSymbol,  
  40.       Graphic,  
  41.       Color, dom, on, parser  
  42.     ) {  
  43.       parser.parse();  
  44.       map = new Map("mapDiv", {  
  45.         basemap: "streets",  
  46.         center: [-25.312, 34.307],  
  47.         zoom: 3  
  48.       });  
  49.       map.on("load", initToolbar);  
  50.       map.on("resize", resizeMap);  
  51.   
  52.       function initToolbar() {  
  53.         tb = new Draw(map);  
  54.         tb.on("draw-end", addToMap);  
  55.          
  56.         // event delegation so a click handler is not  
  57.           // needed for each individual button  
  58.           on(dom.byId("info"), "click", function(evt) {  
  59.             if ( evt.target.id === "info" ) {  
  60.               return;  
  61.             }  
  62.             var tool = evt.target.id.toLowerCase();  
  63.             if(tool == "clear"){  
  64.               map.graphics.clear();  
  65.               map.enableMapNavigation();  
  66.             }else{  
  67.               map.disableMapNavigation();  
  68.               tb.activate(tool);  
  69.             }  
  70.           });  
  71.       }  
  72.   
  73.       function addToMap(evt) {  
  74.         //deactivate the toolbar and clear existing graphics  
  75.         tb.deactivate();  
  76.         map.enableMapNavigation();  
  77.         switch (evt.geometry.type) {  
  78.         case "point":  
  79.           var font = new esri.symbol.Font();  
  80.           font.setSize(parseInt(dojo.byId("tsSize").value));  
  81.           font.setWeight(esri.symbol.Font[dojo.byId("tsWeight").value]);  
  82.   
  83.           var symbol = new esri.symbol.TextSymbol();  
  84.           symbol.setText(dojo.byId("tsText").value);  
  85.           symbol.setColor(new dojo.Color(dijit.byId("tsColor").value));  
  86.           symbol.setFont(font);  
  87.           symbol.setAngle(parseInt(dojo.byId("tsAngle").value));  
  88.           break;  
  89.         case "polyline":  
  90.           var symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 1);  
  91.           break;  
  92.         case "polygon":  
  93.           var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_NONE, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.25]));  
  94.           break;  
  95.         case "extent":  
  96.           var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_NONE, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.25]));  
  97.           break;  
  98.         case "multipoint":  
  99.           var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND, 20, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0, 0, 0]), 1), new dojo.Color([255, 255, 0, 0.5]));  
  100.           break;  
  101.         }  
  102.   
  103.         map.graphics.add(new Graphic(evt.geometry, symbol));  
  104.       }  
  105.   
  106.       //Handle resize of browser  
  107.       function resizeMap() {  
  108.         clearTimeout(resizeTimer);  
  109.         resizeTimer = setTimeout(function () {  
  110.           map.resize();  
  111.           map.reposition();  
  112.         }, 800);  
  113.       }  
  114.     });  
  115.   </script>  
  116. </head>  
  117.   
  118. <body class="claro">  
  119.   
  120.   <div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="sidebar" gutters="false" style="width:100%; height:100%;">  
  121.     <div id="mapDiv" dojotype="dijit.layout.ContentPane" region="center" style="margin:5px;">  
  122.     </div>  
  123.   
  124.     <div dojoType="dijit.layout.TabContainer" region="right" style="width:25%;margin:5px;">  
  125.       <div dojoType="dijit.layout.ContentPane" selected="true" title="Symbol Properties">  
  126.         <div id="info">  
  127.           <div>Select a shape then draw on map to add graphic</div>  
  128.           <button id="Point">Text</button>  
  129.           <button id="Multipoint">Multipoint</button>  
  130.           <button id="Line">Line</button>  
  131.           <button id="Polyline">Polyline</button>  
  132.           <button id="FreehandPolyline">Freehand Polyline</button>  
  133.           <button id="Triangle">Triangle</button>  
  134.           <button id="Extent">Rectangle</button>  
  135.           <button id="Circle">Circle</button>  
  136.           <button id="Ellipse">Ellipse</button>  
  137.           <button id="Polygon">Polygon</button>  
  138.           <button id="FreehandPolygon">Freehand Polygon</button>  
  139.           <button id="Clear">Clear Graphics</button>  
  140.         </div>  
  141.         <br/>  
  142.         Enter Text:  
  143.         <input dojotype="dijit.form.TextBox" value="Text" id="tsText" />  
  144.         <br />  
  145.         <br />Color :  
  146.         <br />  
  147.         <div dojoType="dijit.ColorPalette" id="tsColor"></div>  
  148.         <br />  
  149.         <br />  
  150.         <br />Angle :  
  151.         <br />  
  152.         <input dojoType="dijit.form.NumberSpinner" value="0" constraints="{min:-360,max:360}" id="tsAngle" />  
  153.         <br>Weight :  
  154.         <br />  
  155.         <select id="tsWeight" dojoType="dijit.form.ComboBox" autocomplete="false" value="WEIGHT_NORMAL">  
  156.           <option selected="selected">WEIGHT_NORMAL</option>  
  157.           <option>WEIGHT_BOLD</option>  
  158.           <option>WEIGHT_BOLDER</option>  
  159.           <option>WEIGHT_LIGHTER</option>  
  160.         </select>  
  161.         <br />Size :  
  162.         <br />  
  163.         <select id="tsSize" dojoType="dijit.form.ComboBox" autocomplete="false" value="14pt">  
  164.           <option>10pt</option>  
  165.           <option>12pt</option>  
  166.           <option selected="selected">14pt</option>  
  167.           <option>16pt</option>  
  168.           <option>18pt</option>  
  169.           <option>20pt</option>  
  170.           <option>22pt</option>  
  171.           <option>24pt</option>  
  172.           <option>26pt</option>  
  173.           <option>28pt</option>  
  174.           <option>30pt</option>  
  175.         </select>  
  176.       </div>  
  177.     </div>  
  178. </body>  
  179. </html>
0 Kudos
BlakeTerhune
by MVP Regular Contributor
MVP Regular Contributor
‎10-17-2018 12:55 PM

Sorry, I'm not very familiar with the 3.x API and I can't get your code to run (even with the missing closing </div> tag for mainWindow). The Esri Sketch temporary geometries sample is the best example of making a sketch widget in 4.x.

Rocky_
by
Occasional Contributor
‎10-17-2018 01:00 PM

No worries... i have already implemented function with referring your code. I really appreciate that.

Actually this one is advanced Draw tool so thinking we can use it in 4.x API...

Thanks 

Working Perfectly