-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsearchSub.html
162 lines (149 loc) · 5.39 KB
/
searchSub.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
<!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="https://js.arcgis.com/3.16/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.16/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="https://js.arcgis.com/3.16/"></script>
<script>
var map;
require([
"esri/map",
"esri/layers/FeatureLayer",
"esri/dijit/Search",
"esri/InfoTemplate",
"esri/config",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/ArcGISDynamicMapServiceLayer",
"dojo/domReady!"
], function (Map, FeatureLayer, Search, InfoTemplate,esriConfig,Tiled,ArcGISDynamicMapServiceLayer) {
var pipeLayerUrl="http://10.50.51.67:6080/arcgis/rest/services/hrb/hrbPipe_2015/MapServer";
var pipeLayer = new ArcGISDynamicMapServiceLayer(pipeLayerUrl);
var tiled = new Tiled("https://mapserv.utah.gov/arcgis/rest/services/BaseMaps/Terrain/MapServer");
// var tiled = new Tiled("http://10.50.51.67:6080/arcgis/rest/services/hrb/hrbBackground2015/MapServer");
esriConfig.defaults.io.corsEnabledServers.push("10.50.51.67");
esriConfig.defaults.io.corsDetection = false;
map = new Map();
map.addLayer(tiled);
map.addLayer(pipeLayer);
//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://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: "Spain",
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>