2019-11-25 18:04:11 +01:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en" class="dark-mode">
|
2023-05-09 13:25:39 +02:00
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
|
<title>Map</title>
|
2019-11-25 18:04:11 +01:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
<script src="../../3rdparty/highlight/highlight.pack.js"></script>
|
2019-11-25 18:04:11 +01:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
<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" />
|
2019-11-25 18:04:11 +01:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
<script src="../../../dist/iwmlib.3rdparty.js"></script>
|
|
|
|
|
<script src="../../../dist/iwmlib.js"></script>
|
|
|
|
|
<script src="../../../dist/iwmlib.pixi.js"></script>
|
2019-11-25 18:04:11 +01:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
<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}'
|
|
|
|
|
}
|
2019-11-25 18:04:11 +01:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
// Create a projection.
|
|
|
|
|
const projection = new Projection.Mercator()
|
2019-11-25 18:04:11 +01:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
// Create a map data object.
|
|
|
|
|
const osmDeepZoomMapProjection = new DeepZoomMapProjection(projection, tilesConfig, { app })
|
2019-11-25 18:04:11 +01:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
// Create the map
|
|
|
|
|
const osmMap = new DeepZoomMap(osmDeepZoomMapProjection, tilesConfig)
|
2019-11-25 18:04:11 +01:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
// Add the map to the app.
|
|
|
|
|
app.addMap('osm', osmMap)
|
2019-11-25 18:04:11 +01:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
// 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 () {
|
2019-11-25 18:04:11 +01:00
|
|
|
// Create the mapapp.
|
2023-05-09 13:25:39 +02:00
|
|
|
let app = (window.ImageMapApp = new MapApp({
|
2019-11-25 18:04:11 +01:00
|
|
|
view: imageMapCanvas,
|
|
|
|
|
coordsLogging: true,
|
|
|
|
|
width: 512,
|
|
|
|
|
height: 512
|
2023-05-09 13:25:39 +02:00
|
|
|
}))
|
2019-11-25 18:04:11 +01:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
const mapTexture = '../assets/maps/wikimedia-world-robinson/2000px-BlankMap-World.png'
|
2019-11-25 18:04:11 +01:00
|
|
|
|
|
|
|
|
// The images used by the image map need to be loaded beforehand.
|
|
|
|
|
// Therefore this loading step is required.
|
2023-05-09 13:25:39 +02:00
|
|
|
app.loadSprites([mapTexture], (sprites) => spritesLoaded(sprites), {
|
2019-11-25 18:04:11 +01:00
|
|
|
resolutionDependent: false
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
spritesLoaded = (sprites) => {
|
|
|
|
|
// Create a projection.
|
|
|
|
|
const projection = new Projection.Robinson(10)
|
|
|
|
|
|
|
|
|
|
// Create a map data object.
|
2019-12-11 16:45:26 +01:00
|
|
|
let mapProjection = new MapProjection(projection)
|
2019-11-25 18:04:11 +01:00
|
|
|
|
|
|
|
|
// Create the map
|
2019-12-11 16:45:26 +01:00
|
|
|
let imageMap = new ImageMap(sprites.get(mapTexture), mapProjection)
|
2019-11-25 18:04:11 +01:00
|
|
|
|
|
|
|
|
// Add the map to the app.
|
2023-05-09 13:25:39 +02:00
|
|
|
app.addMap('europe', imageMap)
|
2019-11-25 18:04:11 +01:00
|
|
|
|
|
|
|
|
// Run the app when at least one map is set.
|
|
|
|
|
app.setup().run()
|
|
|
|
|
}
|
|
|
|
|
})()
|
2023-05-09 13:25:39 +02:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
