Custom Locator ArcGIS API Javascript

GuillaumeGolay1 — Tue, 09 Aug 2016 13:22:37 GMT

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>

<title>Search widget using custom locator</title>

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

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/GeocodeServer";

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>

</body>

</html>

Re: Custom Locator ArcGIS API Javascript

HectorSanchez3 — Wed, 13 Dec 2017 12:07:16 GMT

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.

topic Custom Locator ArcGIS API Javascript in ArcAPI Questions

Custom Locator ArcGIS API Javascript

Re: Custom Locator ArcGIS API Javascript