-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsearch_customized.html
165 lines (147 loc) · 5.13 KB
/
search_customized.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!DOCTYPE html>
<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 | Customize Search widget</title>
<link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.14/3.14/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.14/3.14/esri/css/esri.css">
<style>
html,
body,
#map,
.map.container {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#info {
top: 2px;
color: #444;
height: auto;
font-family: arial;
font-weight: bold;
left: 69px;
margin: 5px;
padding: 10px;
position: absolute;
width: 260px;
z-index: 40;
border: solid 1px #003300;
border-radius: 4px;
background-color: #E5E5E5;
}
#search {
display: block;
position: absolute;
z-index: 2;
top: 70px;
left: 74px;
}
/*Beginning of search box modifications*/
.arcgisSearch .searchClear {
background-color: #E5E5E5;
}
.arcgisSearch .esriIconZoom {
background-image: url("finding.png");
background-size: 20px 20px;
}
.esriIconZoom:before {
content: "";
}
.arcgisSearch .searchGroup .searchInput,
.arcgisSearch .searchBtn,
.arcgisSearch .noResultsMenu,
.arcgisSearch .suggestionsMenu {
border: 1px solid #003300;
background-color: #E5E5E5;
}
.arcgisSearch .noValueText {
color: red;
font-size: 14px;
}
/*Beginning of popup modifications*/
.esriPopup .titlePane {
background-color: #003300;
border-bottom: 1px solid #121310;
font-weight: bold;
}
.esriPopup a {
color: #DAE896;
}
.esriPopup .contentPane,
.esriPopup .actionsPane,
.esriPopup .pointer,
.esriPopup .outerPointer {
background-color: #B3B3B3;
}
</style>
<script>
var dojoConfig = {
parseOnLoad: true
};
</script>
<script src="http://localhost/arcgis_js_api/library/3.14/3.14/init.js" data-dojo-config="isDebug: 1, async: 1, parseOnLoad: 1"></script>
<script>
var map;
require([
"esri/map",
"esri/layers/FeatureLayer",
"esri/dijit/Search",
"esri/InfoTemplate",
"dojo/domReady!"
], function (Map, FeatureLayer, Search, InfoTemplate) {
/* map = new Map("map", {
basemap: "gray",
center: [0, 51], // lon, lat
zoom: 4
});
*/
map=new Map("map");
//ArcGIS Online feature service showing ecological footprints taken from Global FootPrint Network,
//more information on this can be found http://jsapi.maps.arcgis.com/home/item.html?id=0f4c89208dce44b583d9219d843591c3
// var layer = new FeatureLayer("http://services1.arcgis.com/EYwUC8SxXDiz08ND/ArcGIS/rest/services/China%20income%20per%20person/FeatureServer/0", {
// outFields: ["*"]
// });
var layer = new FeatureLayer("http://10.50.51.67:6080/arcgis/rest/services/hrb/hrbPipe_2015/FeatureServer/8", {
outFields: ["*"]
});
// map.addLayer(layer);
//Create search widget
var search = new Search({
map: map,
//passing in empty source array to clear defaults such as
//"All" and the ArcGIS Online World Geocoding service
sources: [],
zoomScale: 5000000
}, "search");
//listen for the load event and set the source properties
search.on("load", function () {
var sources = search.sources;
sources.push({
featureLayer: layer,
placeholder: "Guangdong",
enableLabel: false,
searchFields: ["LABEL"],
displayField: "LABEL",
exactMatch: false,
outFields: ["*"],
//Create an InfoTemplate and include three fields
// infoTemplate: new InfoTemplate("Ecological Footprint", "<a href= ${URL} target=_blank ;'>Additional Info</a></br></br>Country: ${Country}</br>Rating: ${Rating}")
});
//Set the sources above to the search widget
search.set("sources", sources);
});
search.startup();
});
</script>
</head>
<body>
<div id="search"></div>
<div id="info">
<div>Search a country to find its ecological footprint and rating.</div>
</div>
<div id="map"></div>
</body>
</html>