Using my own locator service in Search

2926
6
Jump to solution
10-02-2015 11:00 AM
by Anonymous User
Not applicable

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

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

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>

View solution in original post

0 Kudos
6 Replies
SteveCole
Frequent Contributor

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
MVP Emeritus

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>
0 Kudos
by Anonymous User
Not applicable

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?

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Yes

0 Kudos
by Anonymous User
Not applicable

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

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

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

        });

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Russell,

   For the Search dijit the event is "search-results"

Search | API Reference | ArcGIS API for JavaScript | search-results