<!DOCTYPE html>
<html lang="en" class="dark-mode">
<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>
<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">
<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">
/**
* 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
})
/**
*
* 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>