Skip to content

Commit da2b212

Browse files
hhkaoshhkaos
authored
Merge pull request #55 from nooras/feature-search-widget-snippets-#44
Add snippets for Search widget (different configurations) #44
2 parents 50d5446 + 3d6b522 commit da2b212

File tree

3 files changed

+120
-0
lines changed

3 files changed

+120
-0
lines changed

‎CHANGELOG.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,3 +69,9 @@ All notable changes to the "arcgis-jsapi-snippets" extension will be documented
6969
- `elevationInfo` -> `elevationInfoProps`
7070
- `background` -> `sceneViewEnvironmentProps`
7171
- `basemapStyle` -> `basemapsWithAPIKeys`
72+
73+
## [Version 1.1.6]
74+
75+
- Added `searchWidget` snippet
76+
- Added `searchWidgetWithCustomSources` snippet
77+
- Added `searchWidgetWithSources` snippet

‎README.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,9 @@ This extension adds a new option to the activity bar that lets you quickly brows
107107
| sceneViewEnvironmentProps | Creates an environment object for changing the background of a scene. This snippet is usually used to set the property \"environment\" of the SceneView. |
108108
| basemapsWithAPIKeys | List all available map styles to be used without API keys. Use of these basemaps requires an ArcGIS Developer subscription or a valid ArcGIS Online organizational subscription |
109109
| basemapsWithoutAPIKeys | List all available map styles to be used without API keys. Use of these basemaps requires an ArcGIS Developer subscription or a valid ArcGIS Online organizational subscription |
110+
| searchWidget | The Search widget provides a way to perform search operations on services or features provided by Esri. |
111+
| searchWidgetWithCustomSources | The search widget provides the capability to provide search capabilities to third-party services. To use a custom source with the search widget, you must set the widget's sources property with your own custom source. To create a custom search source, you need to construct a search source with on object containing two functions, getSuggestions and getResults. |
112+
| searchWidgetWithSources | The Search widget to search multiple Layer Sources based on given fields. To use multiple sources with the Search widget, you must set the widget's sources property. |
110113

111114
### [TypeScript snippets](snippets/typescript.json)
112115

‎snippets/javascript.json

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,117 @@
1212
"description": "Add a new layer to the map using a portal item id. Contains a placeholder for the portal item id. AMD path: esri/layers/Layer | ESM path: @arcgis/core/layers/Layer.js",
1313
"prefix": "addLayerFromPortalItem"
1414
},
15+
"Add a Search Widget": {
16+
"body": [
17+
"new Search({",
18+
"\tincludeDefaultSources: false,",
19+
"\tmaxResults: 6,",
20+
"\tpopupEnabled: true,",
21+
"\tsources: [...],",
22+
"\tview: view,",
23+
"});"
24+
],
25+
"description": "The Search widget provides a way to perform search operations on services or features provided by Esri",
26+
"prefix": "searchWidget"
27+
},
28+
"Add a Search Widget with Custom Sources": {
29+
"body": [
30+
"new SearchSource({",
31+
"\tplaceholder: \"example: 8 Boulevard du Port\",",
32+
"\tgetSuggestions: (params) => {",
33+
"\t\t\treturn esriRequest(url + \"search/\", {",
34+
"\t\t\t\tquery: {",
35+
"\t\t\t\t\tlat: view.center.latitude,",
36+
"\t\t\t\t\tlon: view.center.longitude,",
37+
"\t\t\t\t\tlimit: 6,",
38+
"\t\t\t\t\tq: params.suggestTerm.replace(/ /g, \"+\")",
39+
"\t\t\t\t},",
40+
"\t\t\t\tresponseType: \"json\"",
41+
"\t\t\t}).then((results) => {",
42+
"\t\t\t\treturn results.data.features.map((feature) => {",
43+
"\t\t\t\t\treturn {",
44+
"\t\t\t\t\t\tkey: \"name\",",
45+
"\t\t\t\t\t\tsourceIndex: params.sourceIndex,",
46+
"\t\t\t\t\t\ttext: feature.properties.label",
47+
"\t\t\t\t\t};",
48+
"\t\t\t\t});",
49+
"\t\t\t});",
50+
"\t\t},",
51+
"\t\tgetResults: (params) => {",
52+
"\t\t\tconst operation = params.location ? \"reverse/\" : \"search/\";",
53+
"\t\t\tlet query = {};",
54+
"\t\t\tif (params.location) {",
55+
"\t\t\t\tquery.lat = params.location.latitude;",
56+
"\t\t\t\tquery.lon = params.location.longitude;",
57+
"\t\t\t} else {",
58+
"\t\t\t\tquery.q = params.suggestResult.text.replace(/ /g, \"+\");",
59+
"\t\t\t\tquery.limit = 6;",
60+
"\t\t\t}",
61+
"\t\t\treturn esriRequest(url + operation, {",
62+
"\t\t\t\tquery: query,",
63+
"\t\t\t\tresponseType: \"json\"",
64+
"\t\t\t}).then((results) => {",
65+
"\t\t\t\tconst searchResults = results.data.features.map((feature) => {",
66+
"\t\t\t\t\tconst graphic = new Graphic({",
67+
"\t\t\t\t\t\tgeometry: new Point({",
68+
"\t\t\t\t\t\t\tx: feature.geometry.coordinates[0],",
69+
"\t\t\t\t\t\t\ty: feature.geometry.coordinates[1]",
70+
"\t\t\t\t\t\t}),",
71+
"\t\t\t\t\t\tattributes: feature.properties",
72+
"\t\t\t\t\t});",
73+
"\t\t\t\t\tconst buffer = geometryEngine.geodesicBuffer(graphic.geometry, 100, \"meters\");",
74+
"\t\t\t\t\tconst searchResult = {",
75+
"\t\t\t\t\t\textent: buffer.extent,",
76+
"\t\t\t\t\t\tfeature: graphic,",
77+
"\t\t\t\t\t\tname: feature.properties.label",
78+
"\t\t\t\t\t};",
79+
"\t\t\t\t\treturn searchResult;",
80+
"\t\t\t\t});",
81+
"\t\t\t\t",
82+
"\t\t\t\treturn searchResults;",
83+
"\t\t\t});",
84+
"\t\t}",
85+
"});"
86+
],
87+
"description": "The search widget provides the capability to provide search capabilities to third-party services. To use a custom source with the search widget, you must set the widget's sources property with your own custom source. To create a custom search source, you need to construct a search source with on object containing two functions, getSuggestions and getResults.",
88+
"prefix": "searchWidgetWithCustomSources"
89+
},
90+
"Add a Search Widget with Multiple Sources": {
91+
"body": [
92+
"new Search({",
93+
"\tallPlaceholder: \"District or Senator\",",
94+
"\tincludeDefaultSources: false,",
95+
"\tsources: [",
96+
"\t\t{",
97+
"\t\t\texactMatch: false,",
98+
"\t\t\tlayer: featureLayerSenators,",
99+
"\t\t\tname: \"Senators\",",
100+
"\t\t\toutFields: [\"*\"],",
101+
"\t\t\tplaceholder: \"example: Casey\",",
102+
"\t\t\tresultSymbol: {",
103+
"\t\t\t\theight: 36,",
104+
"\t\t\t\ttype: \"picture-marker\",",
105+
"\t\t\t\turl: \"https://developers.arcgis.com/javascript/latest//sample-code/widgets-search-multiplesource/live/images/senate.png\",",
106+
"\t\t\t\twidth: 36",
107+
"\t\t\t},",
108+
"\t\t\tsearchFields: [\"Name\", \"Party\"],",
109+
"\t\t\tsuggestionTemplate: \"{Name}, Party: {Party}\",",
110+
"\t\t\tzoomScale: 500000",
111+
"\t\t},",
112+
"\t\t{",
113+
"\t\t\tapiKey: \"YOUR API KEY\",",
114+
"\t\t\tname: \"ArcGIS World Geocoding Service\",",
115+
"\t\t\tplaceholder: \"example: Nuuk, GRL\",",
116+
"\t\t\tsingleLineFieldName: \"SingleLine\",",
117+
"\t\t\turl: \"https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer\"",
118+
"\t\t}",
119+
"\t],",
120+
"\tview: view",
121+
"});"
122+
],
123+
"description": "The Search widget to search multiple Layer Sources based on given fields. To use multiple sources with the Search widget, you must set the widget's sources property.",
124+
"prefix": "searchWidgetWithSources"
125+
},
15126
"Add ArcGIS JS SDK require": {
16127
"body": [
17128
"require([",

0 commit comments

Comments
 (0)