2019-11-04 10:59:08 +01:00
|
|
|
<!DOCTYPE html>
|
2019-12-11 15:29:59 +01:00
|
|
|
<html lang="en" class="dark-mode">
|
2023-05-09 13:25:39 +02:00
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
|
<title>Overlay</title>
|
2019-11-04 10:59:08 +01:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
<script src="../../3rdparty/highlight/highlight.pack.js"></script>
|
2019-11-05 16:02:27 +01:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
<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" />
|
2019-11-04 10:59:08 +01:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
<script src="../../../dist/iwmlib.3rdparty.js"></script>
|
|
|
|
|
<script src="../../../dist/iwmlib.js"></script>
|
|
|
|
|
<script src="../../../dist/iwmlib.pixi.js"></script>
|
2019-11-04 10:59:08 +01:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
<link rel="shortcut icon" type="image/x-icon" href="../../../assets/icons/map.png" />
|
2019-11-04 10:59:08 +01:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
<style>
|
|
|
|
|
.inline-showcase {
|
|
|
|
|
display: flex;
|
|
|
|
|
}
|
2019-12-12 19:02:58 +01:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
.map-example {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 256px;
|
|
|
|
|
margin: 5px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<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())
|
2019-11-04 10:59:08 +01:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
function setupMap(textures) {
|
|
|
|
|
// Create the map!
|
|
|
|
|
let map = new ImageMap(new PIXI.Sprite(textures.get(osmworld)), worlOSMData)
|
2019-11-04 10:59:08 +01:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
// Setup the map in the mapapp.
|
|
|
|
|
app.setMap('osm', map)
|
|
|
|
|
app.setup().run()
|
|
|
|
|
}
|
|
|
|
|
</script>
|
2019-11-04 10:59:08 +01:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
<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
|
|
|
|
|
* }
|
|
|
|
|
* }
|
|
|
|
|
* ]
|
|
|
|
|
* }
|
|
|
|
|
*/
|
2019-12-12 19:02:58 +01:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
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>
|
2019-12-12 19:02:58 +01:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
<script class="doctest" data-collapsible data-title="Overlay">
|
|
|
|
|
let overlay = new Overlay(exampleOverlayJSON)
|
2019-12-12 19:02:58 +01:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
/**
|
|
|
|
|
* 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()
|
2019-12-12 19:02:58 +01:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
let list = [osmworld].concat(overlayTextures)
|
|
|
|
|
app.loadTextures(list, (textures) => texturesLoaded(textures), {
|
|
|
|
|
resolutionDependent: false
|
|
|
|
|
})
|
2019-12-12 19:02:58 +01:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
function texturesLoaded(textures) {
|
|
|
|
|
/** When all textures are loaded .... */
|
|
|
|
|
setupMap(textures)
|
2019-12-12 19:02:58 +01:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
//Retrieve all overlay textures.
|
|
|
|
|
overlay.selectTextures(textures)
|
2019-12-12 19:02:58 +01:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
// Just some Helpers for the Popups.
|
|
|
|
|
let popup = null
|
|
|
|
|
let cleaner = null
|
|
|
|
|
const vanishingTime = 1000
|
2019-12-12 19:02:58 +01:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
// Factories must return a geographics object.
|
|
|
|
|
Overlay.createFactory('factory', (item) => {
|
|
|
|
|
// This is applied to every item in the overlay that has
|
|
|
|
|
// the type factory'
|
2019-11-04 10:59:08 +01:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
let geographics = new GeoPoint(item.location)
|
2019-11-04 10:59:08 +01:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
geographics.drawHandler.add((graphics) => {
|
|
|
|
|
graphics.beginFill(item.color, item.fillAlpha)
|
|
|
|
|
graphics.drawRect(0, 0, 10, 10)
|
|
|
|
|
})
|
2019-11-04 10:59:08 +01:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
let text = new PIXI.Text(item.name, { fontSize: 5 })
|
|
|
|
|
geographics.graphics.addChild(text)
|
2019-11-04 10:59:08 +01:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
return geographics
|
|
|
|
|
})
|
2019-11-04 10:59:08 +01:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
/**
|
|
|
|
|
*
|
|
|
|
|
* 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)
|
|
|
|
|
}
|
2019-11-04 10:59:08 +01:00
|
|
|
}
|
|
|
|
|
}
|
2023-05-09 13:25:39 +02:00
|
|
|
</script>
|
|
|
|
|
<script></script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
