Limit extent of the ESRI geocoder in the Search widget of WAB 1.2.

3585
4
Jump to solution
10-02-2015 07:16 AM
AmyKnight
New Contributor III

I would  like to limit the extent of the ESRI world geocoder to a state (FL) in the Search widget of WAB 1.2.   I think there was an answer to this at the end of another thread (https://community.esri.com/thread/116470) but I am wondering if someone can provide more detail about exactly where and what to add to accomplish this?

1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

Amy,

  The suffix just gets added to the end of the text that is typed in the search widget so you will get all kinds of suggestions when starting to type until you get a solid address like 102 gun club rd, West Palm Beach and then the suffix is added to it so that it's 102 gun club rd, West Palm Beach FL. The searchExtent route may be what you have to use.

{
  "sources": [
    {
      "url": "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer",
      "name": "Esri World Geocoder",
      "singleLineFieldName": "SingleLine",
      "placeholder": "Esri World Geocoder",
      "countryCode": "",
      "maxResults": 6,
      "type": "locator",
      "searchExtent": {
        "xmin":-10105000,"ymin":2855000,"xmax":-8226000,"ymax":3649000,
        "spatialReference":{"wkid":102100}
      }
    }
  ]
}

A new require is needed (line 21 & 26):

define([
    'dojo/_base/declare',
    'dojo/_base/lang',
    'dojo/_base/array',
    'dojo/_base/html',
    'dojo/when',
    'dojo/on',
    'dojo/query',
    'dojo/keys',
    'jimu/BaseWidget',
    'jimu/LayerInfos/LayerInfos',
    'jimu/utils',
    'esri/dijit/Search',
    'esri/tasks/locator',
    'esri/layers/FeatureLayer',
    'esri/symbols/jsonUtils',
    'esri/InfoTemplate',
    'esri/lang',
    './utils',
    'dojo/i18n!esri/nls/jsapi',
    'esri/geometry/Extent',
    'dojo/NodeList-dom'
  ],
  function(declare, lang, array, html, when, on, query, keys,
    BaseWidget, LayerInfos, jimuUtils, Search, Locator,
    FeatureLayer, jsonUtils, InfoTemplate, esriLang, utils, esriBundle, Extent) {

Then the updated _convertConfig (line 12 & 13)

     _convertConfig: function(config) {
        var searchSouces = array.map(config.sources, lang.hitch(this, function(source) {
          if (source && source.url && source.type === 'locator') {
            return {
              locator: new Locator(source.url || ""),
              outFields: ["*"],
              singleLineFieldName: source.singleLineFieldName || "",
              name: source.name || "",
              placeholder: source.placeholder || "",
              countryCode: source.countryCode || "",
              maxResults: source.maxResults || 6,
              suffix: source.suffix || "",
              searchExtent: source.searchExtent ? new Extent(source.searchExtent) : null
            };
          } else if (source && source.url && source.type === 'query') {
            var flayer = new FeatureLayer(source.url || null, {
              outFields: ["*"]
            });
            var template = this._getInfoTemplate(flayer, source, source.displayField);
            return {
              featureLayer: flayer,
              outFields: ["*"],
              searchFields: source.searchFields.length > 0 ? source.searchFields : ["*"],
              displayField: source.displayField || "",
              exactMatch: !!source.exactMatch,
              name: source.name || "",
              placeholder: source.placeholder || "",
              maxResults: source.maxResults || 6,
              infoTemplate: template/*,
              highlightSymbol: jsonUtils.fromJson(source.highlightSymbol)*/
            };
          } else {
            return {};
          }
        }));

        return searchSouces;
      },

View solution in original post

4 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Amy,

  You would go into your config_Search.json under your apps configs folder and add suffix to the source (line 9) and US to the countryCode:

IMPORTANT: you need a space in front of FL like " FL". If you want to have it limited to a certain city the use " West Palm Beach, FL"

{
  "sources": [
    {
      "url": "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer",
      "name": "Esri World Geocoder",
      "singleLineFieldName": "SingleLine",
      "placeholder": "Esri World Geocoder",
      "countryCode": "US",
      "suffix": " FL",
      "maxResults": 6,
      "type": "locator"
    }
  ]
}

Next in the Search widgets folder open Widget.js and Make this edit (line 12) and be sure to add the comma to line 11:

     _convertConfig: function(config) {
        var searchSouces = array.map(config.sources, lang.hitch(this, function(source) {
          if (source && source.url && source.type === 'locator') {
            return {
              locator: new Locator(source.url || ""),
              outFields: ["*"],
              singleLineFieldName: source.singleLineFieldName || "",
              name: source.name || "",
              placeholder: source.placeholder || "",
              countryCode: source.countryCode || "",
              maxResults: source.maxResults || 6,
              suffix: source.suffix || ""
            };
          } else if (source && source.url && source.type === 'query') {
            var flayer = new FeatureLayer(source.url || null, {
              outFields: ["*"]
            });
            var template = this._getInfoTemplate(flayer, source, source.displayField);
            return {
              featureLayer: flayer,
              outFields: ["*"],
              searchFields: source.searchFields.length > 0 ? source.searchFields : ["*"],
              displayField: source.displayField || "",
              exactMatch: !!source.exactMatch,
              name: source.name || "",
              placeholder: source.placeholder || "",
              maxResults: source.maxResults || 6,
              infoTemplate: template
            };
          } else {
            return {};
          }
        }));

        return searchSouces;
      },
AmyKnight
New Contributor III

Robert- Thanks so much for the quick reply.  This is the detail I needed. I made the changes within my app files but for some reason it is not working.  The results are limited to the U.S. but not to Florida. I’ve pasted my changes below (yellow)… I believe they match yours. I tried also using the searchExtent in a similar way but no luck there either.  One thing to note is that this app was originally a WAB 1.1 and imported to 1.2.  That seems to cause it to name or still refer to the “config.Geocoder.json” instead “config.Search.json”.  I tested this with a native 1.2 app which did create the config.Search.json.  I also tried the suffix additions in the test app but still did not work.  If you see anything obviously wrong here I would appreciate it but otherwise I will continue to troubleshoot.  Thanks again for the help!

In Configs\Search\config.Geocoder.json

{

"url": "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer",

"name": "Esri World Geocoder",

"singleLineFieldName": "SingleLine",

"placeholder": "Place or Address",

"countryCode": "US",

      "suffix": " FL",

"maxResults": 6,

"type": "locator"

}

In widgets\Search\Widget.js

_convertConfig: function(config) {

var searchSouces = array.map(config.sources, lang.hitch(this, function(source) {

if (source && source.url && source.type === 'locator') {

return {

locator: new Locator(source.url || ""),

outFields: ["*"],

singleLineFieldName: source.singleLineFieldName || "",

name: source.name || "",

placeholder: source.placeholder || "",

countryCode: source.countryCode || "",

maxResults: source.maxResults || 6,

suffix: source.suffix || ""

};

} else if (source && source.url && source.type === 'query') {

var flayer = new FeatureLayer(source.url || null, {

outFields: ["*"]

});

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Amy,

  The suffix just gets added to the end of the text that is typed in the search widget so you will get all kinds of suggestions when starting to type until you get a solid address like 102 gun club rd, West Palm Beach and then the suffix is added to it so that it's 102 gun club rd, West Palm Beach FL. The searchExtent route may be what you have to use.

{
  "sources": [
    {
      "url": "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer",
      "name": "Esri World Geocoder",
      "singleLineFieldName": "SingleLine",
      "placeholder": "Esri World Geocoder",
      "countryCode": "",
      "maxResults": 6,
      "type": "locator",
      "searchExtent": {
        "xmin":-10105000,"ymin":2855000,"xmax":-8226000,"ymax":3649000,
        "spatialReference":{"wkid":102100}
      }
    }
  ]
}

A new require is needed (line 21 & 26):

define([
    'dojo/_base/declare',
    'dojo/_base/lang',
    'dojo/_base/array',
    'dojo/_base/html',
    'dojo/when',
    'dojo/on',
    'dojo/query',
    'dojo/keys',
    'jimu/BaseWidget',
    'jimu/LayerInfos/LayerInfos',
    'jimu/utils',
    'esri/dijit/Search',
    'esri/tasks/locator',
    'esri/layers/FeatureLayer',
    'esri/symbols/jsonUtils',
    'esri/InfoTemplate',
    'esri/lang',
    './utils',
    'dojo/i18n!esri/nls/jsapi',
    'esri/geometry/Extent',
    'dojo/NodeList-dom'
  ],
  function(declare, lang, array, html, when, on, query, keys,
    BaseWidget, LayerInfos, jimuUtils, Search, Locator,
    FeatureLayer, jsonUtils, InfoTemplate, esriLang, utils, esriBundle, Extent) {

Then the updated _convertConfig (line 12 & 13)

     _convertConfig: function(config) {
        var searchSouces = array.map(config.sources, lang.hitch(this, function(source) {
          if (source && source.url && source.type === 'locator') {
            return {
              locator: new Locator(source.url || ""),
              outFields: ["*"],
              singleLineFieldName: source.singleLineFieldName || "",
              name: source.name || "",
              placeholder: source.placeholder || "",
              countryCode: source.countryCode || "",
              maxResults: source.maxResults || 6,
              suffix: source.suffix || "",
              searchExtent: source.searchExtent ? new Extent(source.searchExtent) : null
            };
          } else if (source && source.url && source.type === 'query') {
            var flayer = new FeatureLayer(source.url || null, {
              outFields: ["*"]
            });
            var template = this._getInfoTemplate(flayer, source, source.displayField);
            return {
              featureLayer: flayer,
              outFields: ["*"],
              searchFields: source.searchFields.length > 0 ? source.searchFields : ["*"],
              displayField: source.displayField || "",
              exactMatch: !!source.exactMatch,
              name: source.name || "",
              placeholder: source.placeholder || "",
              maxResults: source.maxResults || 6,
              infoTemplate: template/*,
              highlightSymbol: jsonUtils.fromJson(source.highlightSymbol)*/
            };
          } else {
            return {};
          }
        }));

        return searchSouces;
      },

View solution in original post

AmyKnight
New Contributor III

Thank you!  Super helpful info and this worked.  Have a great weekend-

0 Kudos