iwmlib/lib/pixi/maps/maps.html

340 lines
10 KiB
HTML
Raw Normal View History

<!doctype html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title>Maps</title>
<link rel='stylesheet' href='../../3rdparty/highlight/styles/default.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>
.inline-showcase {
display: flex
}
.map-example {
display: inline-block;
width: 256px;
margin: 5px;
}
</style>
</head>
<body onload='Doctest.run()'>
<h1>Maps</h1>
<p>Maps represent a geographical image in a PIXI.Application. Preferably in a MapApp to have more convenient methods to
handle the maps.</p>
<h2>Cover Test</h2>
<p>Usually maps should cover the whole app, or a window inside the app. Therefore they support a cover option.
This option allows the
</p>
<canvas id="big_map">
</canvas>
<script>
// let iwm = { x: 48.52454, y: 9.05468 }
// let luftbildMap = new DeepZoomMap(luftbildData, luftbildConfig, { alpha: 0.8, cover: true, onTransform: transformed.bind(this) })
// const app = window.app = new MapApp({
// transparent: false,
// backgroundColor: 0x00ffff,
// view: big_map,
// root: "../",
// width: 512,
// height: 512,
// coordsLogging: true,
// focus: iwm,
// zoom: 18
// })
// app.setup().run()
// let markerLayer = new GeoLayer({ name: "Marker Layer" })
// let iwmMarker = new GeoPoint(iwm)
// let marker = new PIXI.Graphics()
// marker.beginFill(0xFF6900)
// marker.drawCircle(0, 0, 1)
// marker.endFill()
// iwmMarker.graphics.addChild(marker)
// markerLayer.place(iwmMarker)
// app.mapLayer.place(markerLayer)
// app.setMap("luftbild", luftbildMap)
// function transformed(e) {
// markerLayer.adapt(app.map)
// }
</script>
<h2>Map Types</h2>
<div class="inline-showcase">
<div class="map-example">
<canvas id="imagemap_canvas"></canvas>
<h3>Image Map</h3>
<p>A map, that is represented by a single image.</p>
</div>
<div class="map-example">
<canvas id="dzi_canvas"></canvas>
<h3>Deep Zoom Map</h3>
<p>The map representation is a DeepZoomImage, that can be scaled much more deeply, without losing quality by increasing
the amount of tiles, that represent the image.</p>
<p>
You should see a map of the world with a set of cities highlighted with dots. When pressing the button all views should jump
to the same point.
</p>
</div>
</div>
<script class='doctest'>
let osmConfig = {
"projection": "mercator",
"type": "deepzoom",
"tiles": {
"tileSize": 256,
"format": "png",
"overlap": 0,
"type": "map",
"height": 1024,
"width": 1024,
"path": "../../examples/osm",
"urlTileTemplate": "{path}/{level}/{row}/{column}.{format}"
}
}
const Berlin = { x: 52.514961, y: 13.401366 }
const deepZoomExampleApp = new MapApp({
view: dzi_canvas,
root: "../",
width: 256,
height: 256,
coordsLogging: true,
focus: Berlin
})
let osmMapData = new DeepZoomMapData(new Projection.Mercator(), osmConfig.tiles,{
app:deepZoomExampleApp
})
let deepZoomMap = new DeepZoomMap(osmMapData, Object.assign({},osmConfig.tiles,{app:deepZoomExampleApp}), { cover: false })
deepZoomExampleApp.setMap("deepzoom", deepZoomMap)
deepZoomExampleApp.setup().run()
console.log(deepZoomMap)
// let imageApp = new MapApp({
// view: imagemap_canvas,
// width: 256,
// height: 256,
// focus: constanceRhineBridge,
// coordsLogging: true,
// })
// imageApp.setup().run()
// let germany = "./examples/germany.jpg"
// imageApp.loadSprites([
// germany
// ], (sprites) => ready(sprites), { resolutionDependent: false })
// let ready = (sprites) => {
// let imageMap = new ImageMap(sprites.get(germany), germanyData,{
// cover: false
// })
// imageApp.setMap("germany", imageMap)
// }
// TODO Fix this when 'stadtplan' is available again.
// let stadtplanConfig = tilesConfig["luftbild_2017"]
// stadtplanConfig.path = "../" + stadtplanConfig.path
// let dziData = new MapData(MERCATOR, {
// clip: {
// "min": { x: 48.464967, y: 8.979732 },
// "max": { x: 48.5674, y: 9.2817 }
// }
// })
</script>
<h1>Movement</h1>
<p>
Its crucial to focus certain points in a map application. The following tests the behavioud of maps inside a mapapp and maps
inside of windows.
</p>
</ul>
<h2>Map Frame</h2>
<p>
The map's frame specifies the stage of the map. When moving to the focus point normally, the map focuses in the center, the
frame defines the new area, the map will be centered in. This is important when trying to mask a map.
</p>
<canvas id="canv_0"></canvas>
<div class="controls">
<button id="swapBtn_0">Change Map</button>
<button id="nextCapital">Next Capital</button>
<input type="number" name="0" id="animationTime" min="0" value="0.35">
<span id="msg"></span>
</div>
<script>
let visiting = 0
capitals = {
abidjan: { x: 5.349470, y: -4.006472 },
berlin: { x: 52.525430, y: 13.385291 },
canberra: { x: -35.282025, y: 149.128648 },
capetown: { x: -33.925448, y: 18.416962 },
moscow: { x: 55.750892, y: 37.622799 },
washington: { x: 38.895650, y: -77.031407 },
rio: { x: -22.871400, y: -43.280490 },
tokio: { x: 35.696278, y: 139.731366 }
}
let pointApp = window.app = new MapApp({
view: canv_0,
width: 512,
height: 512,
coordsLogging: true
})
let movementMap = new DeepZoomMap(osmMapData, Object.assign({},osmConfig.tiles,{app:pointApp}), { cover: false })
pointApp.setMap("deepzoom", movementMap)
pointApp.setup().run()
// var osmworld = "examples/world_square.png"
// var world2 = "examples/world.jpg"
// let worlOSMdData = new MapData(MERCATOR)
// let world2Data = new MapData(MERCATOR, {
// translate: { x: 0, y: -11.035417 },
// clip: {
// min: { x: -69.870531, y: -180 },
// max: { x: 85, y: 180 }
// }
// })
// // The sprites of image maps should be loaded by the
// // apps resources loader.
// pointApp.loadSprites([
// osmworld,
// world2
// ], (sprites) => point_ready(sprites), { resolutionDependent: false })
let frame = new PIXI.Graphics()
frame.beginFill(0xFFFFFF, 0.5)
const border = 4
frame.lineStyle(border, 0xff0000, 0.8)
frame.drawRect(border / 2, border / 2, pointApp.width / 2, pointApp.height / 2)
const focusWidth = 4
frame.endFill()
frame.drawCircle(pointApp.width / 4 + border / 2, pointApp.height / 4 + border / 2, 10)
frame.interactive = true
new DisplayObjectScatter(frame)
frame.scatter.position = { x: 50, y: 50 }
function placeCapitals(maplayer){
let capitalLayer = new GeoLayer({ name: "Capital Overlay" })
for (key in capitals) {
let capitalPoint = new GeoPoint(capitals[key], {
/**
* To style GeoGraphics, the fill has to be set in the
* onDraw callback.
*
* Note: GeoPoints are the only GeoGraphic with no
* initial geometry attached. These have to be drawn to
* the graphics object manually.
*/
onDraw: function () {
this.graphics.beginFill(0xFF0000)
this.graphics.drawCircle(0, 0, 5)
this.graphics.endFill()
}
})
capitalLayer.place(capitalPoint)
}
maplayer.place(capitalLayer)
capitalLayer.adapt(pointApp.map)
}
</script>
<script class="doctest">
// function point_ready(sprites) {
// let maps_0 = ["world", "world2"]
// let sprite = sprites.get(osmworld)
// let worldOSMMap = new ImageMap(sprite, worlOSMdData, {
// cover: false,
// onLoaded: () => {
// worldOSMMap.setFrame(frame)
// }
// })
// pointApp.setMap(maps_0[0], worldOSMMap)
// let world2Map = new ImageMap(sprites.get(world2), world2Data, {
// cover: false,
// startScale: 1,
// onLoaded: function () {
// this.setFrame(frame)
// }
// })
// pointApp.addMap(maps_0[1], world2Map)
// pointApp.pixiLayer.place(frame)
placeCapitals(pointApp.mapLayer)
let active_0 = 0
swapBtn_0.addEventListener("click", () => {
active_0++
pointApp.selectMap(maps_0[active_0 % maps_0.length])
})
nextCapital.addEventListener("click", () => {
let keys = Object.keys(capitals)
visiting = (++visiting) % keys.length
let key = keys[visiting]
console.log(key)
pointApp.map.moveTo(capitals[key], null, { animate: parseFloat(animationTime.value) })
msg.innerHTML = "Visiting " + key + "."
})
// }
</script>
</body>
</html>