Reverse geocode not working,

lasinh · ‎10-10-2015

hi all, i use geocoding services, clickmap get address but my code is not working? but in the example given by esri that it working

Reverse geocode | ArcGIS API for JavaScript

mycode:

<!DOCTYPE html>

<html>

<head>

<!--The viewport meta tag is used to improve the presentation and behavior of the samples

on iOS devices-->

<title>Find Address</title>

<style>

html, body { height: 100%; width: 100%; margin: 0; padding: 0; }

#map {

padding: 0;

border: solid 2px #666;

margin: 0 5px 5px 5px;

}

#header {

border: solid 2px #666;

color: #666;

font-family: sans-serif;

font-size: 1.1em;

height: auto;

margin: 5px;

overflow: hidden;

padding: 10px 0 10px 20px;

text-align:left;

}

.roundedCorners {

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

}

</style>

var map;

require([

"esri/map", "esri/tasks/locator", "esri/graphic",

"esri/geometry/webMercatorUtils",

"esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol",

"esri/InfoTemplate", "esri/Color",

"dojo/number", "dojo/parser", "dojo/dom", "dijit/registry",

"dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"

], function (

Map, Locator, Graphic,

webMercatorUtils,

SimpleMarkerSymbol, SimpleLineSymbol,

InfoTemplate, Color,

number, parser, dom, registry

) {

parser.parse();

map = new Map("map", {

zoom: 0

});

var tiled = new esri.layers.ArcGISTiledMapServiceLayer("url");

map.addLayer(tiled);

var locator = new Locator("url");

locator.outSpatialReference = map.spatialReference;

// var infoTemplate = new InfoTemplate("Location", "Address: ${Address}");

var symbol = new SimpleMarkerSymbol(

SimpleMarkerSymbol.STYLE_CIRCLE,

15,

new SimpleLineSymbol(

SimpleLineSymbol.STYLE_SOLID,

new Color([0, 0, 255, 0.5]),

8

),

new Color([0, 0, 255])

);

locator.on("location-to-address-complete", function (evt) {

var abc = "123";

if (evt.address.address) {

var address = evt.address.address;

var location = webMercatorUtils.geographicToWebMercator(evt.address.location);

//this service returns geocoding results in geographic - convert to web mercator to display on map

// var location = webMercatorUtils.geographicToWebMercator(evt.location);

var graphic = new Graphic(location, symbol, address, infoTemplate);

map.graphics.add(graphic);

map.infoWindow.setTitle(graphic.getTitle());

map.infoWindow.setContent(graphic.getContent());

//display the info window with the address information

var screenPnt = map.toScreen(location);

map.infoWindow.resize(200, 100);

map.infoWindow.show(screenPnt, map.getInfoWindowAnchor(screenPnt));

}

});

map.on("click", function (evt) {

locator.outSpatialReference = map.spatialReference;

map.graphics.clear();

// try {

locator.locationToAddress(webMercatorUtils.webMercatorToGeographic(evt.mapPoint), 1000);

locator.outSpatialReference = map.spatialReference;

// }

// catch (ex) {

// var address1 = evt.address.address;

// alert(address1);

// }

});

</script>

</head>

<div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer"

data-dojo-props="design:'headline', gutters:false"

style="width:100%; height:100%;">

<div id="header" class="roundedCorners"

data-dojo-type="dijit/layout/ContentPane"

data-dojo-props="region:'top'">

<span>Click the map to get the address for the input location.</span>

</div>

<div id="map" class="roundedCorners"

data-dojo-type="dijit/layout/ContentPane"

data-dojo-props="region:'center'">

</div>

</body>

</html>

RobertScheitlin__GISP · ‎10-10-2015

Ia sinh,

The issue you were having is that your GeocodeService is in a different projection that WGS 84 that you where attempting to convert the click geometry to. I also remove the Legacy coding that you were using for ArcGISTiledMapServiceLayer and preformed some other code cleanup.

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!--The viewport meta tag is used to improve the presentation and behavior of the samples
      on iOS devices-->
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Find Address</title>
  <link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">

  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    #map {
      padding: 0;
      border: solid 2px #666;
      margin: 0 5px 5px 5px;
    }

    #header {
      border: solid 2px #666;
      color: #666;
      font-family: sans-serif;
      font-size: 1.1em;
      height: auto;
      margin: 5px;
      overflow: hidden;
      padding: 10px 0 10px 20px;
      text-align: left;
    }

    .roundedCorners {
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
    }
  </style>

  <script src="http://js.arcgis.com/3.14/"></script>

  <script>
    var map;
    require([
        "esri/map", "esri/tasks/locator", "esri/graphic",
        "esri/geometry/webMercatorUtils", "esri/layers/ArcGISTiledMapServiceLayer",
        "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol",
        "esri/InfoTemplate", "esri/Color",
        "dojo/number", "dojo/parser", "dojo/dom", "dijit/registry",
        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
      ], function (
      Map, Locator, Graphic,
      webMercatorUtils, ArcGISTiledMapServiceLayer,
      SimpleMarkerSymbol, SimpleLineSymbol,
      InfoTemplate, Color,
      number, parser, dom, registry
    ) {
      parser.parse();

      map = new Map("map", {
        zoom: 0
      });

      var tiled = new ArcGISTiledMapServiceLayer("http://115.79.20.1:6080/arcgis/rest/services/Atlas2015/NEN_KTXH_150715/MapServer");
      map.addLayer(tiled);
      var locator = new Locator("http://115.79.20.1:6080/arcgis/rest/services/Geocode/GEOCODING_SONHA_BH/GeocodeServer");
      locator.outSpatialReference = map.spatialReference;
      var symbol = new SimpleMarkerSymbol(
        SimpleMarkerSymbol.STYLE_CIRCLE,
        15,
        new SimpleLineSymbol(
          SimpleLineSymbol.STYLE_SOLID,
          new Color([0, 0, 255, 0.5]),
          8
        ),
        new Color([0, 0, 255])
      );

      locator.on("location-to-address-complete", function (evt) {
        if (evt.address.address) {
          var infoTemplate = new InfoTemplate("Location", "${*}");
          var address = evt.address.address;
          var graphic = new Graphic(evt.address.location, symbol, address, infoTemplate);
          map.graphics.add(graphic);
          map.infoWindow.setTitle(graphic.getTitle());
          map.infoWindow.setContent(graphic.getContent());

          //display the info window with the address information
          map.infoWindow.resize(200, 100);
          map.infoWindow.show(evt.address.location);
        }
      });

      map.on("click", function (evt) {
        map.graphics.clear();
        locator.locationToAddress(evt.mapPoint, 1000);
      });
    });
  </script>
</head>

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

    <div id="header" class="roundedCorners" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
      <span>Click the map to get the address for the input location.</span>
    </div>

    <div id="map" class="roundedCorners" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
    </div>
  </div>
</body>

</html>

lasinh · ‎10-10-2015

Thanks Robert, It is working,

But if i change the coordinate system my code obove is working or is not

And i used geododeService above in directions widgets, but My code did not work as I expected, when i clickMap to add a point to input parameter of directions widgets also adds at coordinates instead of address. How to adds Address to input directions widgets? thanKYou

My Code:

<!DOCTYPE html>

<html>

<head>

<title>Directions Widget</title>

<style>

html, body, #map {

height:100%;

width:100%;

margin:0;

padding:0;

}

body {

background-color:#FFF;

overflow:hidden;

font-family:"Trebuchet MS";

}

</style>

require([

"esri/map", "esri/tasks/locator", "esri/dijit/Directions", "esri/dijit/Search", "esri/layers/FeatureLayer",

"dojo/parser",

"dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"

], function (

Map, Locator, Directions, Search, FeatureLayer,

parser

) {

parser.parse();

//all requests to route.arcgis.com will proxy to the proxyUrl defined in this object.

map = new Map("map", {

zoom: 0

});

var tiled = new esri.layers.ArcGISTiledMapServiceLayer("http://115.79.20.1:6080/arcgis/rest/services/Atlas2015/NEN_KTXH_150715/MapServer");

map.addLayer(tiled);

var directions = new Directions({

map: map,

mapClickActive: true,

routeTaskUrl: "http://115.79.20.1:6080/arcgis/rest/services/NetworkRouter/network01102015/NAServer/Route",

geometryTaskUrl: "http://115.79.20.1:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer",

// travelModesServiceUrl: "http://utility.arcgis.com/usrsvcs/servers/cdc3efd03ddd4721b99adce219629489/rest/services/World/Utili...",

searchOptions: {

sources: [

{

locator: new Locator("http://115.79.20.1:6080/arcgis/rest/services/Geocode/GEOCODING_SONHA_BH/GeocodeServer"),

singleLineFieldName: "SingleLine",

name: "Custom Geocoding Service",

placeholder: "Search Geocoder",

maxResults: 3,

maxSuggestions: 20,

enableSuggestions: true,

minCharacters: 0

}

]

}

}, "dir");

directions.startup();

});

</script>

</head>

<div data-dojo-type="dijit/layout/BorderContainer"

data-dojo-props="design:'headline', gutters:false"

style="width:100%;height:100%;">

<div data-dojo-type="dijit/layout/ContentPane"

data-dojo-props="region:'right'"

style="width:250px;">

</div>

<div id="map"

data-dojo-type="dijit/layout/ContentPane"

data-dojo-props="region:'center'">

</div>

</body>

</html>