iwmlib/lib/pixi/maps/map.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>