nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

MGRS Geocoder Issue

StevenGraf1

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!

Vind meer berichten getagd met

Accepted answers

TimWitt2

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

All comments

TimWitt2

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.

StevenGraf1

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

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

Either way would be fine.

Thanks for your help!

TimWitt2

Steven,

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

Tim

TimWitt2

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

StevenGraf1

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

Maybe this can help?

Javascript API - Location Widget

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.