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; } } }

Using my own locator service in Search

Anonymous User

Holy cow, what happened to the Locator class? Is it being replaced with the one-size-fits-all Search class? Looks like all the samples on the JS Samples page using the Locator class are gone.

Is there an example for using my own locator (geocoder, whatever it's called now) service with the Search class?

Thanks in advance.

rGibson

Find more posts tagged with

Accepted answers

RobertScheitlin__GISP

Russell,

The Locator task is still there are still being used. It is the Geocoder dijit that is being replace by the Search dijit.

Here is a sample of using Search dijit with a standard locator:

<!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>ArcGIS API for JavaScript | Search widget with multiple sources</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,
    #map {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    #search {
       display: block;
       position: absolute;
       z-index: 2;
       top: 20px;
       left: 74px;
    }
  </style>

  <script src="http://js.arcgis.com/3.14/"></script>
  <script>
    require([
      "esri/map",
      "esri/dijit/Search",
      "esri/layers/FeatureLayer",
      "esri/InfoTemplate",
      "esri/SpatialReference",
      "esri/geometry/Extent",
      "dojo/i18n!esri/nls/jsapi",
      "esri/tasks/locator",
      "esri/symbols/PictureMarkerSymbol",
      "dojo/domReady!"
      ], function (
      Map,
      Search,
      FeatureLayer,
      InfoTemplate,
      SpatialReference,
      Extent,
      esriBundle,
      Locator,
      PictureMarkerSymbol
      ) {

      var map = new Map("map", {
        basemap: "gray",
        center: [-97, 38], // lon, lat
        zoom: 5
      });

      var s = new Search({
        enableButtonMode: true, //this enables the search widget to display as a single button
        enableLabel: false,
        enableInfoWindow: true,
        showInfoWindowOnSelect: false,
        enableSourcesMenu: false,
        map: map
      }, "search");

      var sources = s.get("sources");

      sources.push({
        locator: new Locator("//geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer"),
        singleLineFieldName: "SingleLine",
        outFields: ["Addr_type"],
        name: esriBundle.widgets.Search.main.esriLocatorName,
        localSearchOptions: {
          minScale: 300000,
          distance: 50000
        },
        placeholder: esriBundle.widgets.Search.main.placeholder,
        highlightSymbol: new PictureMarkerSymbol(this.basePath + "/images/search-pointer.png", 36, 36).setOffset(9, 18)
      });

      //Set the sources above to the search widget
      s.set("sources", sources);

      s.startup();

    });
  </script>
</head>

<body>
  <div id="search"></div>
  <div id="map"></div>
</body>

</html>

All comments

evtguy

I am using a "local" geocoder with the search widget. Here's my code:

    var s = new Search({
        map: app.map,
        sources: [{
            locator: new Locator(SERVERPATH + "/transportation/SPW_GDBA_Streets/GeocodeServer"),
            singleLineFieldName: "Single Line Input",
            name: "Snohomish County Geocoding Service",
            localSearchOptions: {
                minScale: 300000,
                distance: 50000},
            placeholder: "Search for Street / Address",
            maxResults: 3,
            maxSuggestions: 6,
            enableSuggestions: false,
            minCharacters: 0
        }]
    },"search");
    s.startup();

Basically, just swap the URL to your GeocodeServer service. I had to search Geonet to get to this point but I suppose it's ultimately not that complicated. The sources parameters accepts an array of locators to search against. If you only want to use your own, localized geocode service, only specify that one.

Steve

RobertScheitlin__GISP

Russell,

The Locator task is still there are still being used. It is the Geocoder dijit that is being replace by the Search dijit.

Here is a sample of using Search dijit with a standard locator:

<!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>ArcGIS API for JavaScript | Search widget with multiple sources</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,
    #map {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    #search {
       display: block;
       position: absolute;
       z-index: 2;
       top: 20px;
       left: 74px;
    }
  </style>

  <script src="http://js.arcgis.com/3.14/"></script>
  <script>
    require([
      "esri/map",
      "esri/dijit/Search",
      "esri/layers/FeatureLayer",
      "esri/InfoTemplate",
      "esri/SpatialReference",
      "esri/geometry/Extent",
      "dojo/i18n!esri/nls/jsapi",
      "esri/tasks/locator",
      "esri/symbols/PictureMarkerSymbol",
      "dojo/domReady!"
      ], function (
      Map,
      Search,
      FeatureLayer,
      InfoTemplate,
      SpatialReference,
      Extent,
      esriBundle,
      Locator,
      PictureMarkerSymbol
      ) {

      var map = new Map("map", {
        basemap: "gray",
        center: [-97, 38], // lon, lat
        zoom: 5
      });

      var s = new Search({
        enableButtonMode: true, //this enables the search widget to display as a single button
        enableLabel: false,
        enableInfoWindow: true,
        showInfoWindowOnSelect: false,
        enableSourcesMenu: false,
        map: map
      }, "search");

      var sources = s.get("sources");

      sources.push({
        locator: new Locator("//geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer"),
        singleLineFieldName: "SingleLine",
        outFields: ["Addr_type"],
        name: esriBundle.widgets.Search.main.esriLocatorName,
        localSearchOptions: {
          minScale: 300000,
          distance: 50000
        },
        placeholder: esriBundle.widgets.Search.main.placeholder,
        highlightSymbol: new PictureMarkerSymbol(this.basePath + "/images/search-pointer.png", 36, 36).setOffset(9, 18)
      });

      //Set the sources above to the search widget
      s.set("sources", sources);

      s.startup();

    });
  </script>
</head>

<body>
  <div id="search"></div>
  <div id="map"></div>
</body>

</html>

Anonymous User

Thanks so much to both Steve and Robert. Exactly what I was looking for. So it looks like you still need to use the Locator class to have access to what happens after a candidate is found (e.g. onAddressFound), correct?

RobertScheitlin__GISP

Yes

Anonymous User

Hmmm....looks like this would work with the Geocoder class:

geocoder.on("find-results", function(results) {

console.log("find results: ", results);

});

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

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