Custom Locator ArcGIS API Javascript

1390
1
08-09-2016 06:22 AM
GuillaumeGolay1
New Contributor

Hi everybody,

I've built a custom address locator and I want to create a web page using it. My goal is to have a page with the "search" space as with the search widget but i want the result of the request to be an array with all results (if needed) where it's possible to select which results to show on the map.

I've tried starting with:

Locator | API Reference | ArcGIS API for JavaScript 4.0

and this:

Search Widget 3D | ArcGIS API for JavaScript 4.0

So it works but I don't have an array and only the first result of "Match_addr" is shown...

If someone has already done this it would be very usefull or if somebody has an idea?

Thanks a lot

Guillaume Golay

One example of working code (this one is using 3.17 API update but same thing with 4.0):

<!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>Search widget using custom locator</title>

  <link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css">

  <style>

    html,

    body,

    #map {

      height: 100%;

      width: 100%;

      margin: 0;

      padding: 0;

    }

    body {

      background-color: #FFFFFF;

      overflow: hidden;

      font-family: "Trebuchet MS";

    }

    #search {

      display: block;

      position: absolute;

      z-index: 2;

      top: 20px;

      left: 75px;

    }

    .arcgisSearch .searchGroup .searchInput {

      width: 15.625rem;

    }

  </style>

  <script src="https://js.arcgis.com/3.17/"></script>

  <script>

    require([

      "esri/map",

      "esri/tasks/locator",

      "esri/dijit/Search",

      "esri/symbols/PictureMarkerSymbol",

      "esri/InfoTemplate",

      "dojo/domReady!"

    ], function (Map, Locator, Search, PictureMarkerSymbol, InfoTemplate){

      var map;

      var locatorUrl = "http://s011656v.adacv.ad.etat-de-vaud.ch:6080/arcgis/rest/services/TEST/LOC_VD_GEOPORTAIL/GeocodeSer...";

      map = new Map("map", {

        basemap: "topo",

        center: [6.6, 46.5], // lon, lat

        zoom: 10

      });

      var search = new Search(

        {

          sources: [

            {

              //Pass in the custom locator to the sources

              locator: new Locator(locatorUrl),

              singleLineFieldName: "SingleKey",

              outFields: ["*"],

              name: "VD_GEOPORTAIL",

              placeholder: "exemple: Place de la Riponne Lausanne 1005",

              highlightSymbol: new PictureMarkerSymbol("https://js.arcgis.com/3.17/esri/dijit/Search/images/search-pointer.png", 36, 36).setOffset(9, 18),

              //Create an InfoTemplate

              infoTemplate: new InfoTemplate("Match_addr", "${Match_addr}")

            }

          ],

          map: map,

          enableSearchingAll: false,

          autoComplete: true,

          value: "exemple: Place de la Riponne Lausanne 1005"

        }, "search");

      search.startup();

    });

  </script>

</head>

<body>

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

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

</body>

</html>

0 Kudos
1 Reply
HectorSanchez3
New Contributor

Hello ggolay123.

I know the post is old, but it's just what I'm looking for.

I'm sorry I can't help what you asked for a long time, but maybe you can help me.

I want to do something similar to what you say (a custom search). Could you put the code to see how you did it?

Thanks a lot.

Greetings, Hector.

0 Kudos