IWMBrowser/iwmlib
IWMBrowser/iwmlib
4
0
Fork 0
Code Issues 6 Pull Requests Releases Wiki Activity

Fixed map doctest.

Browse Source
This commit is contained in:
Severin Opel 2019-11-11 12:34:43 +01:00
parent ef16f2b12b
commit 58cbd44a7b
7 changed files with 394 additions and 330 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
lib/pixi/assets/maps/osm/tilesConfig.json Normal file
View File

@ -0,0 +1,14 @@
{
"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}"
}
}

12
lib/pixi/assets/maps/pixabay/mapdata.json Normal file
View File

@ -0,0 +1,12 @@
{
"clip": {
"min": {
"x": 32.863294,
"y": -18.58
},
"max": {
"x": 57.467973,
"y": 44.277158
}
}
}

10
lib/pixi/maps/geolayer.js
View File

@ -163,6 +163,10 @@ export class MapLayer extends GeoLayer {
const min = visibility.min || 0
const max = visibility.max || Number.MAX_VALUE
// TODO
// Currently I dont know what elemnts was.
// We just log an error and resolve this on a later point.
if (this.elements) {
if (zoom > min && zoom < max) {
this.elements.forEach(it => (it.visible = true))
@ -184,6 +188,9 @@ export class MapLayer extends GeoLayer {
} else {
this.elements.forEach(it => (it.visible = false))
}
}else{
console.error("DEBUG: Elements was not defined.")
}
}
}
@ -236,6 +243,8 @@ export class MapLayer extends GeoLayer {
useScatterAsContainer = true // If set to false, the normal container is used. This is necessary when using submaps and the container need to be a RigidContainer.*/
) {
if (map instanceof GeoMap) {
console.log("Change map to: " , map)
let oldMap = this.map
if (oldMap) oldMap.unload()
@ -243,6 +252,7 @@ export class MapLayer extends GeoLayer {
this.map.load()
this.scatterContainer.addChild(this.map.image)
console.log(this.map.image.parent)
map.image.addChild(this.displayObject)
this.mapview.update(this.map)

77
lib/pixi/maps/map.js
View File

@ -130,11 +130,8 @@ export class GeoMap {
}
unload() {
console.log('unload', this, this.image)
if (this.image) {
console.log('removeScatter')
if (this.image.parent) {
console.log('Remove from parent')
this.image.parent.removeChild(this.image)
}
this.image.scatter = null
@ -383,6 +380,7 @@ export class GeoMap {
if (GeoMap._validateJson(json, error)) {
for (let [mapname, data] of Object.entries(json)) {
maps[mapname] = GeoMap._createMap(data)
maps[mapname].name = mapname
}
} else console.error('Could not validate JSON: ' + error.message)
@ -556,7 +554,6 @@ export class DeepZoomMap extends GeoMap {
*/
load(container = null, scatter = null) {
this.info = new DeepZoomInfo(this.tilesConfig)
console.log('APP:', this.mapdata.app)
let image = new DeepZoomImage(this.info, {
app: this.mapdata.app,
alpha: this.alpha,
@ -614,7 +611,6 @@ export class DeepZoomMap extends GeoMap {
// Don't scale beyond boundaries.
if (this.maxScale) targetScale = Math.min(this.maxScale, targetScale)
if (this.minScale) targetScale = Math.max(targetScale, this.minScale)
this.image.scatter.requestScale(targetScale)
@ -626,15 +622,12 @@ export class DeepZoomMap extends GeoMap {
let containerCenter
if (this.frame) {
containerCenter = this.getFrame().localCenter
//console.log("HAS FRAME: ", containerCenter)
containerCenter = this.getFrame().center
} else {
containerCenter = {
x: this.image.parent.width / 2,
y: this.image.parent.height / 2
}
//console.log("GET CONTAINER CENTER")
}
//Calculate the delta depending on image position and center the
@ -643,7 +636,6 @@ export class DeepZoomMap extends GeoMap {
x: containerCenter.x - point.x * this.image.scatter.scale - this.scatter.position.x,
y: containerCenter.y - point.y * this.image.scatter.scale - this.scatter.position.y
}
// console.log("MOVE TO: " , this.image.scatter.translatable,point, delta)
if (animate > 0) {
let last = 0
@ -694,25 +686,6 @@ export class DeepZoomMap extends GeoMap {
viewport: this.viewport
})
//TODO: If frame is not set, the map does not work anymore.
//map.load(container, scatter)
// this.image.parent.children.forEach(child=>{
// if(child instanceof PIXI.DisplayObject){
// if(child instanceof PIXI.Graphics){
// // let clone = child.clone()
// // const position = child.position
// // clone.position.set(position.x, position.y)
// // map.addChild(clone)
// // console.log(map.mapLayer)
// }else console.log("DisplayObject is not yet implemented for cloning.", child)
// }else console.error("Not implemented object to clone: ", child)
// })
return map
}
@ -765,7 +738,6 @@ export class ImageMap extends GeoMap {
load(container = null, scatter = null) {
super.load(this.sprite, container, scatter)
console.log('LOADED')
this.image.alpha = this.alpha
this.image.interactive = true
}
@ -785,19 +757,9 @@ export class ImageMap extends GeoMap {
})
map.load(container, scatter)
console.log(map.image)
return map
}
// transformed(e) {
// for (let key in this.overlays) {
// this.overlays[key].forEach((overlay) => {
// overlay.sprite.scale.x = overlay.scale / e.scale
// overlay.sprite.scale.y = overlay.scale / e.scale
// })
// }
// }
/**
*
*
@ -807,37 +769,6 @@ export class ImageMap extends GeoMap {
* @memberof ImageMap
*/
moveTo(coordinates, zoom = null, { animate = 0 } = {}) {
// console.log('Coordinates: ', coordinates)
// if (zoom) {
// this.image.scatter.requestScale(zoom)
// }
// if (coordinates) {
// //Get pixel position of lat lang values
// let offset = Points.multiplyScalar(this.coordinatesToPoint(coordinates), this.scatter.scale)
// let frame = this.getFrame()
// console.log(frame)
// //Calculate the delta depending on image position and center the
// // desired position in the frame.
// let delta = {
// x: frame.center.x - offset.x - this.scatter.position.x,
// y: frame.center.y - offset.y - this.scatter.position.y
// }
// console.log('Move to: ', offset, frame, delta)
// if (this.image) {
// if (animate > 0) {
// console.log(animate)
// //TODO Replace this with a more robus manipulation method (RequestMovement + animation)
// this.image.scatter.move(delta, { animate })
// //Requesting the transform dhoul be okay. Maybe also replace with an request mehtod.
// } else this.image.scatter.transform(delta, /*ratio*/ 1, 0, { x: 0, y: 0 })
// } else console.error('Imge was not loaded yet.')
// }
if (this.image.scatter == null) {
return
@ -867,14 +798,11 @@ export class ImageMap extends GeoMap {
let containerCenter
if (this.frame) {
containerCenter = this.getFrame().localCenter
//console.log("HAS FRAME: ", containerCenter)
} else {
containerCenter = {
x: this.image.parent.width / 2,
y: this.image.parent.height / 2
}
//console.log("GET CONTAINER CENTER")
}
//Calculate the delta depending on image position and center the
@ -884,7 +812,6 @@ export class ImageMap extends GeoMap {
x: containerCenter.x - point.x * this.image.scatter.scale - this.scatter.position.x,
y: containerCenter.y - point.y * this.image.scatter.scale - this.scatter.position.y
}
// console.log("MOVE TO: " , this.image.scatter.translatable,point, delta)
if (animate > 0) {
let last = 0

61
lib/pixi/maps/mapapp.html
View File

@ -1,11 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" class="dark-mode">
<head>
<meta charset="UTF-8" />
<title>MapApp</title>
<link rel='stylesheet' href='../../3rdparty/highlight/styles/default.css'>
<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>
@ -28,8 +31,41 @@
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 },
@ -81,12 +117,33 @@
cover: false
})
let testMapData = new DeepZoomMapData(new Projection.Mercator(), testConfig.tiles, {
app
})
let testMap = new DeepZoomMap(testMapData, Object.assign({}, testConfig.tiles, { app }), { cover: false })
app.addMap("test", testMap)
let osmMapData = new DeepZoomMapData(new Projection.Mercator(), osmConfig.tiles, {
app
})
let deepZoomMap = new DeepZoomMap(osmMapData, Object.assign({}, osmConfig.tiles, { app }), { cover: false })
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)) {

30
lib/pixi/maps/mapapp.js
View File

@ -1,6 +1,5 @@
import PIXIApp from '../app.js'
import { CoordinateDisplay } from '../../../../js/display.js'
import { DOMLayer, PIXILayer } from '../../../../src/layers/js/layer.js'
import { MapLayer } from './geolayer.js'
import { RigidScatterContainer } from './scatter.js'
import { EventHandler } from './utils.js'
@ -111,11 +110,6 @@ export default class MapApp extends PIXIApp {
if (element.refreshFps) fpsDisplay = element
})
this.pixiLayer = new PIXILayer({
name: 'Pixi Root',
container: this.scene
})
this._setupMapLayer()
this.ui = new PIXI.Container()
@ -203,9 +197,7 @@ export default class MapApp extends PIXIApp {
}
addMap(key, map) {
if (this.mapLayer != null) this.mapLayer.mapList.add(key, map)
if (this.mapList) this.mapList.add(key, map)
//This is necessary as there is a state, when the mapList
else console.error('Cannot access mapLayer. It was not initialized yet.')
}
@ -224,19 +216,6 @@ export default class MapApp extends PIXIApp {
lastMap.flushHandlers()
}
/**
* TODO: A problem is that the map layer has no container
* on its own and it lives in the ScatterContainer.
* Here we guarantee, that the layer order is as it
* is defined in the layers.
*/
// this.pixiLayer.layers.forEach(layer => {
// if (layer !== this.mapLayer) {
// layer.parent.container.removeChild(layer.container)
// layer.parent.container.addChild(layer.container)
// }
// })
this.map.onTransform.add(this.transformed.bind(this))
this.transformed()
@ -270,15 +249,6 @@ export default class MapApp extends PIXIApp {
this.overlayElements.set(layer, obj)
}
place(layer) {
if (layer instanceof PIXILayer) {
this.pixiLayer.place(layer)
} else if (layer instanceof DOMLayer) {
this.domLayer.place(layer)
} else {
console.error('Could not add layer to ', this, layer)
}
}
addMapOverlay(layer) {
this.mapLayer.place(layer)

512
lib/pixi/maps/maps.html
View File

@ -5,7 +5,10 @@
<meta charset='UTF-8'>
<title>Maps</title>
<link rel='stylesheet' href='../../3rdparty/highlight/styles/default.css'>
<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>
@ -28,80 +31,22 @@
<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
<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 id="bigMap">
</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'>
<script class="doctest" data-title="Cover Map" data-collapsible data-collapsed>
(function () {
// Configuration of the deepzoom map.
let osmConfig = {
"projection": "mercator",
"type": "deepzoom",
@ -110,163 +55,96 @@
"format": "png",
"overlap": 0,
"type": "map",
"height": 1024,
"width": 1024,
"path": "../../examples/osm",
"height": 2048,
"width": 2048,
"path": "../assets/maps/osm",
"urlTileTemplate": "{path}/{level}/{row}/{column}.{format}"
}
}
// We may use a focuspoint. This is the point the app
// sets in center on startup.
const Berlin = { x: 52.514961, y: 13.401366 }
let zoom = 3
const app = new MapApp({
view: bigMap,
root: "../",
width: 512,
height: 512,
coordsLogging: true,
focus: Berlin,
zoom
})
let osmMapData = new DeepZoomMapData(new Projection.Mercator(), osmConfig.tiles, {
app: app
})
let deepZoomMap = new DeepZoomMap(osmMapData, Object.assign({}, osmConfig.tiles, { app: app }), { cover: true })
app.setMap("deepzoom", deepZoomMap)
app.setup().run()
return app
})()
</script>
<script>
const Berlin = { x: 52.514961, y: 13.401366 }
function createDeepZoomMap(view, opts, mapOptipns = {}) {
let osmConfig = {
"projection": "mercator",
"type": "deepzoom",
"tiles": {
"tileSize": 256,
"format": "png",
"overlap": 0,
"type": "map",
"height": 2048,
"width": 2048,
"path": "../assets/maps/osm",
"urlTileTemplate": "{path}/{level}/{row}/{column}.{format}"
}
}
const Berlin = { x: 52.514961, y: 13.401366 }
const deepZoomExampleApp = new MapApp({
view: dzi_canvas,
opts = Object.assign({
root: "../",
width: 256,
height: 256,
coordsLogging: true,
focus: Berlin
}, opts, { view })
const app = new MapApp(opts)
let osmMapData = new DeepZoomMapData(new Projection.Mercator(), osmConfig.tiles, {
app: app
})
let osmMapData = new DeepZoomMapData(new Projection.Mercator(), osmConfig.tiles,{
app:deepZoomExampleApp
})
let deepZoomMap = new DeepZoomMap(osmMapData, Object.assign({}, osmConfig.tiles, { app: app }), Object.assign({ cover: false }, mapOptipns))
let deepZoomMap = new DeepZoomMap(osmMapData, Object.assign({},osmConfig.tiles,{app:deepZoomExampleApp}), { cover: false })
deepZoomExampleApp.setMap("deepzoom", deepZoomMap)
app.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 }
app.setup().run()
return app
}
let pointApp = window.app = new MapApp({
view: canv_0,
width: 512,
height: 512,
coordsLogging: true
})
function drawLocations(locations, maplayer) {
let locationLayer = new GeoLayer(new PIXI.Container(), { name: "Location Overlay" })
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], {
for (key in locations) {
let position = new GeoPoint(locations[key], {
/**
* To style GeoGraphics, the fill has to be set in the
@ -282,15 +160,219 @@
this.graphics.endFill()
}
})
capitalLayer.place(capitalPoint)
locationLayer.addChild(position)
}
maplayer.place(capitalLayer)
capitalLayer.adapt(pointApp.map)
maplayer.addLayer(locationLayer)
}
</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' data-collapsible="true" data-collapsed data-title="Image Map">
// Create app.
let imageApp = new MapApp({
view: imagemap_canvas,
focus: Berlin,
width: 256,
height: 256,
coordsLogging: true,
})
// Specify image path.
let europe = "../assets/maps/pixabay/europe.jpg"
// The sprites of the images need to be loaded before initialization by pixi.
// Therefore this loading step is required.
imageApp.loadSprites([
europe
], (sprites) => ready(sprites), { resolutionDependent: false })
// Called when all textures are loaded.
let ready = (sprites) => {
// Define the mapdata for the map.
let europeData = new MapData(new Projection.Mercator(), {
clip: {
min: { x: 32.863294, y: -18.58 },
max: { x: 57.467973, y: 44.277158 }
}
})
// Create the map using the texture and the mapdata.
// Optionally customize the map by supplying secific options.
let imageMap = new ImageMap(sprites.get(europe), europeData, {
cover: false
})
// Set the map inside the app.
imageApp.setMap("europe", imageMap)
}
// Setup and run the app.
imageApp.setup().run()
</script>
<script class='doctest' data-collapsible="true" data-collapsed data-title="Deepzoom Map">
(function () {
// Create or (more commonly) load the data file for the map.
let mapConfig = {
"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}"
}
}
// Create the app by providing the canvas element.
const app = new MapApp({
view: dzi_canvas,
root: "../",
width: 256,
height: 256,
coordsLogging: true,
focus: Berlin
})
// Create the deepzoomdata.
let osmMapData = new DeepZoomMapData(new Projection.Mercator(), mapConfig.tiles, {
app
})
// Create the app.
let deepZoomMap = new DeepZoomMap(osmMapData, Object.assign({}, mapConfig.tiles, { app }), { cover: false })
// Set the map in the app.
app.setMap("deepzoom", deepZoomMap)
// Setup and run the app.
app.setup().run()
})()
</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="canvasFrameTest"></canvas>
<div class="controls">
<button id="nextCapital">Next Capital</button>
<input type="number" name="0" id="animationTime" min="0" value="0.35">
<span id="msg"></span>
</div>
<script class="doctest">
(function () {
// Create the app.
let app = createDeepZoomMap(canvasFrameTest, {
width: 512
})
let 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 }
}
// For debugging purposes we draw a visual
// representation of the frame.
let frame = new PIXI.Graphics()
frame.beginFill(0xFFFFFF, 0.5)
const border = 4
frame.lineStyle(border, 0xff0000, 1)
frame.drawRect(border / 2, border / 2, app.width / 2, app.height / 2)
const focusWidth = 4
frame.endFill()
frame.drawCircle(app.width / 4 + border / 2, app.height / 4 + border / 2, 10)
// For demonstration the frame object is a scatter
// element.
new DisplayObjectScatter(frame, app.renderer)
frame.interactive = true
frame.scatter.position = { x: 50, y: 50 }
// We set the frame to the map.
// Note: when using multiple maps, you should update the
// frame on every mapCHange
app.mapLayer.map.setFrame(frame)
app.scene.addChild(frame)
drawLocations(capitals, app.mapLayer)
// Add change focus event.
let visiting = 0
nextCapital.addEventListener("click", () => {
let keys = Object.keys(capitals)
visiting = (++visiting) % keys.length
let key = keys[visiting]
app.map.moveTo(capitals[key], null, { animate: parseFloat(animationTime.value) })
msg.innerHTML = "Visiting " + key + "."
})
})()
</script>
<script>
// function point_ready(sprites) {
// let maps_0 = ["world", "world2"]
@ -316,23 +398,15 @@
// pointApp.pixiLayer.place(frame)
placeCapitals(pointApp.mapLayer)
// placeCapitals(pointApp.mapLayer)
let active_0 = 0
swapBtn_0.addEventListener("click", () => {
active_0++
pointApp.selectMap(maps_0[active_0 % maps_0.length])
})
// 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>