-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
79 lines (79 loc) · 4.28 KB
/
index.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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="WebGL Earth, examples, globe, webgl, api">
<meta name="description" content="Free and open-source 3D digital globe for web and mobile devices. Displays OpenStreetMap (OSM), Bing Maps, MapTiler Cloud, and custom map tiles generated by MapTiler Desktop on a globe.">
<link rel="stylesheet" href="css/styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/ZeroClipboard.js"></script>
<title>WebGL Earth API examples: Leaflet compatible API</title>
<link rel="shortcut icon" href="favicon.ico">
</head>
<body>
<div id="wrapper">
<div id="nav">
<nav>
<ul>
<li><a href="examples/helloworld.html" class="link"
data-desc="Simple Hello world example.">Hello world</a></li>
<li><a href="examples/animation.html" class="link"
data-desc="Rotate your globe with a simple animation.">Animation</a></li>
<li><a href="examples/customtiles.html" class="link"
data-desc="Custom baselayer rendered by <a href='https://maptiler.com/desktop/' target='_blank'>MapTiler Desktop.</a><p><a href='https://documentation.maptiler.com/hc/en-us/articles/360020950978-How-to-create-a-3D-online-globe'><img src='http://img.youtube.com/vi/pf8itiTwo6w/0.jpg' style='width:80px; border:0; float:left;'>Read the entire tutorial on how to create your own map tiles (texture) for the globe</a></p>">Custom map tiles</a></li>
<li><a href="examples/markers.html" class="link"
data-desc="Custom markers on globe.">Markers</a></li>
<li><a href="examples/polygon.html" class="link"
data-desc="Custom polygons.">Polygon</a></li>
<li><a href="examples/opposite.html" class="link"
data-desc="Displays antipode of a point on the Earth.">Opposite Side of the World</a></li>
<li><a href="examples/apidemo.html" class="link"
data-desc="Advanced API example.">Advanced API demo</a></li>
</ul>
<p>
<a href="https://github.com/webglearth/webglearth2-offline#webgl-earth-offline-demo">Download & offline demo</a>
</p>
<p>
<a href="https://sites.google.com/site/webglearth/">Project page & API reference</a>
</p>
</nav>
</div>
<div id="content">
<header>
<div id="header">
<div id="logo">
<a href="https://www.webglearth.org">
<img src="img/logo-webglearth-white-350.png" alt="WebGLEarth logo">
</a>
</div>
<h1>
<a href="https://www.webglearth.org">WebGL Earth</a>
<span id="subtitle">Examples</span>
</h1>
</div>
</header>
<section>
<h2>Leaflet compatible API (replace "L." with "WE.")</h2>
<iframe src="examples/helloworld.html" width="700" height="400" name="view" id="view"></iframe>
<a href="examples/helloworld.html" class="view-example" target="_blank">View example on a separate page</a>
<div id="desc"><p>Simple example.</p></div>
<div id="desc"><p>WebGL Earth is a 3D globe for web and mobile (Android, iOS) devices. It is completely free and open-source software.</p></div>
<h2>
<button id="btn-copy" data-clipboard-text="" title="Copy source code to clipboard">Copy</button>
Source code
</h2>
<pre id="source"></pre>
</section>
</div>
<footer>
Get basemaps via <a href="https://maptiler.com/cloud/">maps API</a>, with <a href="https://maptiler.com/terrain/">Cesium 3D terrain data</a> and <a href="https://maptiler.com/satellite/">a detailed satellite map of the entire world</a>.
<br>
Use detailed <a href="https://www.maptiler.com/map/map-of-london/">map of London</a> in your application.
<br>
© Copyright 2014-2023 <a href="https://maptiler.com">MapTiler</a>.
</footer>
</div>
</body>
</html>