Question about Localization - ArcGIS API for JavaScript 4.11

Egge-Jan_Pollé · ‎05-02-2019

Hi all,

I love this Localization in the JavaScript API, with the API automatically using the locale of the browser. So, in my case everything is showing in Dutch. Cool.

Now I have a little issue: I like my widgets to be collapsed, so I have put my Search widget within an Expand widget - see screen captures and code below.

The question is about localization when using the Expand widget: the expandTooltip defaults to "Expand" for English locale, whereas I want it to read "Search" or "Find address or place". I can modify the expandTooltip, but then I will loose the advantages of localization.

So, is there a way to replace the hard coded "Find address or place" with a string that will be localized?

expandTooltip: "Find address or place",‍‍ // loss of localization :-(‍

Thanks in advance for your help,

Egge-Jan

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Map of the Netherlands</title>
	<link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/themes/light/main.css">
	<script src="https://js.arcgis.com/4.11/"></script>
    <style>
      html, body, #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
	<script>
	  require([
		  "esri/Map", "esri/views/MapView", "esri/geometry/Point", "esri/widgets/Home", "esri/widgets/Search", "esri/widgets/Expand"
		], function(Map, MapView, Point, Home, Search, Expand) {

		var map = new Map({basemap: {portalItem: {id: "7aea6fa913a94176a1074edb40690318"}}}); <!-- Topo RD hosted by Esri Nederland -->

		var rdOrigin = new Point({x: 155000, y: 463000, spatialReference: 28992});

		var view = new MapView({spatialReference: 28992, map: map, container: "viewDiv", center: rdOrigin, zoom: 3});
		
		 var homeBtn = new Home({view: view});

        view.ui.add(homeBtn, "top-left");
		
        var searchWidget = new Search({container: document.createElement("div"), view: view});

		searchWidgetExpand = new Expand({
		  expandIconClass: "esri-icon-search",  // see https://developers.arcgis.com/javascript/latest/guide/esri-icon-font/
		  expandTooltip: "Find address or place", // optional, defaults to "Expand" for English locale
		  view: view,
		  content: searchWidget.domNode,
		  group: "top-right"
		});

		view.ui.add([searchWidgetExpand], "top-right");
      });
	</script>
  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

KellyHutchins · ‎05-06-2019

Custom text that you add won't be localized but you could replace the 'Expand' text with text from the search widget that is localized. For example the text for allPlaceholder is "Find address or place". Here's an example showing that:

https://codepen.io/kellyhutchins/pen/EzamEy

View solution in original post

KellyHutchins · ‎05-06-2019

Custom text that you add won't be localized but you could replace the 'Expand' text with text from the search widget that is localized. For example the text for allPlaceholder is "Find address or place". Here's an example showing that:

https://codepen.io/kellyhutchins/pen/EzamEy

Egge-Jan_Pollé · ‎05-07-2019

Hi Kelly Hutchins‌,

Thanks for your answer. This was exactly what I was looking for: a value that will be localized to replace hard coded text.

So, to get "Search" in stead of "Expand" I use:

expandTooltip: searchWidget.label, // "Search" in stead of the default "Expand" for English locale‍‍

and to get a localized placeholder in the expanded search box I use:

placeholder: searchWidget.allPlaceholder // "Find address or place" for English locale‍

Full code is below.

Cheers,

Egge-Jan

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Map of the Netherlands</title>
	<link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/themes/light/main.css">
	<script src="https://js.arcgis.com/4.11/"></script>
    <style>
      html, body, #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
	<script>
	  require([
		  "esri/Map", "esri/views/MapView", "esri/geometry/Point", "esri/widgets/Home", "esri/widgets/Search", "esri/tasks/Locator", "esri/widgets/Expand"
		], function(Map, MapView, Point, Home, Search, Locator, Expand) {

		var map = new Map({basemap: {portalItem: {id: "7aea6fa913a94176a1074edb40690318"}}}); <!-- Topo RD hosted by Esri Nederland -->

		var rdOrigin = new Point({x: 155000, y: 463000, spatialReference: 28992});

		var view = new MapView({spatialReference: 28992, map: map, container: "viewDiv", center: rdOrigin, zoom: 3});
		
		var homeBtn = new Home({view: view});

        view.ui.add(homeBtn, "top-left");
		
        var searchWidget = new Search({
		  container: document.createElement("div"),
          view: view,
		  includeDefaultSources: false
        });

		searchWidget.sources = [{
		    locator: new Locator({ url: "https://services.arcgisonline.nl/arcgis/rest/services/Geocoder_BAG_RD/GeocodeServer"}), // GeocodeServer for the Netherlands only (Esri Nederland)
			singleLineFieldName: "SingleLine", // This allows to search on the combination of Postal Code and House number, e.g. 4181 AE 38
			placeholder: searchWidget.allPlaceholder // "Find address or place" for English locale
	    }]
		
		searchWidgetExpand = new Expand({
		  expandIconClass: "esri-icon-search",  // see https://developers.arcgis.com/javascript/latest/guide/esri-icon-font/
		  expandTooltip: searchWidget.label, // "Search" in stead of the default "Expand" for English locale
		  view: view,
		  content: searchWidget.domNode,
		  group: "top-right"
		});

		view.ui.add([searchWidgetExpand], "top-right");
      });
	</script>
  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍