-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathProxy_alojado_SA.html
163 lines (143 loc) · 5.61 KB
/
Proxy_alojado_SA.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
<!DOCTYPE html>
<html>
<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>Basic Service Area</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.27/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.27/esri/css/esri.css">
<style>
body, html, #main {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
</style>
<script src="https://js.arcgis.com/3.27/"></script>
<script>
var map, serviceAreaTask, params, clickpoint;
require([
"esri/map", "esri/config",
"esri/tasks/ServiceAreaTask", "esri/tasks/ServiceAreaParameters", "esri/tasks/FeatureSet",
"esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol",
"esri/geometry/Point", "esri/graphic",
"dojo/parser", "dojo/dom", "dijit/registry",
"esri/Color", "dojo/_base/array",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane",
"dijit/form/HorizontalRule", "dijit/form/HorizontalRuleLabels", "dijit/form/HorizontalSlider",
"dojo/domReady!"
], function(
Map, esriConfig,
ServiceAreaTask, ServiceAreaParameters, FeatureSet,
SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
Point, Graphic,
parser, dom, registry,
Color, arrayUtils
) {
parser.parse();
//This sample requires a proxy page to handle communications with the ArcGIS Server services. You will need to
//replace the url below with the location of a proxy on your machine. See the 'Using the proxy page' help topic
//for details on setting up a proxy page.
esriConfig.defaults.io.proxyUrl = "/proxy/";
map = new Map("map", {
basemap: "streets",
center: [-122.447, 37.781],
zoom: 15
});
map.on("click", mapClickHandler);
params = new ServiceAreaParameters();
params.defaultBreaks= [1];
params.outSpatialReference = map.spatialReference;
params.returnFacilities = false;
serviceAreaTask = new ServiceAreaTask("https://utility.arcgis.com/usrsvcs/appservices/0g5KWOuF6uZOALdM/rest/services/World/ServiceAreas/NAServer/ServiceArea_World/solveServiceArea");
registry.byId("hslider").on("change", updateHorizontalLabel);
updateHorizontalLabel();
// Create function that updates label when changed
function updateHorizontalLabel() {
// Get access to nodes/widgets we need to get/set values
var hSlider = registry.byId("hslider");
var label = dom.byId("decValue");
// Update label
label.innerHTML = hSlider.get("value");
params.defaultBreaks = [ hSlider.value / 60 ];
if (clickpoint) {
mapClickHandler(clickpoint);
}
}
function mapClickHandler(evt) {
clickpoint = evt;
map.graphics.clear(); //clear existing graphics
//define the symbology used to display the results and input point
var pointSymbol = new SimpleMarkerSymbol(
"diamond",
20,
new SimpleLineSymbol(
"solid",
new Color([88,116,152]), 2
),
new Color([88,116,152,0.45])
);
var inPoint = new Point(evt.mapPoint.x, evt.mapPoint.y, map.spatialReference);
var location = new Graphic(inPoint, pointSymbol);
map.graphics.add(location);
var features = [];
features.push(location);
var facilities = new FeatureSet();
facilities.features = features;
params.facilities = facilities;
//solve
serviceAreaTask.solve(params,function(solveResult){
var polygonSymbol = new SimpleFillSymbol(
"solid",
new SimpleLineSymbol("solid", new Color([232,104,80]), 2),
new Color([232,104,80,0.25])
);
arrayUtils.forEach(solveResult.serviceAreaPolygons, function(serviceArea){
serviceArea.setSymbol(polygonSymbol);
map.graphics.add(serviceArea);
});
}, function(err){
console.log(err.message);
});
}
});
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width:100%;height:100%;margin:0px;">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
<b>Click to find the service area polygon</b>
<div style="width: 400px; margin: 10px">
<ol data-dojo-type="dijit/form/HorizontalRuleLabels"
data-dojo-props="
container: 'topDecoration',
style: 'height: 1.2em; font-weight: bold; margin: 0 12px;'">
<li>0</li>
<li>0:20</li>
<li>0:40</li>
<li>1:00</li>
<li>1:20</li>
<li>1:40</li>
<li>2:00</li>
</ol>
<div data-dojo-type="dijit/form/HorizontalRule"
data-dojo-props="
container: 'topDecoration',
count: 7,
style: 'height: 5px; margin: 0 12px;'">
</div>
<input id="hslider" value="60" type="range"
data-dojo-type="dijit/form/HorizontalSlider"
data-dojo-props="
minimum: 0,
maximum: 120,
showButtons: false,
discreteValues: 25">
<div style="padding-top: 10px; text-align: center;">Travel time: <strong id="decValue"></strong> seconds</div>
</div>
</div>
<div id="map" dojotype="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
</div>
</body>
</html>