145 lines
4.1 KiB
HTML
145 lines
4.1 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en" class="dark-mode">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
<title>Map</title>
|
||
|
|
|
||
|
|
<script src="../../3rdparty/highlight/highlight.pack.js"></script>
|
||
|
|
|
||
|
|
<link rel="stylesheet" href="../../../fonts/material-icon-font/material-icons.css">
|
||
|
|
<link rel='stylesheet' href='../../3rdparty/highlight/styles/vs2015.css'>
|
||
|
|
<link rel='stylesheet' href='../../../css/doctest.css'>
|
||
|
|
|
||
|
|
<script src="../../../dist/iwmlib.3rdparty.js"></script>
|
||
|
|
<script src="../../../dist/iwmlib.js"></script>
|
||
|
|
<script src="../../../dist/iwmlib.pixi.js"></script>
|
||
|
|
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.controls {
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body onload="Doctest.run()">
|
||
|
|
<h1>Map</h1>
|
||
|
|
<p>
|
||
|
|
The Map class shows a geographical map using a scatter element.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2 id="DeepZoomMap">DeepZoomMap</h2>
|
||
|
|
<p>Usually a DeepZoomMap will be used to display maps. It uses a <a
|
||
|
|
href="../deepzoom/deepzoom.html">DeepZoomImage</a> to display the map in different resolutions depending on
|
||
|
|
the zoom factor.</p>
|
||
|
|
<canvas id="deepZoomCanvas">
|
||
|
|
|
||
|
|
</canvas>
|
||
|
|
<script>
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|
||
|
|
<script class="doctest" data-collapsible data-collapsed data-title="Script">
|
||
|
|
|
||
|
|
|
||
|
|
(function () {
|
||
|
|
|
||
|
|
// Create the mapapp.
|
||
|
|
let app = window.DeepZoomMapApp = new MapApp({
|
||
|
|
view: deepZoomCanvas,
|
||
|
|
coordsLogging: true,
|
||
|
|
width: 512,
|
||
|
|
height: 512
|
||
|
|
})
|
||
|
|
|
||
|
|
|
||
|
|
// Load or specify a tilesConfig as required by the DeepZoomImage.
|
||
|
|
const tilesConfig = {
|
||
|
|
"tileSize": 256,
|
||
|
|
"format": "png",
|
||
|
|
"overlap": 0,
|
||
|
|
"type": "map",
|
||
|
|
"height": 1024,
|
||
|
|
"width": 1024,
|
||
|
|
"path": "../assets/maps/osm",
|
||
|
|
"urlTileTemplate": "{path}/{level}/{row}/{column}.{format}"
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// Create a projection.
|
||
|
|
const projection = new Projection.Mercator()
|
||
|
|
|
||
|
|
// Create a map data object.
|
||
|
|
const osmDeepZoomMapData = new DeepZoomMapData(projection, tilesConfig, { app })
|
||
|
|
|
||
|
|
// Create the map
|
||
|
|
const osmMap = new DeepZoomMap(osmDeepZoomMapData, tilesConfig)
|
||
|
|
|
||
|
|
// Add the map to the app.
|
||
|
|
app.addMap("osm", osmMap)
|
||
|
|
|
||
|
|
// Run the app when at least one map is set.
|
||
|
|
app.setup().run()
|
||
|
|
})()
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<h2 id="imageMap">ImageMap</h2>
|
||
|
|
<p>Single images can be also used as maps. This can be useful for examples, debugging purposes or other use-cases
|
||
|
|
when there are no different tiles required or available.</p>
|
||
|
|
<canvas id="imageMapCanvas">
|
||
|
|
|
||
|
|
</canvas>
|
||
|
|
<script>
|
||
|
|
</script>
|
||
|
|
<script class="doctest" data-collapsible data-collapsed data-title="Script">
|
||
|
|
|
||
|
|
|
||
|
|
(function () {
|
||
|
|
|
||
|
|
// Create the mapapp.
|
||
|
|
let app = window.ImageMapApp = new MapApp({
|
||
|
|
view: imageMapCanvas,
|
||
|
|
coordsLogging: true,
|
||
|
|
width: 512,
|
||
|
|
height: 512
|
||
|
|
})
|
||
|
|
|
||
|
|
const mapTexture = "../assets/maps/wikimedia-world-robinson/2000px-BlankMap-World.png"
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// The images used by the image map need to be loaded beforehand.
|
||
|
|
// Therefore this loading step is required.
|
||
|
|
app.loadSprites([mapTexture], sprites => spritesLoaded(sprites), {
|
||
|
|
resolutionDependent: false
|
||
|
|
})
|
||
|
|
|
||
|
|
spritesLoaded = (sprites) => {
|
||
|
|
|
||
|
|
// Create a projection.
|
||
|
|
const projection = new Projection.Robinson(10)
|
||
|
|
|
||
|
|
// Create a map data object.
|
||
|
|
let mapData = new MapData(projection)
|
||
|
|
|
||
|
|
// Create the map
|
||
|
|
let imageMap = new ImageMap(sprites.get(mapTexture), mapData)
|
||
|
|
|
||
|
|
|
||
|
|
// Add the map to the app.
|
||
|
|
app.addMap("europe", imageMap)
|
||
|
|
|
||
|
|
|
||
|
|
// Run the app when at least one map is set.
|
||
|
|
app.setup().run()
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
})()
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|