MGRS Geocoder Issue

StevenGraf1 · ‎09-12-2014

I'm trying to use the custom geocoder widget to zoom to a USNG coordinate and not having much luck. It keeps throwing an init.js error.

I am using the custom geocoder widget that I modified slightly. I thought maybe I need to project the map to the same spatial reference as the geocoder so i added that in.

Here is a fiddle: Edit fiddle - JSFiddle

Thanks!

TimWitt2 · ‎09-12-2014

Steven,

try this:

<!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">
  <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/claro/claro.css">
    <title>Geocoder Widget</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
    <style>
      html, body, #map {
        height:100%;
        width:100%;
        margin:0;
        padding:0;
      }
      body {
        background-color:#FFF;
        overflow:hidden;
        font-family:"Trebuchet MS";
      }
      #searchbox {
        display: block;
        position: absolute;
        z-index: 2;
        top: 20px;
        left: 75px;
      }
    </style>


    <script src="http://js.arcgis.com/3.9/"></script>
    <script>
      var map;
      var geocoder;
   
      require([
        "esri/map", "esri/dijit/Geocoder", "esri/SpatialReference", "dijit/form/TextBox", "dojo/parser",
  "esri/tasks/locator", "dojo/on", "dojo/dom", "dijit/registry", "dijit/form/Button" ,"dojo/domReady!"
      ], function(
        Map, Geocoder, SpatialReference, TextBox, parser, Locator, on, dom, registry
      ) {
  parser.parse();

  var locatorUrl = "http://serverapps101.esri.com/arcgis/rest/services/MGRS/GeocodeServer";
  var Gridlocator = new Locator(locatorUrl);
  var locator = new Locator("http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer");

    var spatialReference = new SpatialReference({wkid:4326});

        map = new Map("map",{
          basemap: "topo",
          center: [-117.19,34.05], // lon, lat
          zoom: 13,
  spatialReference: spatialReference
        });
  var GridTextBox = new TextBox({
  placeHolder: "18SUJ23480647",
  value:"18SUJ23480647"
  },"GridTextBoxDiv");   

  on(registry.byId("grid"), "click", setgrid);

  function setgrid (){
  var GridPoint = registry.byId("GridTextBoxDiv").get("value");
  var gridnmb = {MGRS:GridPoint};
  Gridlocator.addressToLocations(gridnmb);
  map.graphics.clear();
  }
  Gridlocator.on("address-to-locations-complete", locateMeGridAddress);

  function locateMeGridAddress(evt){   
  var FoundPointAr = evt.addresses;
  var FoundPoint = FoundPointAr[0];
  var LocPoint = FoundPoint.location;
  map.centerAndZoom(LocPoint);
  map.graphics.clear();
  }


      });
    </script>
  </head>
  <body class="claro">
    <div id="map">
  <div id="searchbox"><input id="GridTextBoxDiv"/><button id="grid" data-dojo-type="dijit.form.Button" type="button" data-dojo-attach-point="button">Get Location</button> </div>
  </div>
  </body>
</html>

Tim

View solution in original post

TimWitt2 · ‎09-12-2014

Maybe this can help?

Javascript API - Location Widget

StevenGraf1 · ‎09-12-2014

That's where I started at first and was able to pull out the zoom to usng part of it, but it was still throwing me an error although working at the same time. I don't remember if I saved the error as it was a few weeks ago.

I decided to see if I could get the customer geocoder widget to work with the MGRS geocoder because that's the only aspect of your fiddle that I need.

Thanks!

TimWitt2 · ‎09-12-2014

Ah I see. Let me see if I can fix it.

TimWitt2 · ‎09-12-2014

Steven,

do you need to do it through the geocoder or can you do it through a textbox like i have it?

Tim

StevenGraf1 · ‎09-12-2014

Either way would be fine.

Thanks for your help!

TimWitt2 · ‎09-12-2014

Steven,

try this:

<!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">
  <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/claro/claro.css">
    <title>Geocoder Widget</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
    <style>
      html, body, #map {
        height:100%;
        width:100%;
        margin:0;
        padding:0;
      }
      body {
        background-color:#FFF;
        overflow:hidden;
        font-family:"Trebuchet MS";
      }
      #searchbox {
        display: block;
        position: absolute;
        z-index: 2;
        top: 20px;
        left: 75px;
      }
    </style>


    <script src="http://js.arcgis.com/3.9/"></script>
    <script>
      var map;
      var geocoder;
   
      require([
        "esri/map", "esri/dijit/Geocoder", "esri/SpatialReference", "dijit/form/TextBox", "dojo/parser",
  "esri/tasks/locator", "dojo/on", "dojo/dom", "dijit/registry", "dijit/form/Button" ,"dojo/domReady!"
      ], function(
        Map, Geocoder, SpatialReference, TextBox, parser, Locator, on, dom, registry
      ) {
  parser.parse();

  var locatorUrl = "http://serverapps101.esri.com/arcgis/rest/services/MGRS/GeocodeServer";
  var Gridlocator = new Locator(locatorUrl);
  var locator = new Locator("http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer");

    var spatialReference = new SpatialReference({wkid:4326});

        map = new Map("map",{
          basemap: "topo",
          center: [-117.19,34.05], // lon, lat
          zoom: 13,
  spatialReference: spatialReference
        });
  var GridTextBox = new TextBox({
  placeHolder: "18SUJ23480647",
  value:"18SUJ23480647"
  },"GridTextBoxDiv");   

  on(registry.byId("grid"), "click", setgrid);

  function setgrid (){
  var GridPoint = registry.byId("GridTextBoxDiv").get("value");
  var gridnmb = {MGRS:GridPoint};
  Gridlocator.addressToLocations(gridnmb);
  map.graphics.clear();
  }
  Gridlocator.on("address-to-locations-complete", locateMeGridAddress);

  function locateMeGridAddress(evt){   
  var FoundPointAr = evt.addresses;
  var FoundPoint = FoundPointAr[0];
  var LocPoint = FoundPoint.location;
  map.centerAndZoom(LocPoint);
  map.graphics.clear();
  }


      });
    </script>
  </head>
  <body class="claro">
    <div id="map">
  <div id="searchbox"><input id="GridTextBoxDiv"/><button id="grid" data-dojo-type="dijit.form.Button" type="button" data-dojo-attach-point="button">Get Location</button> </div>
  </div>
  </body>
</html>

Tim

StevenGraf1 · ‎09-12-2014

Thanks so much!

So basically you are just passing a string through a text box on to the locator?

Any reason you can think of that the geocoder wouldn't work?

TimWitt2 · ‎09-12-2014

Yes thats right.

I have no idea why the geocoder would not be working, When I use the debugger it does not return anything after I run the geocoder.