Added minimal navigation breadcrumbs to doctests.
This commit is contained in:
@@ -32,7 +32,7 @@
|
||||
|
||||
|
||||
<body onload='Doctest.run()'>
|
||||
<h1>GeoGraphics</h1>
|
||||
<h1><a href="../../index.html">lib.</a><a href="../index.html">pixi.</a><a href="index.html">maps.</a>GeoGraphics</h1>
|
||||
<p> GeoGraphics are graphical objects, that does not store the graphics information
|
||||
in screen space, but in geographical coordinates. Therefore GeoGraphics must be
|
||||
placed on GeoLayers to work properly. </p>
|
||||
|
||||
@@ -85,7 +85,7 @@
|
||||
</head>
|
||||
|
||||
<body onload='Doctest.run()'>
|
||||
<h1>GeoJson</h1>
|
||||
<h1><a href="../../index.html">lib.</a><a href="../index.html">pixi.</a><a href="index.html">maps.</a>GeoJson</h1>
|
||||
<p>GeoJson is a standardized format of how to display geometry in a geographical context, using latitude/longitude
|
||||
pairs
|
||||
to display one (or multiple) Point, Line or Polygon.
|
||||
|
||||
+82
-108
@@ -1,123 +1,103 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark-mode">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Map</title>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Map</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>Map</h1>
|
||||
<p>
|
||||
The Map class shows a geographical map using a scatter element.
|
||||
</p>
|
||||
|
||||
<h2 id="DeepZoomMap">DeepZoomMap</h2>
|
||||
<p>Usually a DeepZoomMap will be used to display maps. It uses a <a
|
||||
href="../deepzoom/deepzoom.html">DeepZoomImage</a> to display the map in different resolutions depending on
|
||||
the zoom factor.</p>
|
||||
<canvas id="deepZoomCanvas">
|
||||
|
||||
</canvas>
|
||||
<script>
|
||||
|
||||
|
||||
</script>
|
||||
<script class="doctest" data-collapsible data-collapsed data-title="Script">
|
||||
|
||||
|
||||
(function () {
|
||||
|
||||
// Create the mapapp.
|
||||
let app = window.DeepZoomMapApp = new MapApp({
|
||||
view: deepZoomCanvas,
|
||||
coordsLogging: true,
|
||||
width: 512,
|
||||
height: 512
|
||||
})
|
||||
|
||||
|
||||
// Load or specify a tilesConfig as required by the DeepZoomImage.
|
||||
const tilesConfig = {
|
||||
"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>
|
||||
|
||||
<body onload="Doctest.run()">
|
||||
<h1><a href="../../index.html">lib.</a><a href="../index.html">pixi.</a><a href="index.html">maps.</a>Map</h1>
|
||||
<p>The Map class shows a geographical map using a scatter element.</p>
|
||||
|
||||
// Create a projection.
|
||||
const projection = new Projection.Mercator()
|
||||
|
||||
// Create a map data object.
|
||||
const osmDeepZoomMapProjection = new DeepZoomMapProjection(projection, tilesConfig, { app })
|
||||
|
||||
// Create the map
|
||||
const osmMap = new DeepZoomMap(osmDeepZoomMapProjection, tilesConfig)
|
||||
|
||||
// Add the map to the app.
|
||||
app.addMap("osm", osmMap)
|
||||
|
||||
// Run the app when at least one map is set.
|
||||
app.setup().run()
|
||||
})()
|
||||
</script>
|
||||
|
||||
<h2 id="imageMap">ImageMap</h2>
|
||||
<p>Single images can be also used as maps. This can be useful for examples, debugging purposes or other use-cases
|
||||
when there are no different tiles required or available.</p>
|
||||
<canvas id="imageMapCanvas">
|
||||
|
||||
</canvas>
|
||||
<script>
|
||||
</script>
|
||||
<script class="doctest" data-collapsible data-collapsed data-title="Script">
|
||||
|
||||
|
||||
(function () {
|
||||
|
||||
<h2 id="DeepZoomMap">DeepZoomMap</h2>
|
||||
<p>
|
||||
Usually a DeepZoomMap will be used to display maps. It uses a
|
||||
<a href="../deepzoom/deepzoom.html">DeepZoomImage</a> to display the map in different resolutions depending
|
||||
on the zoom factor.
|
||||
</p>
|
||||
<canvas id="deepZoomCanvas"> </canvas>
|
||||
<script></script>
|
||||
<script class="doctest" data-collapsible data-collapsed data-title="Script">
|
||||
;(function () {
|
||||
// Create the mapapp.
|
||||
let app = window.ImageMapApp = new MapApp({
|
||||
let app = (window.DeepZoomMapApp = new MapApp({
|
||||
view: deepZoomCanvas,
|
||||
coordsLogging: true,
|
||||
width: 512,
|
||||
height: 512
|
||||
}))
|
||||
|
||||
// Load or specify a tilesConfig as required by the DeepZoomImage.
|
||||
const tilesConfig = {
|
||||
tileSize: 256,
|
||||
format: 'png',
|
||||
overlap: 0,
|
||||
type: 'map',
|
||||
height: 1024,
|
||||
width: 1024,
|
||||
path: '../assets/maps/osm',
|
||||
urlTileTemplate: '{path}/{level}/{row}/{column}.{format}'
|
||||
}
|
||||
|
||||
// Create a projection.
|
||||
const projection = new Projection.Mercator()
|
||||
|
||||
// Create a map data object.
|
||||
const osmDeepZoomMapProjection = new DeepZoomMapProjection(projection, tilesConfig, { app })
|
||||
|
||||
// Create the map
|
||||
const osmMap = new DeepZoomMap(osmDeepZoomMapProjection, tilesConfig)
|
||||
|
||||
// Add the map to the app.
|
||||
app.addMap('osm', osmMap)
|
||||
|
||||
// Run the app when at least one map is set.
|
||||
app.setup().run()
|
||||
})()
|
||||
</script>
|
||||
|
||||
<h2 id="imageMap">ImageMap</h2>
|
||||
<p>
|
||||
Single images can be also used as maps. This can be useful for examples, debugging purposes or other
|
||||
use-cases when there are no different tiles required or available.
|
||||
</p>
|
||||
<canvas id="imageMapCanvas"> </canvas>
|
||||
<script></script>
|
||||
<script class="doctest" data-collapsible data-collapsed data-title="Script">
|
||||
;(function () {
|
||||
// Create the mapapp.
|
||||
let app = (window.ImageMapApp = new MapApp({
|
||||
view: imageMapCanvas,
|
||||
coordsLogging: true,
|
||||
width: 512,
|
||||
height: 512
|
||||
})
|
||||
|
||||
const mapTexture = "../assets/maps/wikimedia-world-robinson/2000px-BlankMap-World.png"
|
||||
|
||||
|
||||
}))
|
||||
|
||||
const mapTexture = '../assets/maps/wikimedia-world-robinson/2000px-BlankMap-World.png'
|
||||
|
||||
// The images used by the image map need to be loaded beforehand.
|
||||
// Therefore this loading step is required.
|
||||
app.loadSprites([mapTexture], sprites => spritesLoaded(sprites), {
|
||||
app.loadSprites([mapTexture], (sprites) => spritesLoaded(sprites), {
|
||||
resolutionDependent: false
|
||||
})
|
||||
|
||||
spritesLoaded = (sprites) => {
|
||||
|
||||
// Create a projection.
|
||||
const projection = new Projection.Robinson(10)
|
||||
|
||||
@@ -127,19 +107,13 @@
|
||||
// Create the map
|
||||
let imageMap = new ImageMap(sprites.get(mapTexture), mapProjection)
|
||||
|
||||
|
||||
// Add the map to the app.
|
||||
app.addMap("europe", imageMap)
|
||||
|
||||
app.addMap('europe', imageMap)
|
||||
|
||||
// Run the app when at least one map is set.
|
||||
app.setup().run()
|
||||
}
|
||||
|
||||
|
||||
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+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>
|
||||
|
||||
@@ -37,7 +37,7 @@
|
||||
</head>
|
||||
|
||||
<body onload='Doctest.run()'>
|
||||
<h1>MapProjection</h1>
|
||||
<h1><a href="../../index.html">lib.</a><a href="../index.html">pixi.</a><a href="index.html">maps.</a>MapProjection</h1>
|
||||
<p>The map projection calculates is responsible for transforming map coordinates to pixel coordinates and backwards.</p>
|
||||
|
||||
<h2>Static Squared World Map</h2>
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
</head>
|
||||
|
||||
<body onload='Doctest.run()'>
|
||||
<h1>Maps</h1>
|
||||
<h1><a href="../../index.html">lib.</a><a href="../index.html">pixi.</a><a href="index.html">maps.</a>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>
|
||||
|
||||
+141
-140
@@ -1,163 +1,164 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark-mode">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>MapViewport</title>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>MapViewport</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>MapViewport</h1>
|
||||
<p>
|
||||
The MapViewport works under the hood of a map layer to track the informations about the current focus point and
|
||||
zoom position.
|
||||
This is important to maintain the same view when maps are changed.
|
||||
</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>MapViewport
|
||||
</h1>
|
||||
<p>
|
||||
The MapViewport works under the hood of a map layer to track the informations about the current focus point
|
||||
and zoom position. This is important to maintain the same view when maps are changed.
|
||||
</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>
|
||||
|
||||
+257
-284
@@ -1,304 +1,277 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark-mode">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Overlay</title>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Overlay</title>
|
||||
<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>
|
||||
<script src="../../../dist/iwmlib.pixi.js"></script>
|
||||
|
||||
<script src="../../3rdparty/highlight/highlight.pack.js"></script>
|
||||
<link rel="shortcut icon" type="image/x-icon" href="../../../assets/icons/map.png" />
|
||||
|
||||
<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'>
|
||||
<style>
|
||||
.inline-showcase {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
<script src="../../../dist/iwmlib.3rdparty.js"></script>
|
||||
<script src="../../../dist/iwmlib.js"></script>
|
||||
<script src="../../../dist/iwmlib.pixi.js"></script>
|
||||
.map-example {
|
||||
display: inline-block;
|
||||
width: 256px;
|
||||
margin: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<link rel="shortcut icon" type="image/x-icon" href="../../../assets/icons/map.png">
|
||||
|
||||
|
||||
<style>
|
||||
.inline-showcase {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.map-example {
|
||||
display: inline-block;
|
||||
width: 256px;
|
||||
margin: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body onload="Doctest.run()">
|
||||
<h1 class="title">Overlay</h1>
|
||||
<!-- <a href="../../../" class="Documentation"></a> -->
|
||||
<p class="description">
|
||||
The overlayclass creates a convenient way to create and design
|
||||
complex map overlays.
|
||||
</p>
|
||||
<canvas id="view" class="center"> </canvas>
|
||||
<script>
|
||||
let app = new MapApp({
|
||||
view,
|
||||
width: 512,
|
||||
height: 512,
|
||||
coordsLogging: true
|
||||
})
|
||||
var osmworld = '../assets/maps/osm/0/0/0.png'
|
||||
let worlOSMData = new MapProjection(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" data-collapsible data-collapsed data-title="Overlay Data">
|
||||
|
||||
/**
|
||||
* To create an overlay you just need to create a JSON file.
|
||||
* The styles defined in the styles are cascading, meaning that
|
||||
* the styles can be defined on the top level, or directly at the
|
||||
* single items. If the style is not defined in the item, the top-level style will be used.
|
||||
* If the top-level style is not defined either, the default style is applied.
|
||||
*
|
||||
* The structure of an overlay file is as follows:
|
||||
*
|
||||
* {
|
||||
* //COMMENT: Top-Level
|
||||
*
|
||||
* //COMMENT: Frequently used properties are:
|
||||
* size: 500,
|
||||
* color: 0xFF00FF,
|
||||
* fillAlpha:0.5
|
||||
*
|
||||
* icon: 'path/to/icon.png'
|
||||
* iconColor: 0xFFFFFF,
|
||||
* "items": [
|
||||
* //COMMENT: Items are defined in the items array.
|
||||
* {
|
||||
* location: {
|
||||
* //COMMENT: Location must be defined.
|
||||
* x: LAT_VALUE,
|
||||
* y: LNG_VALUE
|
||||
* }
|
||||
* },{
|
||||
* color: 0xFF0000,
|
||||
* location: {
|
||||
* //COMMENT: Location must be defined.
|
||||
* x: LAT_VALUE,
|
||||
* y: LNG_VALUE
|
||||
* }
|
||||
* }
|
||||
* ]
|
||||
* }
|
||||
*/
|
||||
|
||||
let exampleOverlayJSON = {
|
||||
icon: '../../../assets/icons/place.png',
|
||||
iconColor: "0x35aaea",
|
||||
iconAnchor: { x: 0.5, y: 1 },
|
||||
size: 5,
|
||||
scale: 0.2,
|
||||
disabledColor: 0x000000,
|
||||
disabledIconColor: 0xCCCCCC,
|
||||
disabledScale: 0.5,
|
||||
color: '0x3FA7EE',
|
||||
items: [
|
||||
{
|
||||
name: 'Custom Icon',
|
||||
fontWeight: "bold",
|
||||
icon: '../../../assets/icons/beenhere.png',
|
||||
iconColor: 0x00ff00,
|
||||
iconAlpha: 0.5,
|
||||
size: 0,
|
||||
labelVerticalAlignment: "underneath",
|
||||
label: 'Abidjan',
|
||||
location: {
|
||||
x: 5.34947,
|
||||
y: -4.006472
|
||||
},
|
||||
information:
|
||||
'Here a custom icon is used. It overrides the icon setting in the global section.'
|
||||
},
|
||||
{
|
||||
name: 'Berlin',
|
||||
label: "enabled",
|
||||
disabledLabel: "disabled",
|
||||
location: {
|
||||
x: 52.52543,
|
||||
y: 13.385291
|
||||
},
|
||||
information:
|
||||
'... ist die Bundeshauptstadt der Bundesrepublik Deutschland.',
|
||||
enabled: false
|
||||
},
|
||||
{
|
||||
name: 'Canberra',
|
||||
|
||||
location: {
|
||||
x: -35.282025,
|
||||
y: 149.128648
|
||||
},
|
||||
information:
|
||||
'... ist die Hauptstadt und achtgrößte Stadt Australiens.'
|
||||
},
|
||||
{
|
||||
name: 'Kapstadt',
|
||||
|
||||
location: {
|
||||
x: -33.925448,
|
||||
y: 18.416962
|
||||
},
|
||||
information:
|
||||
`This item adjusts it's size according to the map.`
|
||||
},
|
||||
{
|
||||
name: 'Moskau',
|
||||
|
||||
location: {
|
||||
x: 55.750892,
|
||||
y: 37.622799
|
||||
},
|
||||
information:
|
||||
'... die kosmopolitische Hauptstadt Russlands, liegt im Westen des Landes und wird von der Moskwa durchflossen.'
|
||||
},
|
||||
{
|
||||
name: 'Washington, D.C.',
|
||||
|
||||
location: {
|
||||
x: 38.89565,
|
||||
y: -77.031407
|
||||
},
|
||||
information:
|
||||
'... ist die Hauptstadt der USA und eine kompakte Stadt am Potomac River, die an die Bundesstaaten Maryland und Virginia grenzt.'
|
||||
},
|
||||
{
|
||||
name: 'Rio de Janeiro',
|
||||
|
||||
location: {
|
||||
x: -22.8714,
|
||||
y: -43.28049
|
||||
},
|
||||
information:
|
||||
'... ist eine ausgedehnte brasilianische Küstenmetropole. '
|
||||
},
|
||||
{
|
||||
name: 'Tokio',
|
||||
type: "factory",
|
||||
label: "factory",
|
||||
location: {
|
||||
x: 35.696278,
|
||||
y: 139.731366
|
||||
},
|
||||
information:
|
||||
'... ist eine Global City in der Kantō-Region im Osten der japanischen Hauptinsel Honshū.'
|
||||
}
|
||||
]
|
||||
}
|
||||
</script>
|
||||
|
||||
<script class="doctest" data-collapsible data-title="Overlay">
|
||||
|
||||
let overlay = new Overlay(exampleOverlayJSON)
|
||||
|
||||
/**
|
||||
* Textures should be loaded using the app's texture loader.
|
||||
* With the findTexture method all required Textures within the
|
||||
* overlays are loaded.
|
||||
*/
|
||||
let overlayTextures = overlay.findAllTextures()
|
||||
|
||||
let list = [osmworld].concat(overlayTextures)
|
||||
app.loadTextures(list, textures => texturesLoaded(textures), {
|
||||
resolutionDependent: false
|
||||
})
|
||||
|
||||
function texturesLoaded(textures) {
|
||||
|
||||
|
||||
/** When all textures are loaded .... */
|
||||
setupMap(textures)
|
||||
|
||||
//Retrieve all overlay textures.
|
||||
overlay.selectTextures(textures)
|
||||
|
||||
// Just some Helpers for the Popups.
|
||||
let popup = null
|
||||
let cleaner = null
|
||||
const vanishingTime = 1000
|
||||
|
||||
// Factories must return a geographics object.
|
||||
Overlay.createFactory("factory", (item) => {
|
||||
|
||||
// This is applied to every item in the overlay that has
|
||||
// the type factory'
|
||||
|
||||
|
||||
let geographics = new GeoPoint(item.location)
|
||||
|
||||
geographics.drawHandler.add((graphics) => {
|
||||
graphics.beginFill(item.color, item.fillAlpha)
|
||||
graphics.drawRect(0, 0, 10, 10)
|
||||
})
|
||||
|
||||
let text = new PIXI.Text(item.name, {fontSize: 5})
|
||||
geographics.graphics.addChild(text)
|
||||
|
||||
|
||||
return geographics
|
||||
<body onload="Doctest.run()">
|
||||
<h1 class="title">
|
||||
<a href="../../index.html">lib.</a><a href="../index.html">pixi.</a><a href="index.html">maps.</a>Overlay
|
||||
</h1>
|
||||
<!-- <a href="../../../" class="Documentation"></a> -->
|
||||
<p class="description">The overlayclass creates a convenient way to create and design complex map overlays.</p>
|
||||
<canvas id="view" class="center"> </canvas>
|
||||
<script>
|
||||
let app = new MapApp({
|
||||
view,
|
||||
width: 512,
|
||||
height: 512,
|
||||
coordsLogging: true
|
||||
})
|
||||
var osmworld = '../assets/maps/osm/0/0/0.png'
|
||||
let worlOSMData = new MapProjection(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" data-collapsible data-collapsed data-title="Overlay Data">
|
||||
/**
|
||||
*
|
||||
* The actual PIXI elements are created when the overlay.create() is called.
|
||||
* This returns an GeoLayer which can be directly put onto the map's Maplayer (or any other GeoLayer).
|
||||
*
|
||||
* INFO: MapLayer and GeoLayer are specialized container for PIXI. They are meant to
|
||||
* place PIXI Elements according to their world-coordinates (lat/lng position), instead
|
||||
* of actual pixel values.
|
||||
*
|
||||
* To create an overlay you just need to create a JSON file.
|
||||
* The styles defined in the styles are cascading, meaning that
|
||||
* the styles can be defined on the top level, or directly at the
|
||||
* single items. If the style is not defined in the item, the top-level style will be used.
|
||||
* If the top-level style is not defined either, the default style is applied.
|
||||
*
|
||||
* The structure of an overlay file is as follows:
|
||||
*
|
||||
* {
|
||||
* //COMMENT: Top-Level
|
||||
*
|
||||
* //COMMENT: Frequently used properties are:
|
||||
* size: 500,
|
||||
* color: 0xFF00FF,
|
||||
* fillAlpha:0.5
|
||||
*
|
||||
* icon: 'path/to/icon.png'
|
||||
* iconColor: 0xFFFFFF,
|
||||
* "items": [
|
||||
* //COMMENT: Items are defined in the items array.
|
||||
* {
|
||||
* location: {
|
||||
* //COMMENT: Location must be defined.
|
||||
* x: LAT_VALUE,
|
||||
* y: LNG_VALUE
|
||||
* }
|
||||
* },{
|
||||
* color: 0xFF0000,
|
||||
* location: {
|
||||
* //COMMENT: Location must be defined.
|
||||
* x: LAT_VALUE,
|
||||
* y: LNG_VALUE
|
||||
* }
|
||||
* }
|
||||
* ]
|
||||
* }
|
||||
*/
|
||||
|
||||
let exampleOverlayGeoLayer = overlay.create()
|
||||
let exampleOverlayJSON = {
|
||||
icon: '../../../assets/icons/place.png',
|
||||
iconColor: '0x35aaea',
|
||||
iconAnchor: { x: 0.5, y: 1 },
|
||||
size: 5,
|
||||
scale: 0.2,
|
||||
disabledColor: 0x000000,
|
||||
disabledIconColor: 0xcccccc,
|
||||
disabledScale: 0.5,
|
||||
color: '0x3FA7EE',
|
||||
items: [
|
||||
{
|
||||
name: 'Custom Icon',
|
||||
fontWeight: 'bold',
|
||||
icon: '../../../assets/icons/beenhere.png',
|
||||
iconColor: 0x00ff00,
|
||||
iconAlpha: 0.5,
|
||||
size: 0,
|
||||
labelVerticalAlignment: 'underneath',
|
||||
label: 'Abidjan',
|
||||
location: {
|
||||
x: 5.34947,
|
||||
y: -4.006472
|
||||
},
|
||||
information: 'Here a custom icon is used. It overrides the icon setting in the global section.'
|
||||
},
|
||||
{
|
||||
name: 'Berlin',
|
||||
label: 'enabled',
|
||||
disabledLabel: 'disabled',
|
||||
location: {
|
||||
x: 52.52543,
|
||||
y: 13.385291
|
||||
},
|
||||
information: '... ist die Bundeshauptstadt der Bundesrepublik Deutschland.',
|
||||
enabled: false
|
||||
},
|
||||
{
|
||||
name: 'Canberra',
|
||||
|
||||
// When placed on the mapLayer, the PIXI Graphic elements, that
|
||||
// reside inside GeoGraphic Objects are placed automatically at the
|
||||
// correct coordinates of the map.
|
||||
app.mapLayer.addLayer(exampleOverlayGeoLayer)
|
||||
location: {
|
||||
x: -35.282025,
|
||||
y: 149.128648
|
||||
},
|
||||
information: '... ist die Hauptstadt und achtgrößte Stadt Australiens.'
|
||||
},
|
||||
{
|
||||
name: 'Kapstadt',
|
||||
|
||||
location: {
|
||||
x: -33.925448,
|
||||
y: 18.416962
|
||||
},
|
||||
information: `This item adjusts it's size according to the map.`
|
||||
},
|
||||
{
|
||||
name: 'Moskau',
|
||||
|
||||
// Just a helper function that clears the popups and removes
|
||||
// a remaining cleaner timeout.
|
||||
function clearPopup() {
|
||||
if (popup) {
|
||||
popup.parent.removeChild(popup)
|
||||
popup = null
|
||||
}
|
||||
location: {
|
||||
x: 55.750892,
|
||||
y: 37.622799
|
||||
},
|
||||
information:
|
||||
'... die kosmopolitische Hauptstadt Russlands, liegt im Westen des Landes und wird von der Moskwa durchflossen.'
|
||||
},
|
||||
{
|
||||
name: 'Washington, D.C.',
|
||||
|
||||
if (cleaner != null) {
|
||||
clearTimeout(cleaner)
|
||||
location: {
|
||||
x: 38.89565,
|
||||
y: -77.031407
|
||||
},
|
||||
information:
|
||||
'... ist die Hauptstadt der USA und eine kompakte Stadt am Potomac River, die an die Bundesstaaten Maryland und Virginia grenzt.'
|
||||
},
|
||||
{
|
||||
name: 'Rio de Janeiro',
|
||||
|
||||
location: {
|
||||
x: -22.8714,
|
||||
y: -43.28049
|
||||
},
|
||||
information: '... ist eine ausgedehnte brasilianische Küstenmetropole. '
|
||||
},
|
||||
{
|
||||
name: 'Tokio',
|
||||
type: 'factory',
|
||||
label: 'factory',
|
||||
location: {
|
||||
x: 35.696278,
|
||||
y: 139.731366
|
||||
},
|
||||
information:
|
||||
'... ist eine Global City in der Kantō-Region im Osten der japanischen Hauptinsel Honshū.'
|
||||
}
|
||||
]
|
||||
}
|
||||
</script>
|
||||
|
||||
<script class="doctest" data-collapsible data-title="Overlay">
|
||||
let overlay = new Overlay(exampleOverlayJSON)
|
||||
|
||||
/**
|
||||
* Textures should be loaded using the app's texture loader.
|
||||
* With the findTexture method all required Textures within the
|
||||
* overlays are loaded.
|
||||
*/
|
||||
let overlayTextures = overlay.findAllTextures()
|
||||
|
||||
let list = [osmworld].concat(overlayTextures)
|
||||
app.loadTextures(list, (textures) => texturesLoaded(textures), {
|
||||
resolutionDependent: false
|
||||
})
|
||||
|
||||
function texturesLoaded(textures) {
|
||||
/** When all textures are loaded .... */
|
||||
setupMap(textures)
|
||||
|
||||
//Retrieve all overlay textures.
|
||||
overlay.selectTextures(textures)
|
||||
|
||||
// Just some Helpers for the Popups.
|
||||
let popup = null
|
||||
let cleaner = null
|
||||
const vanishingTime = 1000
|
||||
|
||||
// Factories must return a geographics object.
|
||||
Overlay.createFactory('factory', (item) => {
|
||||
// This is applied to every item in the overlay that has
|
||||
// the type factory'
|
||||
|
||||
let geographics = new GeoPoint(item.location)
|
||||
|
||||
geographics.drawHandler.add((graphics) => {
|
||||
graphics.beginFill(item.color, item.fillAlpha)
|
||||
graphics.drawRect(0, 0, 10, 10)
|
||||
})
|
||||
|
||||
let text = new PIXI.Text(item.name, { fontSize: 5 })
|
||||
geographics.graphics.addChild(text)
|
||||
|
||||
return geographics
|
||||
})
|
||||
|
||||
/**
|
||||
*
|
||||
* The actual PIXI elements are created when the overlay.create() is called.
|
||||
* This returns an GeoLayer which can be directly put onto the map's Maplayer (or any other GeoLayer).
|
||||
*
|
||||
* INFO: MapLayer and GeoLayer are specialized container for PIXI. They are meant to
|
||||
* place PIXI Elements according to their world-coordinates (lat/lng position), instead
|
||||
* of actual pixel values.
|
||||
*
|
||||
*/
|
||||
|
||||
let exampleOverlayGeoLayer = overlay.create()
|
||||
|
||||
// When placed on the mapLayer, the PIXI Graphic elements, that
|
||||
// reside inside GeoGraphic Objects are placed automatically at the
|
||||
// correct coordinates of the map.
|
||||
app.mapLayer.addLayer(exampleOverlayGeoLayer)
|
||||
|
||||
// Just a helper function that clears the popups and removes
|
||||
// a remaining cleaner timeout.
|
||||
function clearPopup() {
|
||||
if (popup) {
|
||||
popup.parent.removeChild(popup)
|
||||
popup = null
|
||||
}
|
||||
|
||||
if (cleaner != null) {
|
||||
clearTimeout(cleaner)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</script>
|
||||
<script></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Scatter</h1>
|
||||
<h1><a href="../../index.html">lib.</a><a href="../index.html">pixi.</a><a href="index.html">maps.</a>Scatter</h1>
|
||||
<p>The Scatter in Tüsch specifies some classes to make them more suitable for Map applications.</p>
|
||||
|
||||
<h2>CoverScatter</h2>
|
||||
|
||||
+126
-114
@@ -1,134 +1,146 @@
|
||||
<!doctype html>
|
||||
<html lang='en'>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Utils</title>
|
||||
<link rel="stylesheet" href="../../../lib/3rdparty/highlight/styles/default.css" />
|
||||
<link rel="stylesheet" href="../../../css/doctest.css" />
|
||||
<script src="../../../lib/3rdparty/highlight/highlight.pack.js"></script>
|
||||
<script src="../../../dist/iwmlib.3rdparty.js"></script>
|
||||
<script src="../../../dist/iwmlib.js"></script>
|
||||
<script src="../../../dist/iwmlib.pixi.js"></script>
|
||||
<script src="all.js"></script>
|
||||
|
||||
<head>
|
||||
<meta charset='UTF-8'>
|
||||
<title>Utils</title>
|
||||
<link rel='stylesheet' href='../iwmlib/lib/3rdparty/highlight/styles/default.css'>
|
||||
<link rel='stylesheet' href='../iwmlib/lib/../css/doctest.css'>
|
||||
<script src='../iwmlib/lib/3rdparty/highlight/highlight.pack.js'></script>
|
||||
<script src='../iwmlib/lib/3rdparty/all.js'></script>
|
||||
<script src='../iwmlib/lib/all.js'></script>
|
||||
<script src='../iwmlib/lib/pixi/all.js'></script>
|
||||
<script src="all.js"></script>
|
||||
<style>
|
||||
body {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<style>
|
||||
body {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body onload="Doctest.run()">
|
||||
<h1><a href="../../index.html">lib.</a><a href="../index.html">pixi.</a><a href="index.html">maps.</a>Utils</h1>
|
||||
<p>Some utility functionalities for the Tuesch.</p>
|
||||
|
||||
<body onload="Doctest.run()">
|
||||
<h1>Utils</h1>
|
||||
<p>Some utility functionalities for the Tuesch.</p>
|
||||
<h2>Event Handler</h2>
|
||||
<p>
|
||||
The event handler class generalizes a common design principle in javascript. When an event occurs, that is
|
||||
of relevance for other objects, then this event should be sent out to all objects, that are interested in
|
||||
that event. Objects interested in that event, subscribe the event handler and get notified via a callback
|
||||
function.
|
||||
</p>
|
||||
<script class="doctest">
|
||||
let result = []
|
||||
function a() {
|
||||
result.push('a')
|
||||
}
|
||||
function b() {
|
||||
result.push('b')
|
||||
}
|
||||
function c() {
|
||||
result.push('c')
|
||||
}
|
||||
function d() {
|
||||
result.push('d')
|
||||
}
|
||||
function e() {
|
||||
result.push('e')
|
||||
}
|
||||
function f() {
|
||||
result.push('f')
|
||||
}
|
||||
|
||||
<h2>Event Handler</h2>
|
||||
<p>
|
||||
The event handler class generalizes a common design principle in javascript. When an event occurs, that is of relevance for
|
||||
other objects, then this event should be sent out to all objects, that are interested in that event. Objects interested
|
||||
in that event, subscribe the event handler and get notified via a callback function.
|
||||
</p>
|
||||
<script class="doctest">
|
||||
let result = []
|
||||
function a() { result.push("a") }
|
||||
function b() { result.push("b") }
|
||||
function c() { result.push("c") }
|
||||
function d() { result.push("d") }
|
||||
function e() { result.push("e") }
|
||||
function f() { result.push("f") }
|
||||
//Init and call.
|
||||
let eventHandler = new EventHandler('manual', { listeners: [a, b] })
|
||||
eventHandler.call()
|
||||
Doctest.expect(result.join(','), ['a', 'b'].join(','))
|
||||
result = []
|
||||
|
||||
//Init and call.
|
||||
let eventHandler = new EventHandler("manual", { listeners: [a, b] })
|
||||
eventHandler.call()
|
||||
Doctest.expect(result.join(","), ["a", "b"].join(","))
|
||||
result = []
|
||||
// Add single
|
||||
eventHandler.add(c)
|
||||
eventHandler.call()
|
||||
Doctest.expect(result.join(','), ['a', 'b', 'c'].join(','))
|
||||
result = []
|
||||
|
||||
// Add single
|
||||
eventHandler.add(c)
|
||||
eventHandler.call()
|
||||
Doctest.expect(result.join(","), ["a", "b", "c"].join(","))
|
||||
result = []
|
||||
// Add multiple
|
||||
eventHandler.addMultiple(d, e, f)
|
||||
eventHandler.call()
|
||||
Doctest.expect(result.join(','), ['a', 'b', 'c', 'd', 'e', 'f'].join(','))
|
||||
result = []
|
||||
|
||||
// Add multiple
|
||||
eventHandler.addMultiple(d, e, f)
|
||||
eventHandler.call()
|
||||
Doctest.expect(result.join(","), ["a", "b", "c", "d", "e", "f"].join(","))
|
||||
result = []
|
||||
//Remove inbetween
|
||||
eventHandler.remove(c)
|
||||
eventHandler.call()
|
||||
Doctest.expect(result.join(','), ['a', 'b', 'd', 'e', 'f'].join(','))
|
||||
result = []
|
||||
|
||||
//Remove inbetween
|
||||
eventHandler.remove(c)
|
||||
eventHandler.call()
|
||||
Doctest.expect(result.join(","), ["a", "b", "d", "e", "f"].join(","))
|
||||
result = []
|
||||
// Remove first
|
||||
eventHandler.remove(a)
|
||||
eventHandler.call()
|
||||
Doctest.expect(result.join(','), ['b', 'd', 'e', 'f'].join(','))
|
||||
result = []
|
||||
|
||||
// Remove first
|
||||
eventHandler.remove(a)
|
||||
eventHandler.call()
|
||||
Doctest.expect(result.join(","), ["b", "d", "e", "f"].join(","))
|
||||
result = []
|
||||
// Remove all remaining elements.
|
||||
eventHandler.empty()
|
||||
eventHandler.call()
|
||||
Doctest.expect(result.join(','), [].join(','))
|
||||
result = []
|
||||
</script>
|
||||
|
||||
// Remove all remaining elements.
|
||||
eventHandler.empty()
|
||||
eventHandler.call()
|
||||
Doctest.expect(result.join(","), [].join(","))
|
||||
result = []
|
||||
<h2>DomUtils</h2>
|
||||
|
||||
Utility functions that help handling the DOM.
|
||||
|
||||
<h3>positionOnElement(element, position)</h3>
|
||||
Function that returns the global position for a normalized position.
|
||||
|
||||
</script>
|
||||
<div
|
||||
id="positionOnElementBox"
|
||||
class="box"
|
||||
style="
|
||||
width: 512px;
|
||||
height: 256px;
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
transform: rotate(30deg);
|
||||
margin: 100px;
|
||||
"
|
||||
></div>
|
||||
|
||||
<h2>DomUtils</h2>
|
||||
<script class="doctest">
|
||||
let target = document.getElementById('positionOnElementBox')
|
||||
|
||||
Utility functions that help handling the DOM.
|
||||
window.addEventListener('load', () => {
|
||||
let positions = [
|
||||
[0, 0],
|
||||
[0, 1],
|
||||
[1, 0],
|
||||
[0.5, 0.5],
|
||||
[0.2, 0.2],
|
||||
[0.2, 0.8],
|
||||
[0.8, 0.2],
|
||||
[0.8, 0.8]
|
||||
]
|
||||
|
||||
<h3>positionOnElement(element, position)</h3>
|
||||
Function that returns the global position for a normalized position.
|
||||
positions.forEach((position) => {
|
||||
position = { x: position[0], y: position[1] }
|
||||
let transformedPosition = DomUtils.positionOnElement(target, position)
|
||||
let dot = document.createElement('div')
|
||||
const size = 10
|
||||
|
||||
<div id="positionOnElementBox" class="box" style="width: 512px;height:256px;border: 1px solid black; box-sizing: border-box; transform: rotate(30deg); margin:100px;"></div>
|
||||
Object.assign(dot.style, {
|
||||
width: size + 'px',
|
||||
height: size + 'px',
|
||||
top: target.offsetTop + target.offsetHeight / 2 + transformedPosition.y - size / 2 + 'px',
|
||||
left: target.offsetLeft + target.offsetWidth / 2 + transformedPosition.x - size / 2 + 'px',
|
||||
position: 'absolute',
|
||||
backgroundColor: 'green',
|
||||
borderRadius: '50%'
|
||||
})
|
||||
|
||||
<script class="doctest">
|
||||
|
||||
|
||||
let target = document.getElementById("positionOnElementBox")
|
||||
|
||||
window.addEventListener("load", () => {
|
||||
|
||||
let positions = [
|
||||
[0, 0],
|
||||
[0, 1],
|
||||
[1, 0],
|
||||
[0.5,0.5],
|
||||
[0.2, 0.2],
|
||||
[0.2, 0.8],
|
||||
[0.8, 0.2],
|
||||
[0.8, 0.8],
|
||||
]
|
||||
|
||||
positions.forEach(position => {
|
||||
position = { x: position[0], y: position[1] }
|
||||
let transformedPosition = DomUtils.positionOnElement(target, position)
|
||||
let dot = document.createElement("div");
|
||||
const size = 10;
|
||||
|
||||
|
||||
Object.assign(dot.style, {
|
||||
width: size + "px",
|
||||
height: size + "px",
|
||||
top: target.offsetTop + target.offsetHeight / 2 + transformedPosition.y -size/2+ "px",
|
||||
left: target.offsetLeft + target.offsetWidth / 2 + transformedPosition.x -size/2 + "px",
|
||||
position: "absolute",
|
||||
backgroundColor: "green",
|
||||
borderRadius: "50%"
|
||||
document.body.appendChild(dot)
|
||||
})
|
||||
|
||||
|
||||
document.body.appendChild(dot)
|
||||
})
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user