-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtiles.html
94 lines (81 loc) · 2.36 KB
/
tiles.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
<html>
<body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/geojs/0.20.0/geo.min.js"></script>
<div id="map" style="width: 100%; height: 100%;"></div>
<style>
.basemapTool {
background-color: #DCDCDC;
padding: 2px;
border: 2px solid #000;
text-align: left;
border-radius: 10px;
}
</style>
<div id="basemapTool" class="basemapTool">
<label for="basemapDropdown">Choose a basemap:</label>
<select id="basemapDropdown" onChange='changeBasemap();'>
<option>osm</option>
<option>stamen-terrain</option>
<option>stamen-terrain-background</option>
<option>nationalmap-satellite</option>
<option>stamen-toner</option>
<option>stamen-toner-lite</option>
<option>wikimedia</option>
<option>-- none --</option>
</select>
</div>
<script>
// Initialize the map
let map = geo.map({
node: '#map',
clampBoundsX: true
})
var basemapLayer = map.createLayer('osm', {
source: 'osm',
gcs: 'EPSG:3857' // web mercator
});
// Tile layer for showing rasters/images with large_image
var tileLayer = map.createLayer('osm', {
keepLower: false,
attribution: ''
});
tileLayer.visible(true)
// Increase zoom range from default of 16
map.zoomRange({
min: 0,
max: 20,
})
// User Interface layer
var ui = map.createLayer('ui');
// Create a zoom slider widget
ui.createWidget('slider', {
position: {
left: 40,
top: 40
}
});
var basemapTool = ui.createWidget('dom', {
position: {
right: 20,
top: 20
}
});
basemapTool.canvas().appendChild(document.getElementById("basemapTool"))
var basemapDropdown = document.getElementById("basemapDropdown")
basemapDropdown.value = basemapLayer.source()
function changeBasemap() {
if (basemapDropdown.value == '-- none --') {
basemapLayer.visible(false)
} else {
basemapLayer.visible(true)
basemapLayer.source(basemapDropdown.value)
}
}
var host = "http://localhost:8000";
var image_id = 1; //Number(selector.value);
console.log(image_id)
tileLayer.visible(true)
tileLayer.url(`${host}/api/image_process/imagery/${image_id}/tiles/{z}/{x}/{y}.png?projection=EPSG:3857`)
</script>
</body>
</html>