topic Re: Using a standard button to trigger a locator / script in ArcGIS JavaScript Maps SDK Questions

Using a standard button to trigger a locator / script

MatthewBaker2 — Wed, 09 Jul 2014 22:38:20 GMT

All,

I'm trying to figure out how to use a standard button component to trigger a locator rather than a DOJO component

I was given a hint to try

on(dom.byId("buttonID"), "click", locate);

...but I can't get that to work.

UPDATE: I've attached some code with the suggestion by jskinner-esristaff‌ from comments below - solution is working great. Thank you!!!

Thanks!

Re: Using a standard button to trigger a locator / script

JakeSkinner — Thu, 10 Jul 2014 12:17:27 GMT

Hi Matthew,

Your code is correct, you will just need to reference the "dojo/on" module. Ex:

require([
      "esri/map", "esri/tasks/locator", "esri/graphic",
      "esri/InfoTemplate", "esri/symbols/SimpleMarkerSymbol",
      "esri/symbols/Font", "esri/symbols/TextSymbol",
      "dojo/_base/array", "esri/Color",
      "dojo/number", "dojo/parser", "dojo/dom", "dijit/registry", "dojo/on",

      "dijit/form/Button", "dijit/form/Textarea",
      "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
    ],
function (
  Map, Locator, Graphic,
  InfoTemplate, SimpleMarkerSymbol,
  Font, TextSymbol,
  arrayUtils, Color,
  number, parser, dom, registry, on)

Re: Using a standard button to trigger a locator / script

MatthewBaker2 — Thu, 10 Jul 2014 15:23:29 GMT

Jake Skinner‌, I've added the code I'm working with - also adding what you've suggested, but still no luck.

Re: Using a standard button to trigger a locator / script

TimWitt2 — Thu, 10 Jul 2014 15:42:55 GMT

Matt,

there is an issue in your locate function. The following error pops-up:

Uncaught ReferenceError: grade is not defined

when I remove your

outfield: [grade]

it seems to work.

Re: Using a standard button to trigger a locator / script

MatthewBaker2 — Thu, 10 Jul 2014 15:46:51 GMT

I'm sorry, I got my samples mixed up and added that by mistake...

jskinner-esristaff‌ your solution worked great. Thank you!

and thanks timw1984dev‌ for pointing this out!

Re: Using a standard button to trigger a locator / script

JakeSkinner — Thu, 10 Jul 2014 15:47:20 GMT

Looks like there were a couple of errors.

1. In you 'outFields' parameter, the field needs to have quotes, i.e. "grades"

2. I would recommend using map.centerAndZoom to zoom to the results

One thing I'm not sure is how to call the zoomTo function from the table. You may want to start a new thread for this.

Here is the code I was able to get to work:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Geocode Details</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
        width: 100%;
        color: #353129;
      }

      #map {
        margin: 0;
        padding: 0;
      }
      #footerPane {
        border: none;
        height: 300px;
      }
    </style>

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

      require([
        "esri/map", "esri/tasks/locator", "esri/SpatialReference", "esri/graphic",
        "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/Font",
        "esri/symbols/TextSymbol", "esri/geometry/Point", "esri/geometry/Extent",
        "esri/geometry/webMercatorUtils", "dojo/_base/array", "esri/Color", "dojo/number",
        "dojo/parser", "dojo/dom", "dojo/json", "dijit/registry", "dojo/on",
        "dijit/form/Button", "dijit/form/Textarea", "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
        "dojo/domReady!"
      ],
      function(
        Map, Locator, SpatialReference, Graphic,
        SimpleLineSymbol, SimpleMarkerSymbol, Font,
        TextSymbol, Point, Extent,
        webMercatorUtils, arrayUtils, Color, number,
        parser, dom, JSON, registry, on
      ) {
       
        parser.parse();

        map = new Map("map", {
          basemap : "streets",
          center : [-93.5, 41.431],
          zoom : 5
        });

        locator = new Locator("http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer");

        on(dom.byId("noDojo"), "click", locate);

        //Draw and zoom to the result when the geocoding is complete
        locator.on("address-to-locations-complete", function(evt) {
          map.graphics.clear();
          arrayUtils.forEach(evt.addresses, function(geocodeResult, index) {
            //create a random color for the text and marker symbol
            var r = Math.floor(Math.random() * 250);
            var g = Math.floor(Math.random() * 100);
            var b = Math.floor(Math.random() * 100);

            var symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 10, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([r, g, b, 0.5]), 10), new Color([r, g, b, 0.9]));
            var pointMeters = webMercatorUtils.geographicToWebMercator(geocodeResult.location);
            var locationGraphic = new Graphic(pointMeters, symbol);

            var font = new Font().setSize("12pt").setWeight(Font.WEIGHT_BOLD);
            var textSymbol = new TextSymbol((index + 1) + ".) " + geocodeResult.address, font, new Color([r, g, b, 0.8])).setOffset(5, 15);
            //add the location graphic and text with the address to the map
            map.graphics.add(locationGraphic);
            map.graphics.add(new Graphic(pointMeters, textSymbol));
          });
         
          var ptAttr = evt.addresses[0].location;     
         
          map.centerAndZoom(ptAttr, 19);
         
          showResults(evt.addresses);

        });

        function showResults(results) {
          var rdiv = dom.byId("resultsdiv");
          rdiv.innerHTML = "<p><b>" + results.length + " Matching Results:</b></p>";

          var content = [];

          //start table
          content.push("<table border='0'><tr>");

          arrayUtils.forEach(results, function(result, index) {
            var x = result.location.x.toFixed(5);
            var y = result.location.y.toFixed(5);

            content.push("<tr><td>");
            content.push("<input type='button' id='zoomButton' value='Z' onclick='zoomTo(" + y + "," + x + ")'/>");
            content.push("</td><td>");
            content.push("<legend><b>" + (index + 1) + ". " + "<a target='window' href='http://test.com/" + result.attributes.LangCode + "'>" + result.address + "</a></b></legend>");
            content.push("</td></tr>");

          });

          content.push("</tr></table>");

          rdiv.innerHTML += content.join("");
        }

        //Perform the geocode. This function runs when the "Locate" button is pushed.
        function locate() {
          var address = {
            SingleLine : dom.byId("address").value
          };
          var options = {
            address : address,
            outFields : ["grade"]
          };
          //optionally return the out fields if you need to calculate the extent of the geocoded point
          locator.addressToLocations(options);
        }
       
        function zoomTo(lat, lon) {
          var point = new Point(lon, lat, {
            wkid : "4326"
          });
          /*var wmpoint = webMercatorUtils.geographicToWebMercator(point);
          map.centerAt(wmpoint);*/
       
        map.centerAndZoom(point, 19)
        }

        function showThing(thing) {
          alert(thing);
        }

        function clearDiv() {
          document.getElementById('resultsdiv').innerHTML = "";
        }

      });

     

    </script>
  </head>

  <body class="claro">
    <div data-dojo-type="dijit/layout/BorderContainer"
    data-dojo-props="gutters:false, design:'sidebar'"
    style="width:50%;height:100%;">

      <div>
        Address :
        <input type="text" id="address" size="60" value="380 New York St, Redlands, CA, 92373"/>
        <!-- <button id="locate" data-dojo-type="dijit/form/Button">
          Locate
        </button> -->

        <button id="noDojo">
          Locate me without Dojo!
        </button>

      </div>

      <div id="map"></div>

      <div id="footerPane">

        <div id="resultsdiv"></div>
        <button onclick="clearDiv()">
          Clear Div
        </button>
      </div>
    </div>
  </body>

</html>

Re: Using a standard button to trigger a locator / script

JohnGravois — Thu, 10 Jul 2014 16:09:00 GMT

hey matthew,

please consider marking Jake's reply as the 'answer' to this thread when you have a minute.

Re: Using a standard button to trigger a locator / script

MatthewBaker2 — Thu, 10 Jul 2014 16:11:20 GMT

... I was busy going through all my GeoNet notifications...!!!