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

Improved doctests.

Browse Source
This commit is contained in:
Severin Opel
2019-11-05 16:02:27 +01:00
parent 0a30712e31
commit ef16f2b12b
5 changed files with 184 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/pixi/maps/overlay.html
+35 -24
View File
@@ -5,8 +5,13 @@
<meta charset="UTF-8" />
<title>Overlay</title>
<link rel='stylesheet' href='../../3rdparty/highlight/styles/default.css'>
<link rel='stylesheet' href='../../../css/doctest.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>
<script src="../../../dist/iwmlib.js"></script>
@@ -27,14 +32,14 @@
</head>
<body onload="Doctest.run()">
<h1>Overlay</h1>
<p>
<h1 class="title">Overlay</h1>
<p class="description">
The overlayclass creates a convenient way to create and design
complex map overlays.
</p>
<canvas id="view"> </canvas>
<canvas id="view" class="center"> </canvas>
<script>
window.pointApp = window.app = new MapApp({
let app = new MapApp({
view,
width: 512,
height: 512,
@@ -42,8 +47,25 @@
})
var osmworld = '../assets/maps/osm/0/0/0.png'
let worlOSMData = new MapData(new Projection.Mercator())
function setupMap(textures) {
// Create the map!
let map = new ImageMap(
new PIXI.Sprite(textures.get(osmworld)),
worlOSMData
)
// Setup the map in the mapapp.
app.setMap('osm', map)
app.setup().run()
}
</script>
<script class="doctest">
<script class="doctest" data-collapsible data-collapsed data-title="Overlay Data">
/**
* To create an overlay you just need to create a JSON file.
@@ -178,6 +200,9 @@
}
]
}
</script>
<script class="doctest" data-collapsible data-title="Overlay">
let overlay = new Overlay(exampleOverlayJSON)
@@ -189,28 +214,14 @@
let overlayTextures = overlay.findAllTextures()
let list = [osmworld].concat(overlayTextures)
pointApp.loadTextures(list, textures => texturesLoaded(textures), {
app.loadTextures(list, textures => texturesLoaded(textures), {
resolutionDependent: false
})
function texturesLoaded(textures) {
/** When all textures are loaded .... */
// Create the map!
let worldOSMMap = new ImageMap(
new PIXI.Sprite(textures.get(osmworld)),
worlOSMData,
{
onLoaded: () => {
worldOSMMap.setFrame(frame)
}
}
)
// Setup the map in the mapapp.
pointApp.setMap('osm', worldOSMMap)
pointApp.setup().run()
setupMap(textures)
//Retrieve all overlay textures.
overlay.selectTextures(textures)
@@ -236,7 +247,7 @@
// When placed on the mapLayer, the PIXI Graphic elements, that
// reside inside GeoGraphic Objects are placed automatically at the
// correct coordinates of the map.
pointApp.mapLayer.addLayer(exampleOverlayGeoLayer)
app.mapLayer.addLayer(exampleOverlayGeoLayer)
// Just a helper function that clears the popups and removes