languages and transliterated results from locationToAddress geocoding

554
8
Jump to solution
04-03-2019 01:31 PM
DanielBonan
New Contributor II

Where/how do i specify i want the response with English (or at least translieterated) fields using locationToAddress ?

var locator = new Locator("https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer");
var infoTemplate = new InfoTemplate("Location", "Address: ${Address}");

....code

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

        ...code

 }
});

I found how to do so with the API call, but not in javascript like this, can someone please put me on the right tracks?

thanks

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

Daniel,

  OK. There is property or option in the API for that but there is a way to make it happen.

<!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>Query State Info without Map</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.28/esri/css/esri.css">
  <style>
    html, body, #mapDiv {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
  <script src="https://js.arcgis.com/3.28/"></script>
  <script>
    var map, tb;
    require([
      "esri/map",
      "esri/tasks/locator",
      "esri/InfoTemplate",
      "esri/geometry/Point",
      "esri/symbols/SimpleMarkerSymbol",
      "esri/symbols/SimpleLineSymbol",
      "esri/graphic",
      "esri/request",
      "esri/Color", "dojo/dom", "dojo/on",
      "dojo/domReady!"
    ], function(
      Map,
      Locator,
      InfoTemplate,
      Point,
      SimpleMarkerSymbol, SimpleLineSymbol,
      Graphic, esriRequest,
      Color, dom, on
    ) {
      esriRequest.setRequestPreCallback(myCallbackFunction);
      var lat = '22.297386';
      var lng = '114.173816';

      map = new Map("mapDiv", {
        basemap: "hybrid",
        center: [lng, lat],
        zoom: 17,
        slider: true,
        infoWindow: false
      });

      var locator = new Locator("https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer");
      var infoTemplate = new InfoTemplate("Location", "Address: ${Address}");

      var symbol = new SimpleMarkerSymbol(
        SimpleMarkerSymbol.STYLE_CIRCLE, 12,
        new SimpleLineSymbol(
          SimpleLineSymbol.STYLE_NULL,
          new Color([255, 0, 0, 2]), 1
        ),
        new Color([255, 0, 0, 2])
      );

      map.on('load', function() {
        var pt = new Point(lng, lat);
        locator.locationToAddress(pt, 100);
        var sms = new SimpleMarkerSymbol().setStyle(
          SimpleMarkerSymbol.STYLE_CIRCLE).setColor(
          new Color([255, 0, 0, 2]));
        var graphic = new Graphic(pt, sms);
        map.graphics.add(graphic);
      });

      locator.on("location-to-address-complete", function(evtl) {
        if (evtl.address.address) {
          console.log(evtl.address);
          address = evtl.address.address;
          // var whereToAddr = document.getElementById("addr");
          // whereToAddr.value = address.Address;
          // var whereToCity = document.getElementById("City");
          // whereToCity.value = address.City;
          // var whereToCounty = document.getElementById("County");
          // whereToCounty.value = address.Subregion;
          // var whereToState = document.getElementById("State");
          // whereToState.value = address.Region;
          // var whereToPostal = document.getElementById("Postal");
          // whereToPostal.value = address.Postal;
          // var whereToCountry = document.getElementById("Country");
          // whereToCountry.value = address.CountryCode;
          // var whereToMetro = document.getElementById("Metro");
          // whereToMetro.value = address.MetroArea;
          // var whereToNeighbrhd = document.getElementById("Neighbrhd");
          // whereToNeighbrhd.value = address.Neighborhood;
          // var whereToType = document.getElementById("Type");
          // whereToType.value = address.Type;
          // var whereToCorrect = document.getElementById("Correct");
          // whereToCorrect.value = address.LongLabel;
        }
      });

      function myCallbackFunction(ioArgs) {
        // inspect ioArgs
        console.log(ioArgs.url, ioArgs.content);

        if(ioArgs.url === 'https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/reverseGeocode'){
          // or, change some query parameters if necessary
          ioArgs.content = ioArgs.content || {};
          ioArgs.content.LangCode = "en";
        }

        // don't forget to return ioArgs.
        return ioArgs;
      }


    });
  </script>
</head>

<body>
  <div id="mapDiv" />
</body>

</html>

View solution in original post

0 Kudos
8 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Daniel,

  The API automatically returns the results in the locale that the machine is using. I am not aware of any way to specify this.

0 Kudos
DanielBonan
New Contributor II

The reverse geocode API seems to have a langCode parameter, so i assumed  locationToAddress would have one.

My machine is a US one, but still i get JApanese addresses in Japanese characters or Chinese ones in Chines characters

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Daniel,

  Can you provide a full code example of this?

0 Kudos
DanielBonan
New Contributor II

here is a full portion. Basically for a point that is at 22.297386, 114.173816 i display a circle on my map as well as some information about the address taken from evtl.address that i distribute into some html elements (last part)

These information come always in native language, while i'd need the English/Transliterated version instead

var map, tb;
require([
"esri/map",
"esri/dijit/BasemapGallery",
"esri/tasks/locator",
"esri/layers/FeatureLayer",
"esri/layers/VectorTileLayer",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/ImageParameters",
"esri/geometry/webMercatorUtils",
"esri/InfoTemplate",
"esri/dijit/Basemap",
"esri/dijit/BasemapLayer",
"esri/geometry/Point",
"esri/SpatialReference",
"esri/toolbars/draw",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/PictureFillSymbol",
"esri/symbols/CartographicLineSymbol",
"esri/graphic",
"esri/layers/GraphicsLayer",
"esri/graphicsUtils",
"esri/dijit/BasemapToggle",
"esri/dijit/Search",
"esri/Color", "dojo/dom", "dojo/on", "dojo/domReady!"
], function (
Map, BasemapGallery,
Locator, FeatureLayer,
VectorTileLayer,
ArcGISDynamicMapServiceLayer,
ImageParameters,
webMercatorUtils,
InfoTemplate,
Basemap,
BasemapLayer,
Point,
SpatialReference,
Draw,
SimpleMarkerSymbol, SimpleLineSymbol,
PictureFillSymbol, CartographicLineSymbol,
Graphic, GraphicsLayer, graphicsUtils,
BasemapToggle, Search,
Color, dom, on
) {

var lat = '22.297386';
var lng = '114.173816';

map = new Map("mapDiv", {
   basemap: "hybrid",
   center: [lng, lat],
   zoom: 17,
   slider: true,
   infoWindow: false
});

var locator = new Locator("https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer");
var infoTemplate = new InfoTemplate("Location", "Address: ${Address}");

var symbol = new SimpleMarkerSymbol(
      SimpleMarkerSymbol.STYLE_CIRCLE,12,
      new SimpleLineSymbol(
      SimpleLineSymbol.STYLE_NULL,
      new Color([255, 0, 0, 2]),1
   ),
new Color([255, 0, 0, 2])
);

map.on('load', function () {
   var pt = new Point(lng, lat);
   locator.locationToAddress(pt, 100);
   var sms = new SimpleMarkerSymbol().setStyle(
   SimpleMarkerSymbol.STYLE_CIRCLE).setColor(
   new Color([255, 0, 0, 2]));
   var graphic = new Graphic(pt, sms);
   map.graphics.add(graphic);
});

locator.on("location-to-address-complete", function(evtl) {
   if (evtl.address.address) { console.log(evtl.address);
      address = evtl.address.address;
      var whereToAddr = document.getElementById("addr"); whereToAddr.value = address.Address;
      var whereToCity = document.getElementById("City"); whereToCity.value = address.City;
      var whereToCounty = document.getElementById("County"); whereToCounty.value = address.Subregion;
      var whereToState = document.getElementById("State"); whereToState.value = address.Region;
      var whereToPostal = document.getElementById("Postal"); whereToPostal.value = address.Postal;
      var whereToCountry = document.getElementById("Country"); whereToCountry.value = address.CountryCode;
      var whereToMetro = document.getElementById("Metro"); whereToMetro.value = address.MetroArea;
      var whereToNeighbrhd = document.getElementById("Neighbrhd"); whereToNeighbrhd.value =       address.Neighborhood;
      var whereToType = document.getElementById("Type"); whereToType.value = address.Type;
      var whereToCorrect = document.getElementById("Correct"); whereToCorrect.value = address.LongLabel;

 }
});

});

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Daniel,

  OK. There is property or option in the API for that but there is a way to make it happen.

<!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>Query State Info without Map</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.28/esri/css/esri.css">
  <style>
    html, body, #mapDiv {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
  <script src="https://js.arcgis.com/3.28/"></script>
  <script>
    var map, tb;
    require([
      "esri/map",
      "esri/tasks/locator",
      "esri/InfoTemplate",
      "esri/geometry/Point",
      "esri/symbols/SimpleMarkerSymbol",
      "esri/symbols/SimpleLineSymbol",
      "esri/graphic",
      "esri/request",
      "esri/Color", "dojo/dom", "dojo/on",
      "dojo/domReady!"
    ], function(
      Map,
      Locator,
      InfoTemplate,
      Point,
      SimpleMarkerSymbol, SimpleLineSymbol,
      Graphic, esriRequest,
      Color, dom, on
    ) {
      esriRequest.setRequestPreCallback(myCallbackFunction);
      var lat = '22.297386';
      var lng = '114.173816';

      map = new Map("mapDiv", {
        basemap: "hybrid",
        center: [lng, lat],
        zoom: 17,
        slider: true,
        infoWindow: false
      });

      var locator = new Locator("https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer");
      var infoTemplate = new InfoTemplate("Location", "Address: ${Address}");

      var symbol = new SimpleMarkerSymbol(
        SimpleMarkerSymbol.STYLE_CIRCLE, 12,
        new SimpleLineSymbol(
          SimpleLineSymbol.STYLE_NULL,
          new Color([255, 0, 0, 2]), 1
        ),
        new Color([255, 0, 0, 2])
      );

      map.on('load', function() {
        var pt = new Point(lng, lat);
        locator.locationToAddress(pt, 100);
        var sms = new SimpleMarkerSymbol().setStyle(
          SimpleMarkerSymbol.STYLE_CIRCLE).setColor(
          new Color([255, 0, 0, 2]));
        var graphic = new Graphic(pt, sms);
        map.graphics.add(graphic);
      });

      locator.on("location-to-address-complete", function(evtl) {
        if (evtl.address.address) {
          console.log(evtl.address);
          address = evtl.address.address;
          // var whereToAddr = document.getElementById("addr");
          // whereToAddr.value = address.Address;
          // var whereToCity = document.getElementById("City");
          // whereToCity.value = address.City;
          // var whereToCounty = document.getElementById("County");
          // whereToCounty.value = address.Subregion;
          // var whereToState = document.getElementById("State");
          // whereToState.value = address.Region;
          // var whereToPostal = document.getElementById("Postal");
          // whereToPostal.value = address.Postal;
          // var whereToCountry = document.getElementById("Country");
          // whereToCountry.value = address.CountryCode;
          // var whereToMetro = document.getElementById("Metro");
          // whereToMetro.value = address.MetroArea;
          // var whereToNeighbrhd = document.getElementById("Neighbrhd");
          // whereToNeighbrhd.value = address.Neighborhood;
          // var whereToType = document.getElementById("Type");
          // whereToType.value = address.Type;
          // var whereToCorrect = document.getElementById("Correct");
          // whereToCorrect.value = address.LongLabel;
        }
      });

      function myCallbackFunction(ioArgs) {
        // inspect ioArgs
        console.log(ioArgs.url, ioArgs.content);

        if(ioArgs.url === 'https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/reverseGeocode'){
          // or, change some query parameters if necessary
          ioArgs.content = ioArgs.content || {};
          ioArgs.content.LangCode = "en";
        }

        // don't forget to return ioArgs.
        return ioArgs;
      }


    });
  </script>
</head>

<body>
  <div id="mapDiv" />
</body>

</html>
0 Kudos
DanielBonan
New Contributor II

Robert, thanks a lot for you prompt answer,

So, are you ignoring the response sent by locationToAddress and use the reverseGeocode API instead?

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Daniel,


  No if you look at the code provided I am just using the esriRequest class to look for requests sent to the reverse geocode url and if it is then append the LangCode property.

DanielBonan
New Contributor II

I see. Works like a charm. Thanks a lot for your help

0 Kudos