<!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><a href="../../index.html">lib.</a><a href="../index.html">pixi.</a><a href="index.html">maps.</a>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 osmDeepZoomMapProjection = new DeepZoomMapProjection(projection, tilesConfig, { app })
// Create the map
const osmMap = new DeepZoomMap(osmDeepZoomMapProjection, 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 mapProjection = new MapProjection(projection)
// Create the map
let imageMap = new ImageMap(sprites.get(mapTexture), mapProjection)
// 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>