2019-11-04 10:59:08 +01:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<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="../../../dist/iwmlib.3rdparty.js"></script>
|
|
|
|
|
<script src="../../../dist/iwmlib.js"></script>
|
|
|
|
|
<script src="../../../dist/iwmlib.pixi.js"></script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
.inline-showcase {
|
|
|
|
|
display: flex;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.map-example {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 256px;
|
|
|
|
|
margin: 5px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body onload="Doctest.run()">
|
|
|
|
|
<h1>Overlay</h1>
|
|
|
|
|
<p>
|
|
|
|
|
The overlayclass creates a convenient way to create and design
|
|
|
|
|
complex map overlays.
|
|
|
|
|
</p>
|
|
|
|
|
<canvas id="view"> </canvas>
|
|
|
|
|
<script>
|
|
|
|
|
window.pointApp = window.app = new MapApp({
|
|
|
|
|
view,
|
|
|
|
|
width: 512,
|
|
|
|
|
height: 512,
|
|
|
|
|
coordsLogging: true
|
|
|
|
|
})
|
|
|
|
|
var osmworld = '../assets/maps/osm/0/0/0.png'
|
|
|
|
|
let worlOSMData = new MapData(new Projection.Mercator())
|
|
|
|
|
</script>
|
|
|
|
|
<script class="doctest">
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 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: '0x000000',
|
|
|
|
|
iconAnchor: { x: 0.5, y: 1 },
|
|
|
|
|
scale: 0.2,
|
|
|
|
|
color: '0xFF00FF',
|
|
|
|
|
fillAlpha: 0,
|
|
|
|
|
items: [
|
|
|
|
|
{
|
|
|
|
|
name: 'Abidjan',
|
|
|
|
|
fontWeight: "bold",
|
|
|
|
|
icon: '../../../assets/icons//beenhere.png',
|
|
|
|
|
iconColor: 0x00ff00,
|
|
|
|
|
labelVerticalAlignment: "underneath",
|
|
|
|
|
label: 'Abidjan',
|
|
|
|
|
location: {
|
|
|
|
|
x: 5.34947,
|
|
|
|
|
y: -4.006472
|
|
|
|
|
},
|
|
|
|
|
information:
|
|
|
|
|
'... der größte städtische Ballungsraum der Elfenbeinküste.'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: 'Berlin',
|
|
|
|
|
|
|
|
|
|
location: {
|
|
|
|
|
x: 52.52543,
|
|
|
|
|
y: 13.385291
|
|
|
|
|
},
|
|
|
|
|
information:
|
|
|
|
|
'... ist die Bundeshauptstadt der Bundesrepublik Deutschland.'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
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:
|
|
|
|
|
'... ist eine Hafenstadt an der Südwestküste Südafrikas auf einer Halbinsel, die vom beeindruckenden Tafelberg dominiert wird.'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
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',
|
|
|
|
|
|
|
|
|
|
location: {
|
|
|
|
|
x: 35.696278,
|
|
|
|
|
y: 139.731366
|
|
|
|
|
},
|
|
|
|
|
information:
|
|
|
|
|
'... ist eine Global City in der Kantō-Region im Osten der japanischen Hauptinsel Honshū.'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
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)
|
|
|
|
|
pointApp.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()
|
|
|
|
|
|
|
|
|
|
//Retrieve all overlay textures.
|
|
|
|
|
overlay.selectTextures(textures)
|
|
|
|
|
|
|
|
|
|
// Just some Helpers for the Popups.
|
|
|
|
|
let popup = null
|
|
|
|
|
let cleaner = null
|
|
|
|
|
const vanishingTime = 1000
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
*
|
|
|
|
|
* 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.
|
2019-11-05 11:23:18 +01:00
|
|
|
pointApp.mapLayer.addLayer(exampleOverlayGeoLayer)
|
2019-11-04 10:59:08 +01:00
|
|
|
|
|
|
|
|
|
|
|
|
|
// 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>
|
