-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathapi-demo.html
127 lines (111 loc) · 4.83 KB
/
api-demo.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
<!DOCTYPE HTML>
<html>
<head>
<meta name="robots" content="index, all" />
<script src="http://www.webglearth.com/v2/api.js"></script>
<title>WebGL Earth API - Advanced API demo</title>
<script>
var map;
function init() {
map = WE.map('map', {
center: [36.057944835, -112.18688965],
zoom: 10,
dragging: true,
scrollWheelZoom: true
});
var baselayer = WE.tileLayer('https://webglearth.github.io/webglearth2-offline/{z}/{x}/{y}.jpg', {
tileSize: 256,
bounds: [[-85, -180], [85, 180]],
minZoom: 0,
maxZoom: 16,
attribution: 'WebGLEarth example',
tms: true
}).addTo(map);
//Add TileJSON layer
var json = {"profile": "mercator", "name": "Grand Canyon USGS", "format": "png", "bounds": [-112.26379395, 35.98245136, -112.10998535, 36.13343831], "minzoom": 10, "version": "1.0.0", "maxzoom": 16, "center": [-112.18688965, 36.057944835, 13], "type": "overlay", "description": "", "basename": "grandcanyon", "tilejson": "2.0.0", "sheme": "xyz", "tiles": ["http://tileserver.maptiler.com/grandcanyon/{z}/{x}/{y}.png"]};
var grandcanyon = WE.tileLayerJSON(json);
grandcanyon.addTo(map);
grandcanyon.setOpacity(0.7);
document.getElementById('opacity2').addEventListener('change', function(e) {
grandcanyon.setOpacity(e.target.value);
});
WE.marker([json.center[1], json.center[0]]).addTo(map);
//Print coordinates of the mouse
map.on('mousemove', function(e) {
document.getElementById('coords').innerHTML = e.latlng.lat + ', ' + e.latlng.lng;
});
}
function addSomeMarkers() {
document.getElementById('addmarkers').disabled = true;
map.setView([51.505, 0], 5);
var marker = WE.marker([51.5, -0.09]).addTo(map);
marker.bindPopup("<b>Hello world!</b><br>I am a popup.<br /><span style='font-size:10px;color:#999'>Tip: Another popup is hidden in Cairo..</span>", {maxWidth: 150, closeButton: true}).openPopup();
var marker2 = WE.marker([30.058056, 31.228889]).addTo(map);
marker2.bindPopup("<b>Cairo</b><br>Yay, you found me!<br />Here, enjoy another polygon..", {maxWidth: 120, closeButton: false});
var polygonA = WE.polygon([[50, 1], [51, 0.5], [50.5, 2.5]]).addTo(map);
var polygonB = WE.polygon([[50, 3], [51, 2.5], [50.5, 4.5]], {
color: '#ff0',
opacity: 1,
fillColor: '#f00',
fillOpacity: 0.1,
weight: 2
}).addTo(map);
var anotherPolygon = function(e) {
WE.polygon([[30, 30], [29, 31], [30, 32], [32, 32], [31, 30]], {
color: '#000',
opacity: 1,
fillColor: '#0f0',
fillOpacity: 0.7,
weight: 2
}).addTo(map);
marker2.off('click', anotherPolygon);
};
marker2.on('click', anotherPolygon);
}
function setZoom(zoom) {
map.setZoom(zoom);
}
function getZoomLevel() {
alert('Current zoom is: ' + Math.round(map.getZoom()));
}
function setPositionToEverest() {
map.setView([27.988056, 86.925278]);
}
function getCurrentCenter() {
alert(map.getCenter());
}
function flyToJapan() {
map.fitBounds([[22, 122], [48, 154]]);
map.panInsideBounds([[22, 122], [48, 154]],
{heading: 90, tilt: 25, duration: 1});
}
function panTo(coords) {
map.panTo(coords);
}
</script>
<style>
html, body{padding: 0; margin: 0;}
#map{top: 0; right: 0; bottom: 0; left: 0; background-color: #000; position: absolute !important;}
#coords{position: absolute; bottom: 10px; right: 10px; z-index: 100000;}
#buttons {position: absolute; top:10px; left: 10px;}
#layercontrol{position: absolute; top:10px; right: 10px;}
</style>
</head>
<body onload="init()">
<div id="map"></div>
<div id="coords"></div>
<div id="buttons">
<input type="button" value="Zoom to level 9" onclick="setZoom(9);"><br>
<input type="button" value="What's current zoom level?" onclick="getZoomLevel();"><br>
<input type="button" value="Set position to Mount Everest" onclick="setPositionToEverest();"><br>
<input type="button" value="What's current position?" onclick="getCurrentCenter();"><br>
<input type="button" value="Fly to Japan bounds" onclick="flyToJapan()"><br>
<input type="button" value="Fly to Iceland" onclick="panTo([65, -19]);"><br>
<input type="button" value="Add some markers & polygons" id="addmarkers" onclick="addSomeMarkers()"><br>
</div>
<div id="layercontrol">
Grand Canyon opacity:<br>
0<input type="range" id="opacity2" min="0" max="1" step="0.01" value="0.7">1<br>
</div>
</body>
</html>