add text to map?

KevinMacLeod1 · ‎08-04-2014

I am making a tool that adds text to the map where a user clicks. First they fill in text in an input box, they can select size and color, then they click somewhere in the map and it adds the text as a graphic. I already have a nice Draw toolbar working for point/line/poly.

Kelly posted the perfect example in this thread. Allow user to place text on map‌ Example : Edit fiddle - JSFiddle‌

Yes, it uses API 1.5. Good old ESRI forums. But.. I switched out the APIs all the way up to 3.5 and it still works. However it gets messed up, mostly the HTML and CSS, with version 3.6 and up, of the API.

I was wondering if someone knew why this was? I just want to copy out the text functionality along with its color/size/angle selection, and put it into our site.

For some reason I can't find any good examples besides this one. Which is really perfect but just doesn't seem to work above 3.5 API. And we are using the version 3.10 of the API in the site. When I copied the right parts of it into our site it didn't work. No errors or anything, just nothing happened on button click triggering the code.

If anyone has a more recent example or way to update this one that would great! For some reason I am tinkering with textSymbol and not having luck yet. Perhaps because it is a complex project a lot going on (MVC 5/Bootstrap 3 with a lot of other widgets, jQuery, Angular and other stuff too). Thanks all for any advice, links or input. If I figure it out though I'll post back and maybe put it in a Fiddle.

RobertScheitlin__GISP · ‎08-04-2014

K M,

Here is the sample updated to AMD and JS 3.10

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
  <title>Create a Map</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
  <style>
   
    html,
    body,
    #mapDiv {
      padding: 0;
      margin: 0;
      height: 100%;
    }
    button {
      display: block;
    }
  </style>

  <script src="http://js.arcgis.com/3.10/"></script>
  <script>
    var map, tb;

    require([
        "esri/map", "esri/toolbars/draw",
        "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol",
        "esri/symbols/PictureFillSymbol", "esri/symbols/CartographicLineSymbol",
        "esri/graphic", "esri/Color", "dojo/dom", "dojo/on", "dojo/parser",
        "dijit/form/Button", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/form/ComboBox",
        "dijit/layout/TabContainer", "dijit/form/NumberSpinner", "dijit/form/TextBox", "dijit/ColorPalette",
        "dojo/domReady!"
      ], function (
      Map, Draw,
      SimpleMarkerSymbol, SimpleLineSymbol,
      PictureFillSymbol, CartographicLineSymbol,
      Graphic,
      Color, dom, on, parser
    ) {
      parser.parse();
      map = new Map("mapDiv", {
        basemap: "streets",
        center: [-25.312, 34.307],
        zoom: 3
      });
      map.on("load", initToolbar);
      map.on("resize", resizeMap);

      function initToolbar() {
        tb = new Draw(map);
        tb.on("draw-end", addToMap);
       
        // event delegation so a click handler is not
          // needed for each individual button
          on(dom.byId("info"), "click", function(evt) {
            if ( evt.target.id === "info" ) {
              return;
            }
            var tool = evt.target.id.toLowerCase();
            if(tool == "clear"){
              map.graphics.clear();
              map.enableMapNavigation();
            }else{
              map.disableMapNavigation();
              tb.activate(tool);
            }
          });
      }

      function addToMap(evt) {
        //deactivate the toolbar and clear existing graphics
        tb.deactivate();
        map.enableMapNavigation();
        switch (evt.geometry.type) {
        case "point":
          var font = new esri.symbol.Font();
          font.setSize(parseInt(dojo.byId("tsSize").value));
          font.setWeight(esri.symbol.Font[dojo.byId("tsWeight").value]);

          var symbol = new esri.symbol.TextSymbol();
          symbol.setText(dojo.byId("tsText").value);
          symbol.setColor(new dojo.Color(dijit.byId("tsColor").value));
          symbol.setFont(font);
          symbol.setAngle(parseInt(dojo.byId("tsAngle").value));
          break;
        case "polyline":
          var symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 1);
          break;
        case "polygon":
          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]));
          break;
        case "extent":
          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]));
          break;
        case "multipoint":
          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]));
          break;
        }

        map.graphics.add(new Graphic(evt.geometry, symbol));
      }

      //Handle resize of browser
      function resizeMap() {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function () {
          map.resize();
          map.reposition();
        }, 800);
      }
    });
  </script>
</head>

<body class="claro">

  <div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="sidebar" gutters="false" style="width:100%; height:100%;">
    <div id="mapDiv" dojotype="dijit.layout.ContentPane" region="center" style="margin:5px;">
    </div>

    <div dojoType="dijit.layout.TabContainer" region="right" style="width:25%;margin:5px;">
      <div dojoType="dijit.layout.ContentPane" selected="true" title="Symbol Properties">
        <div id="info">
          <div>Select a shape then draw on map to add graphic</div>
          <button id="Point">Text</button>
          <button id="Multipoint">Multipoint</button>
          <button id="Line">Line</button>
          <button id="Polyline">Polyline</button>
          <button id="FreehandPolyline">Freehand Polyline</button>
          <button id="Triangle">Triangle</button>
          <button id="Extent">Rectangle</button>
          <button id="Circle">Circle</button>
          <button id="Ellipse">Ellipse</button>
          <button id="Polygon">Polygon</button>
          <button id="FreehandPolygon">Freehand Polygon</button>
          <button id="Clear">Clear Graphics</button>
        </div>
        <br/>
        Enter Text:
        <input dojotype="dijit.form.TextBox" value="Text" id="tsText" />
        <br />
        <br />Color :
        <br />
        <div dojoType="dijit.ColorPalette" id="tsColor"></div>
        <br />
        <br />
        <br />Angle :
        <br />
        <input dojoType="dijit.form.NumberSpinner" value="0" constraints="{min:-360,max:360}" id="tsAngle" />
        <br>Weight :
        <br />
        <select id="tsWeight" dojoType="dijit.form.ComboBox" autocomplete="false" value="WEIGHT_NORMAL">
          <option selected="selected">WEIGHT_NORMAL</option>
          <option>WEIGHT_BOLD</option>
          <option>WEIGHT_BOLDER</option>
          <option>WEIGHT_LIGHTER</option>
        </select>
        <br />Size :
        <br />
        <select id="tsSize" dojoType="dijit.form.ComboBox" autocomplete="false" value="14pt">
          <option>10pt</option>
          <option>12pt</option>
          <option selected="selected">14pt</option>
          <option>16pt</option>
          <option>18pt</option>
          <option>20pt</option>
          <option>22pt</option>
          <option>24pt</option>
          <option>26pt</option>
          <option>28pt</option>
          <option>30pt</option>
        </select>
      </div>
    </div>
</body>
</html>

View solution in original post

RobertScheitlin__GISP · ‎08-04-2014

K M,

Here is the sample updated to AMD and JS 3.10

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
  <title>Create a Map</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
  <style>
   
    html,
    body,
    #mapDiv {
      padding: 0;
      margin: 0;
      height: 100%;
    }
    button {
      display: block;
    }
  </style>

  <script src="http://js.arcgis.com/3.10/"></script>
  <script>
    var map, tb;

    require([
        "esri/map", "esri/toolbars/draw",
        "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol",
        "esri/symbols/PictureFillSymbol", "esri/symbols/CartographicLineSymbol",
        "esri/graphic", "esri/Color", "dojo/dom", "dojo/on", "dojo/parser",
        "dijit/form/Button", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/form/ComboBox",
        "dijit/layout/TabContainer", "dijit/form/NumberSpinner", "dijit/form/TextBox", "dijit/ColorPalette",
        "dojo/domReady!"
      ], function (
      Map, Draw,
      SimpleMarkerSymbol, SimpleLineSymbol,
      PictureFillSymbol, CartographicLineSymbol,
      Graphic,
      Color, dom, on, parser
    ) {
      parser.parse();
      map = new Map("mapDiv", {
        basemap: "streets",
        center: [-25.312, 34.307],
        zoom: 3
      });
      map.on("load", initToolbar);
      map.on("resize", resizeMap);

      function initToolbar() {
        tb = new Draw(map);
        tb.on("draw-end", addToMap);
       
        // event delegation so a click handler is not
          // needed for each individual button
          on(dom.byId("info"), "click", function(evt) {
            if ( evt.target.id === "info" ) {
              return;
            }
            var tool = evt.target.id.toLowerCase();
            if(tool == "clear"){
              map.graphics.clear();
              map.enableMapNavigation();
            }else{
              map.disableMapNavigation();
              tb.activate(tool);
            }
          });
      }

      function addToMap(evt) {
        //deactivate the toolbar and clear existing graphics
        tb.deactivate();
        map.enableMapNavigation();
        switch (evt.geometry.type) {
        case "point":
          var font = new esri.symbol.Font();
          font.setSize(parseInt(dojo.byId("tsSize").value));
          font.setWeight(esri.symbol.Font[dojo.byId("tsWeight").value]);

          var symbol = new esri.symbol.TextSymbol();
          symbol.setText(dojo.byId("tsText").value);
          symbol.setColor(new dojo.Color(dijit.byId("tsColor").value));
          symbol.setFont(font);
          symbol.setAngle(parseInt(dojo.byId("tsAngle").value));
          break;
        case "polyline":
          var symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 1);
          break;
        case "polygon":
          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]));
          break;
        case "extent":
          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]));
          break;
        case "multipoint":
          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]));
          break;
        }

        map.graphics.add(new Graphic(evt.geometry, symbol));
      }

      //Handle resize of browser
      function resizeMap() {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function () {
          map.resize();
          map.reposition();
        }, 800);
      }
    });
  </script>
</head>

<body class="claro">

  <div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="sidebar" gutters="false" style="width:100%; height:100%;">
    <div id="mapDiv" dojotype="dijit.layout.ContentPane" region="center" style="margin:5px;">
    </div>

    <div dojoType="dijit.layout.TabContainer" region="right" style="width:25%;margin:5px;">
      <div dojoType="dijit.layout.ContentPane" selected="true" title="Symbol Properties">
        <div id="info">
          <div>Select a shape then draw on map to add graphic</div>
          <button id="Point">Text</button>
          <button id="Multipoint">Multipoint</button>
          <button id="Line">Line</button>
          <button id="Polyline">Polyline</button>
          <button id="FreehandPolyline">Freehand Polyline</button>
          <button id="Triangle">Triangle</button>
          <button id="Extent">Rectangle</button>
          <button id="Circle">Circle</button>
          <button id="Ellipse">Ellipse</button>
          <button id="Polygon">Polygon</button>
          <button id="FreehandPolygon">Freehand Polygon</button>
          <button id="Clear">Clear Graphics</button>
        </div>
        <br/>
        Enter Text:
        <input dojotype="dijit.form.TextBox" value="Text" id="tsText" />
        <br />
        <br />Color :
        <br />
        <div dojoType="dijit.ColorPalette" id="tsColor"></div>
        <br />
        <br />
        <br />Angle :
        <br />
        <input dojoType="dijit.form.NumberSpinner" value="0" constraints="{min:-360,max:360}" id="tsAngle" />
        <br>Weight :
        <br />
        <select id="tsWeight" dojoType="dijit.form.ComboBox" autocomplete="false" value="WEIGHT_NORMAL">
          <option selected="selected">WEIGHT_NORMAL</option>
          <option>WEIGHT_BOLD</option>
          <option>WEIGHT_BOLDER</option>
          <option>WEIGHT_LIGHTER</option>
        </select>
        <br />Size :
        <br />
        <select id="tsSize" dojoType="dijit.form.ComboBox" autocomplete="false" value="14pt">
          <option>10pt</option>
          <option>12pt</option>
          <option selected="selected">14pt</option>
          <option>16pt</option>
          <option>18pt</option>
          <option>20pt</option>
          <option>22pt</option>
          <option>24pt</option>
          <option>26pt</option>
          <option>28pt</option>
          <option>30pt</option>
        </select>
      </div>
    </div>
</body>
</html>

KevinMacLeod1 · ‎08-20-2014

Robert,

Thank you. This worked perfectly. I'll post my finished Draw widget, it's almost done.

I'm just finishing up getting opacity working. (drawing, no pun intended, on advice from this thread and others JavaScript Color Palette in RGB rather than Hexidecimal?)

I have also added some code to make the polygons take the color selected from the color picker. Although before you select a color apparently Dojo has a bug in the dijit where it doesn't have a color. (it appears this thread is still relevant javascript - How to get value of Dojo/Dijit ColorPalette to a string - Stack Overflow) You have to select a color, then draw. I'll fix that by explicitly setting it when the draw toolbar instantiates, I think. Anyway, I'm almost done.... I'll post the code here when complete.

TimWitt2 · ‎08-20-2014

K M,

This is what I made if you want to check it out.

Javascript API - Advanced Draw widget‌

It includes a rightclick menu to edit graphics and text.

Tim

KevinMacLeod1 · ‎08-20-2014

Well then, thanks Tim! That's a nice tool. The right-click on it is sweet. I may use your tool's code base if that's all right and just add setting opacity on top of it.

Now, if you really want to take it to ninja level.. would you be interested in adding a "Show Measurements" checkbox? Clicking this would subsequently display dimensions on the user's graphics that they draw. For example a line would show a label of the total feet of a line the user draws. A polygon would display acres in the center of the polygon. A point would display x,y lat/long. Or if you prefer, I can take a shot at this, and post my code back for your integration to your widget. Because one way or the other we will be adding such an option to our site (which open source). I have only just started researching this but I think this sample will be useful - Points for labeling | ArcGIS API for JavaScript‌

I foresee this Draw tool becoming a popular widget Tim. Akin to AGS TOC and others. I recommend we all coordinate in this group... Web App Builder Custom Widgets Group‌

TimWitt2 · ‎08-20-2014

Sure you can use it as a base. I really like the idea of adding a checkbox for measurements, that's why I asked for ideas in my blog post I'll see how I can integrate this option.

I wish I had access to the Web App Builder Beta to see how it can be customized to add a widget, but I'll have to wait for the official release.

I also just joined the group and it is a good idea to coordinate there.

KevinMacLeod1 · ‎08-20-2014

Awesome!

To get Web Builder just sign up for the Beta. https://betacommunity.esri.com/ Shouldn't be too long before you are accepted. Once you are in, you go to the Web Builder page to download it. Hopefully ESRI creates or makes easier a 3rd party Widget system, like from FlexBuilder. So for GIS analysts or people just beginning to develop software (me) it is a 1-click install for a widget. You put it in the right spot, tell a config file to use it, and done. In Builder, you pick where you want to position it, and that's it. Perhaps they'll make new widgets open in a floating dialog by default, like jquery or Dojo, linked to from a toolbar button click, with the tools in Builder's "header". Anyhow we will be following your tool's dev and contribute if needed.

jaykapalczynski · ‎01-27-2017

Is there a way to modify the click event that drops the text in the map to where it adds the text to the right of the user click. Not in the middle... Where ever I click I want the text to be centered vertically and all text moving to the right