forked from hakimel/reveal.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathelevationdemo.html
93 lines (84 loc) · 2.74 KB
/
elevationdemo.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
<html>
<head>
<meta charset=utf-8 />
<title>Esri Leaflet Quickstart</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<!-- Load D3 from CDN-->
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<!-- Load Leaflet from CDN-->
<link rel="stylesheet" href="//cdn.jsdelivr.net/leaflet/0.7.3/leaflet.css" />
<script src="//cdn.jsdelivr.net/leaflet/0.7.3/leaflet.js"></script>
<!-- Load Esri Leaflet from CDN -->
<script src="//cdn-geoweb.s3.amazonaws.com/esri-leaflet/1.0.0-rc.6/esri-leaflet.js"></script>
<!-- Load Esri Leaflet GP from CDN -->
<script src="//cdn-geoweb.s3.amazonaws.com/esri-leaflet-gp/0.0.1-alpha.3/esri-leaflet-gp-src.js"></script>
<script src="./elevation/Leaflet.Elevation-0.0.2.src.js"></script>
<link rel="stylesheet" href="./elevation/Leaflet.Elevation-0.0.2.css">
<style>
body {margin:0;padding:0;}
#map {position: absolute;top:0;bottom:0;right:0;left:0;}
.lime-theme .leaflet-control.elevation .background {
background: transparent;
}
.elevation {
box-shadow: 0 1px 5px rgba(0,0,0,0.65);
border-radius: 4px;
background: white;
padding: 1em;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map', {
zoomControl: false
}).setView([33.84, -116.57], 14);
// Disable drag and zoom handlers.
map.dragging.disable();
map.touchZoom.disable();
map.doubleClickZoom.disable();
map.scrollWheelZoom.disable();
// Disable tap handler, if present.
if (map.tap) {
map.tap.disable()
};
L.esri.basemapLayer('Topographic').addTo(map);
var active = false;
var polyline;
var profileService = new L.esri.GP.Services.Geoprocessing({
url: "http://elevation.arcgis.com/arcgis/rest/services/Tools/ElevationSync/GPServer/Profile",
path: "execute"
});
map.on('click', function (e) {
if (active) {
// are active build line and query
active = false;
var profile = profileService.createTask();
profile.setParam("DEMResolution", "FINEST");
profile.setParam("ProfileIdField", "OID");
profile.setParam("MaximumSampleDistance", 50000);
profile.setParam("returnZ", true);
profile.setParam("InputLineFeatures", polyline.toGeoJSON());
profile.run(function(error, geojson, response){
console.log(geojson);
var el = L.control.elevation().addTo(map)
L.geoJson(geojson,{
onEachFeature: el.addData.bind(el)
}).addTo(map);
});
} else {
// in active create new polyline
active = true;
polyline = L.polyline([]).addTo(map);
}
});
map.on('mousemove', function(e){
if(!active) {
return false;
}
polyline.addLatLng(e.latlng);
});
</script>
</body>
</html>