forked from felixpalmer/procedural-gl-js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
58 lines (54 loc) · 2.34 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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Procedural GL JS</title>
<meta name="viewport" content="user-scalable=no, width=device-width, height=device-height, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tarekraafat/[email protected]/dist/css/autoComplete.min.css">
<style>
html, body {
margin: 0;
}
</style>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div style="position: absolute; width: 100%; height: 100%;" id="container">
</div>
</body>
<script type="text/javascript" src="./build/procedural-gl.js"></script>
<script type="text/javascript">
// Initialize the engine with a location and inject into page
const container = document.getElementById( 'container' );
// Define API Keys (replace these with your own!)
const NASADEM_APIKEY = null;
const MAPTILER_APIKEY = null;
if ( !NASADEM_APIKEY || !MAPTILER_APIKEY ) {
const error = Error( 'Modify index.html to include API keys' );
container.innerHTML = error;
throw error;
}
const datasource = {
elevation: {
apiKey: NASADEM_APIKEY
},
imagery: {
apiKey: MAPTILER_APIKEY,
urlFormat: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key={apiKey}',
attribution: '<a href="https://www.maptiler.com/copyright/">Maptiler</a> <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}
}
Procedural.init( { container, datasource } );
Procedural.setCameraModeControlVisible( true );
Procedural.setCompassVisible( true );
Procedural.setUserLocationControlVisible( true );
Procedural.setRotationControlVisible( true );
Procedural.setZoomControlVisible( true );
// Load random location
const latitude = 42 + 8 * Math.random();
const longitude = 6 + 8 * Math.random();
Procedural.displayLocation( {
latitude:latitude, longitude:longitude
} );
</script>
</html>