my code:
<html dir="ltr">
<link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">
<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>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>
<script src="http://js.arcgis.com/3.14/"></script>
<script>
require([
"esri/map", "esri/tasks/locator", "esri/graphic", "esri/dijit/Search", "esri/layers/FeatureLayer", "esri/InfoTemplate",
"esri/geometry/webMercatorUtils", "esri/layers/ArcGISTiledMapServiceLayer",
"esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol",
"esri/InfoTemplate", "esri/Color",
"dojo/number", "dojo/parser", "dojo/dom", "dijit/registry",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
], function (
Map, Locator, Graphic,Search,FeatureLayer, InfoTemplate,
webMercatorUtils, ArcGISTiledMapServiceLayer,
SimpleMarkerSymbol, SimpleLineSymbol,
InfoTemplate, Color,
number, parser, dom, registry
) {
var map = new Map("map", {
zoom: 5
});
var tiled = new ArcGISTiledMapServiceLayer("http://localhost:6080/arcgis/rest/services/Atlas2015/NEN_KTXH_150715/MapServer");
map.addLayer(tiled);
var locator = new Locator("http://localhost/arcgis/rest/services/Geocode/GEOCODING_SONHA_BH/GeocodeServer");
var s = new Search({
enableButtonMode: true, //this enables the search widget to display as a single button
enableLabel: false,
enableInfoWindow: true,
showInfoWindowOnSelect: false,
map: map
}, "search");
var sources = s.get("sources");
sources.push({
locator: locator,
outFields: ["*"],
name: "Custom Geocoding Service",
placeholder: "Search Geocoder",
maxResults: 3,
maxSuggestions: 6,
enableSuggestions: true,
minCharacters: 3
});
sources.push({
featureLayer: new FeatureLayer("http://localhost/arcgis/rest/services/Atlas2015/NEN_KTXH_150715/MapServer/0"),
searchFields: ["*"],
displayField: "TEN",
exactMatch: true,
outFields: ["*"],
placeholder: "number house",
maxResults: 6,
maxSuggestions: 6,
//Create an InfoTemplate
infoTemplate: new InfoTemplate("tên: ${TEN}</br>địa chỉ: ${DIACHI}</br>"),
enableSuggestions: true,
minCharacters: 0
});
//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>
Solved! Go to Solution.
La sinh,
OK, I made some changes to your code and the search widget will find 520 Đường Đồng Khởi using your geocoder now:
<html dir="ltr"> <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>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/tasks/locator", "esri/graphic", "esri/dijit/Search", "esri/layers/FeatureLayer", "esri/geometry/webMercatorUtils", "esri/layers/ArcGISTiledMapServiceLayer", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/InfoTemplate", "esri/Color", "dojo/number", "dojo/parser", "dojo/dom", "dijit/registry", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!" ], function ( Map, Locator, Graphic, Search, FeatureLayer, webMercatorUtils, ArcGISTiledMapServiceLayer, SimpleMarkerSymbol, SimpleLineSymbol, InfoTemplate, Color, number, parser, dom, registry ) { var map = new Map("map", { zoom: 5 }); var tiled = new ArcGISTiledMapServiceLayer("http://115.79.20.1:6080/arcgis/rest/services/Atlas2015/NEN_KTXH_150715/MapServer"); map.addLayer(tiled); var locator = new Locator("http://115.79.20.1:6080/arcgis/rest/services/Geocode/GEOCODING_SONHA_BH/GeocodeServer"); var s = new Search({ enableButtonMode: true, //this enables the search widget to display as a single button enableLabel: false, enableInfoWindow: true, showInfoWindowOnSelect: false, map: map }, "search"); var sources = s.get("sources"); sources.push({ locator: locator, outFields: ["*"], name: "Custom Geocoding Service", placeholder: "Search Geocoder", maxResults: 3, maxSuggestions: 6, enableSuggestions: true, minCharacters: 3 }); sources.push({ featureLayer: new FeatureLayer("http://115.79.20.1:6080/arcgis/rest/services/Atlas2015/NEN_KTXH_150715/MapServer/0", {outFields: ["*"]}), searchFields: ["TEN"], displayField: "TEN", exactMatch: true, outFields: ["*"], placeholder: "number house", maxResults: 6, maxSuggestions: 6, name: "Feature Layer Search", //Create an InfoTemplate infoTemplate: new InfoTemplate("tên: ${TEN}</br>địa chỉ: ${DIACHI}</br>"), enableSuggestions: true, minCharacters: 0 }); //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>
One thing you are missing is the basemap
var map = new Map("map", {
basemap: "streets",
zoom: 5
});
i used ArcGISTiledMapServiceLayer add to map, any ideas?
La Sinh,
I could not get your public facing geocode service to work at all. Using the rest endpoint and an address like this
Đường Số 10, p. Dĩ An, tx. Dĩ An, Bình Dương, Vietnam
Returned no results.
thanks repply! my geocode servervice:
http://115.79..20.1:6080/arcgis/rest/services/Geocode/GEOCODING_SONHA_BH/GeocodeServer
La sinh,
Yes I already had the url from a previous post I helped you with. The issue is that I can not get your geocoder service to work even using the REST endpoint. This is the address I tried:
Đường Số 10, p. Dĩ An, tx. Dĩ An, Bình Dương, Vietnam
Is this a proper address for your area in Vietnam that is covered by your geocoder service?
Geocode/SONHA_BH15112015 (GeocodeServer)
above link is my service geocodding
Đường Số 10, p. Dĩ An, tx. Dĩ An, Bình Dương, Vietnam that is not address in my area my geocoding services
my service geocodding is number house; 520 Đường Đồng Khởi is proper address for your area my service geocodding
La sinh,
OK, I made some changes to your code and the search widget will find 520 Đường Đồng Khởi using your geocoder now:
<html dir="ltr"> <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>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/tasks/locator", "esri/graphic", "esri/dijit/Search", "esri/layers/FeatureLayer", "esri/geometry/webMercatorUtils", "esri/layers/ArcGISTiledMapServiceLayer", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/InfoTemplate", "esri/Color", "dojo/number", "dojo/parser", "dojo/dom", "dijit/registry", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!" ], function ( Map, Locator, Graphic, Search, FeatureLayer, webMercatorUtils, ArcGISTiledMapServiceLayer, SimpleMarkerSymbol, SimpleLineSymbol, InfoTemplate, Color, number, parser, dom, registry ) { var map = new Map("map", { zoom: 5 }); var tiled = new ArcGISTiledMapServiceLayer("http://115.79.20.1:6080/arcgis/rest/services/Atlas2015/NEN_KTXH_150715/MapServer"); map.addLayer(tiled); var locator = new Locator("http://115.79.20.1:6080/arcgis/rest/services/Geocode/GEOCODING_SONHA_BH/GeocodeServer"); var s = new Search({ enableButtonMode: true, //this enables the search widget to display as a single button enableLabel: false, enableInfoWindow: true, showInfoWindowOnSelect: false, map: map }, "search"); var sources = s.get("sources"); sources.push({ locator: locator, outFields: ["*"], name: "Custom Geocoding Service", placeholder: "Search Geocoder", maxResults: 3, maxSuggestions: 6, enableSuggestions: true, minCharacters: 3 }); sources.push({ featureLayer: new FeatureLayer("http://115.79.20.1:6080/arcgis/rest/services/Atlas2015/NEN_KTXH_150715/MapServer/0", {outFields: ["*"]}), searchFields: ["TEN"], displayField: "TEN", exactMatch: true, outFields: ["*"], placeholder: "number house", maxResults: 6, maxSuggestions: 6, name: "Feature Layer Search", //Create an InfoTemplate infoTemplate: new InfoTemplate("tên: ${TEN}</br>địa chỉ: ${DIACHI}</br>"), enableSuggestions: true, minCharacters: 0 }); //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>
Thanks Robert, how Suggestions with my geocoding services, your code is working but not suggestion? how to use suggestion with search widgit?
above code has enableSuggestions: true attributes but apparently it does not work!
La sinh,
Use this url and you will see that your suggest functionality has an issue: (You get an invalid url error)
Suggest: (Geocode/GEOCODING_SONHA_BH)
Don't forget to mark this thread as answered. To do this you have to open the thread (you can not see the correct answer link from inside your inbox) and then you will see the green star with correct answer link. Just click that link on the thread that answered your question.