iwmlib/lib/pixi/maps/mapapp.html

164 lines
5.8 KiB
HTML

<!DOCTYPE html>
<html lang="en" class="dark-mode">
<head>
<meta charset="UTF-8" />
<title>MapApp</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>MapApp
</h1>
<p>
This class extends the PIXIApp to simplify the process of rendering Maps in the canvas. For that reason, it
contains useful functions for an easier handling of maps in the canvas.
</p>
<canvas id="canvas"></canvas>
<div id="mapControl"></div>
<div id="cityControl" class="controls"></div>
<p><strong>WHAT TO SEE:</strong> The map should focus Paris.</p>
<script>
let osmConfig = {
projection: 'mercator',
type: 'deepzoom',
tiles: {
tileSize: 256,
format: 'png',
overlap: 0,
type: 'map',
height: 1024,
width: 1024,
path: '../assets/maps/osm',
urlTileTemplate: '{path}/{level}/{row}/{column}.{format}'
}
}
let testConfig = {
projection: 'mercator',
type: 'deepzoom',
tiles: {
tileSize: 128,
format: 'jpg',
overlap: 0,
type: 'map',
height: 4096,
width: 4096,
path: '../assets/maps/test',
urlTileTemplate: '{path}/{level}/{row}/{column}.{format}'
}
}
</script>
<script class="doctest">
let capitals = {
london: { x: 51.5, y: -0.083333 },
rome: { x: 41.9, y: 12.483333 },
madrid: { x: 40.4, y: -3.683333 },
paris: { x: 48.833986, y: 2.346989 }
}
// You may define a focus point ...
let focus = capitals.paris
// ... and a zoom level.
let zoom = 1
// Name has to be app (like all other PIXIApps).
const app = (window.app = new MapApp({
focus,
zoom,
view: canvas,
coordsLogging: true,
width: 512,
height: 512
}))
// As map an image of europe is used.
let europe = '../assets/maps/pixabay/europe.jpg'
//Preload all required sprites for the image map.
app.loadSprites([europe], (sprites) => ready(sprites), {
resolutionDependent: false
})
// The map projection object contains informations,
// how the displayed map has to be interpreted.
// e.g. which projection is used or how the
// image is clipped.
let europeData = new MapProjection(new Projection.Mercator(), {
clip: {
min: { x: 32.863294, y: -18.58 },
max: { x: 57.467973, y: 44.277158 }
}
})
function ready(sprites) {
const cover = true
// When resources are loaded, the ImageMap can be instantiated.
let imageMap = new ImageMap(sprites.get(europe), europeData, {
coordsLogging: true,
maxScale: 1,
cover
})
let testMapProjection = new DeepZoomMapProjection(new Projection.Mercator(), testConfig.tiles, {
app
})
let testMap = new DeepZoomMap(testMapProjection, Object.assign({}, testConfig.tiles, { app }), {
cover
})
app.addMap('test', testMap)
let osmMapProjection = new DeepZoomMapProjection(new Projection.Mercator(), osmConfig.tiles, {
app
})
let deepZoomMap = new DeepZoomMap(osmMapProjection, Object.assign({}, osmConfig.tiles, { app }), {
cover
})
app.addMap('osm', deepZoomMap)
// Finally apply the map to the MapApp
app.setMap('europe', imageMap)
// The app requires a map before beeing able to run.
// So start the app here.
app.setup().run()
for (let [key, val] of Object.entries(app.mapList.maps)) {
let mapBtn = document.createElement('button')
mapBtn.innerText = key
mapBtn.addEventListener('click', () => {
app.mapLayer.changeMap(val)
})
mapControl.appendChild(mapBtn)
}
}
for (let [key, val] of Object.entries(capitals)) {
let cityBtn = document.createElement('button')
cityBtn.innerText = key
cityBtn.addEventListener('click', () => {
app.mapLayer.map.moveTo(val)
})
cityControl.appendChild(cityBtn)
}
</script>
</body>
</html>