Skip to content

Commit 2b89f83

Browse files
mgermeriegchoqueux
mgermerie
authored and
gchoqueux
committed
example(Widget): add an example of minimap widget
1 parent 6d82c74 commit 2b89f83

File tree

2 files changed

+124
-1
lines changed

2 files changed

+124
-1
lines changed

‎examples/config.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,8 @@
7979
},
8080

8181
"Widgets": {
82-
"widgets_navigation": "Navigation"
82+
"widgets_navigation": "Navigation",
83+
"widgets_minimap": "Minimap"
8384
},
8485

8586
"Plugins": {

‎examples/widgets_minimap.html

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
<html>
2+
<head>
3+
<title>Itowns - Minimap widget</title>
4+
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
8+
<link rel="stylesheet" type="text/css" href="css/example.css">
9+
<link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">
10+
11+
<!-- Import stylesheet for itowns Widgets plugin -->
12+
<link rel="stylesheet" type="text/css" href="css/widgets.css">
13+
14+
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
15+
</head>
16+
<body>
17+
<!-- Add a description -->
18+
<div id="description">
19+
Double click on the minimap to travel to the cursor location.
20+
</div>
21+
22+
<!-- Create a container for itowns viewer -->
23+
<div id="viewerDiv"></div>
24+
25+
<!-- Import iTowns source code -->
26+
<script src="../dist/itowns.js"></script>
27+
<script src="../dist/debug.js"></script>
28+
<!-- Import iTowns Widgets plugin -->
29+
<script src="../dist/itowns_widgets.js"></script>
30+
<!-- Import iTowns LoadingScreen and GuiTools plugins -->
31+
<script src="js/GUI/LoadingScreen.js"></script>
32+
<script src="js/GUI/GuiTools.js"></script>
33+
34+
35+
<script type="text/javascript">
36+
37+
38+
39+
// ---------- CREATE A GlobeView FOR SUPPORTING DATA VISUALIZATION : ----------
40+
41+
// Define camera initial position
42+
const placement = {
43+
coord: new itowns.Coordinates('EPSG:4326', 2.351323, 48.856712),
44+
range: 6000,
45+
tilt: 50,
46+
}
47+
48+
// `viewerDiv` contains iTowns' rendering area (`<canvas>`)
49+
const viewerDiv = document.getElementById('viewerDiv');
50+
51+
// Create a GlobeView
52+
const view = new itowns.GlobeView(viewerDiv, placement);
53+
54+
// Setup loading screen and debug menu
55+
setupLoadingScreen(viewerDiv, view);
56+
const debugMenu = new GuiTools('menuDiv', view);
57+
58+
59+
60+
// ---------- DISPLAY CONTEXTUAL DATA : ----------
61+
62+
// Add one imagery layer to the scene. This layer's properties are defined in a json file, but it could be
63+
// defined as a plain js object. See `Layer` documentation for more info.
64+
itowns.Fetcher.json('layers/JSONLayers/Ortho.json').then((config) => {
65+
config.source = new itowns.WMTSSource(config.source);
66+
view.addLayer(
67+
new itowns.ColorLayer(config.id, config),
68+
).then(debugMenu.addLayerGUI.bind(debugMenu));
69+
});
70+
71+
// Add two elevation layers, each with a different level of detail. Here again, each layer's properties are
72+
// defined in a json file.
73+
function addElevationLayerFromConfig(config) {
74+
config.source = new itowns.WMTSSource(config.source);
75+
view.addLayer(
76+
new itowns.ElevationLayer(config.id, config),
77+
).then(debugMenu.addLayerGUI.bind(debugMenu));
78+
}
79+
itowns.Fetcher.json('layers/JSONLayers/WORLD_DTM.json').then(addElevationLayerFromConfig);
80+
itowns.Fetcher.json('layers/JSONLayers/IGN_MNT_HIGHRES.json').then(addElevationLayerFromConfig);
81+
82+
83+
84+
// ---------- ADD MINIMAP WIDGET : ----------
85+
86+
// Create a ColorLayer that shall be displayed on the minimap.
87+
const minimapColorLayer = new itowns.ColorLayer('minimap', {
88+
source: new itowns.VectorTilesSource({
89+
style: 'https://wxs.ign.fr/essentiels/static/vectorTiles/styles/PLAN.IGN/standard.json',
90+
// We don't display mountains and plot related data to ease visualisation
91+
filter: (layer) => !layer['source-layer'].includes('oro_')
92+
&& !layer['source-layer'].includes('parcellaire'),
93+
}),
94+
addLabelLayer: true,
95+
});
96+
97+
// Create a minimap.
98+
const minimap = new itowns_widgets.Minimap(view, minimapColorLayer, {
99+
cursor: '+',
100+
size: 200,
101+
});
102+
103+
104+
105+
// ---------- ADD INTERACTION WITH MINIMAP : ----------
106+
107+
// When double-clicking the minimap, travel to the cursor location.
108+
const cursorCoordinates = new itowns.Coordinates(minimap.view.referenceCrs);
109+
minimap.domElement.addEventListener('dblclick', (event) => {
110+
minimap.view.pickCoordinates(event, cursorCoordinates);
111+
view.controls.lookAtCoordinate({ coord: cursorCoordinates });
112+
});
113+
114+
115+
116+
// ---------- DEBUG TOOLS : ----------
117+
118+
debug.createTileDebugUI(debugMenu.gui, view);
119+
120+
</script>
121+
</body>
122+
</html>

0 commit comments

Comments
 (0)