Fixed map doctest.

lib/pixi/assets/maps/osm/tilesConfig.json

@@ -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}"
+    }
+}

lib/pixi/assets/maps/pixabay/mapdata.json

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

lib/pixi/maps/geolayer.js

@@ -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)

lib/pixi/maps/map.js

@@ -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
+                containerCenter = this.getFrame().center
-                //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
@@ -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

lib/pixi/maps/mapapp.html

@@ -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)) {

lib/pixi/maps/mapapp.js

@@ -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)

lib/pixi/maps/maps.html

@@ -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 }
+    <script class="doctest" data-title="Cover Map" data-collapsible data-collapsed>
-
+        (function () {
-       
-        
-
-
-        // 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'>  
 
+            // Configuration of the deepzoom map.
             let osmConfig = {
                 "projection": "mercator",
                 "type": "deepzoom",
@@ -110,163 +55,96 @@
                     "format": "png",
                     "overlap": 0,
                     "type": "map",
-            "height": 1024,
+                    "height": 2048,
-            "width": 1024,
+                    "width": 2048,
-            "path": "../../examples/osm",
+                    "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,{
+            let deepZoomMap = new DeepZoomMap(osmMapData, Object.assign({}, osmConfig.tiles, { app: app }), Object.assign({ cover: false }, mapOptipns))
-            app:deepZoomExampleApp
-        })
 
-        let deepZoomMap = new DeepZoomMap(osmMapData, Object.assign({},osmConfig.tiles,{app:deepZoomExampleApp}), { cover: false })
+            app.setMap("deepzoom", deepZoomMap)
-
-        deepZoomExampleApp.setMap("deepzoom", deepZoomMap)
 
 
-        deepZoomExampleApp.setup().run()
+            app.setup().run()
-        console.log(deepZoomMap)
+            return app
-
-
-        // 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({
+        function drawLocations(locations, maplayer) {
-            view: canv_0,
+            let locationLayer = new GeoLayer(new PIXI.Container(), { name: "Location Overlay" })
-            width: 512,
-            height: 512,
-            coordsLogging: true
-        })
 
-        let movementMap = new DeepZoomMap(osmMapData, Object.assign({},osmConfig.tiles,{app:pointApp}), { cover: false })
+            for (key in locations) {
-
+                let position = new GeoPoint(locations[key], {
-        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
@@ -282,15 +160,219 @@
                         this.graphics.endFill()
                     }
                 })
-                capitalLayer.place(capitalPoint)
+
+                locationLayer.addChild(position)
             }
 
-            maplayer.place(capitalLayer)
+            maplayer.addLayer(locationLayer)
-            capitalLayer.adapt(pointApp.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' 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
+            // let active_0 = 0
-            swapBtn_0.addEventListener("click", () => {
+            // swapBtn_0.addEventListener("click", () => {
-                active_0++
+            //     active_0++
-                pointApp.selectMap(maps_0[active_0 % maps_0.length])
+            //     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>