/
index.module.html
69 lines (63 loc) · 2.83 KB
/
index.module.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
<!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/autocomplete.js@7.2.0/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="module">
import Procedural from './build/procedural-gl.module.js';
// Initialize the engine with a location and inject into page
const container = document.getElementById( 'container' );
// Define API Keys (replace these with your own!)
// To obtain an API key go to:
// https://cloud.maptiler.com/account/?ref=procedural
const MAPTILER_APIKEY = null;
if ( !MAPTILER_APIKEY ) {
const error = Error( 'Modify index.module.html to include API keys' );
container.innerHTML = 'Modify datasource definition to contain a valid API key. <a href="https://cloud.maptiler.com/account/?ref=procedural">Click here to get a free API key</a>';
throw error;
}
const datasource = {
provider: 'maptiler',
apiKey: MAPTILER_APIKEY,
}
// Custom datasource definition
//const datasource = {
// elevation: {
// apiKey: 'GET_AN_API_KEY_FROM_YOUR_ELEVATION_PROVIDER',
// attribution: 'Elevation attribution',
// pixelEncoding: 'nasadem', // or 'terrain-rgb', 'terrarium'
// urlFormat: 'https://elevation.example.com/tiles/{z}/{x}/{y}.jpg?key={apiKey}'
// },
// imagery: {
// apiKey: 'GET_AN_API_KEY_FROM_YOUR_IMAGERY_PROVIDER',
// attribution: 'Imagery attribution',
// urlFormat: 'https://imagery.example.com/tiles/{z}/{x}/{y}.jpg?key={apiKey}'
// }
//}
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>