Added minimal navigation breadcrumbs to doctests.
This commit is contained in:
+140
-140
@@ -1,163 +1,163 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark-mode">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>MapApp</title>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>MapApp</title>
|
||||
<script src="../../3rdparty/highlight/highlight.pack.js"></script>
|
||||
|
||||
<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" />
|
||||
|
||||
<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>
|
||||
|
||||
<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>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}"
|
||||
<style>
|
||||
.controls {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
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}"
|
||||
<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}'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</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 }
|
||||
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 }
|
||||
}
|
||||
})
|
||||
|
||||
function ready(sprites) {
|
||||
// You may define a focus point ...
|
||||
let focus = capitals.paris
|
||||
|
||||
const cover = true
|
||||
// ... and a zoom level.
|
||||
let zoom = 1
|
||||
|
||||
// When resources are loaded, the ImageMap can be instantiated.
|
||||
let imageMap = new ImageMap(sprites.get(europe), europeData, {
|
||||
// Name has to be app (like all other PIXIApps).
|
||||
const app = (window.app = new MapApp({
|
||||
focus,
|
||||
zoom,
|
||||
view: canvas,
|
||||
coordsLogging: true,
|
||||
maxScale: 1,
|
||||
cover
|
||||
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
|
||||
})
|
||||
|
||||
let testMapProjection = new DeepZoomMapProjection(new Projection.Mercator(), testConfig.tiles, {
|
||||
app
|
||||
// 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 }
|
||||
}
|
||||
})
|
||||
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)
|
||||
function ready(sprites) {
|
||||
const cover = true
|
||||
|
||||
// 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)
|
||||
// When resources are loaded, the ImageMap can be instantiated.
|
||||
let imageMap = new ImageMap(sprites.get(europe), europeData, {
|
||||
coordsLogging: true,
|
||||
maxScale: 1,
|
||||
cover
|
||||
})
|
||||
mapControl.appendChild(mapBtn)
|
||||
|
||||
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>
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user