IWMBrowser/iwmlib
IWMBrowser/iwmlib
4
0
Fork 0
Code Issues 6 Pull Requests Releases Wiki Activity
1b4eee6498
iwmlib/lib/pixi/maps/overlay.html

304 lines
9.7 KiB
HTML
Raw Normal View History

Added the maps-module to the iwmlib. Migrated a ot of the content from the tuesch to the iwmlib. This is before the decoupeling of the layers.
2019-11-04 10:59:08 +01:00
<!DOCTYPE html>
commited for presentation.
2019-12-11 15:29:59 +01:00
<html lang="en" class="dark-mode">
Added the maps-module to the iwmlib. Migrated a ot of the content from the tuesch to the iwmlib. This is before the decoupeling of the layers.
2019-11-04 10:59:08 +01:00
<head>
<meta charset="UTF-8" />
<title>Overlay</title>
Improved doctests.
2019-11-05 16:02:27 +01:00
<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'>
Added the maps-module to the iwmlib. Migrated a ot of the content from the tuesch to the iwmlib. This is before the decoupeling of the layers.
2019-11-04 10:59:08 +01:00
<script src="../../../dist/iwmlib.3rdparty.js"></script>
<script src="../../../dist/iwmlib.js"></script>
<script src="../../../dist/iwmlib.pixi.js"></script>
Reworked overlay itself and doctest.
2019-12-12 19:02:58 +01:00
<link rel="shortcut icon" type="image/x-icon" href="../../../assets/icons/map.png">
Added the maps-module to the iwmlib. Migrated a ot of the content from the tuesch to the iwmlib. This is before the decoupeling of the layers.
2019-11-04 10:59:08 +01:00
<style>
.inline-showcase {
display: flex;
}
.map-example {
display: inline-block;
width: 256px;
margin: 5px;
}
</style>
</head>
<body onload="Doctest.run()">
Improved doctests.
2019-11-05 16:02:27 +01:00
<h1 class="title">Overlay</h1>
commited for presentation.
2019-12-11 15:29:59 +01:00
<!-- <a href="../../../" class="Documentation"></a> -->
Improved doctests.
2019-11-05 16:02:27 +01:00
<p class="description">
Added the maps-module to the iwmlib. Migrated a ot of the content from the tuesch to the iwmlib. This is before the decoupeling of the layers.
2019-11-04 10:59:08 +01:00
The overlayclass creates a convenient way to create and design
complex map overlays.
</p>
Improved doctests.
2019-11-05 16:02:27 +01:00
<canvas id="view" class="center"> </canvas>
Added the maps-module to the iwmlib. Migrated a ot of the content from the tuesch to the iwmlib. This is before the decoupeling of the layers.
2019-11-04 10:59:08 +01:00
<script>
Improved doctests.
2019-11-05 16:02:27 +01:00
let app = new MapApp({
Added the maps-module to the iwmlib. Migrated a ot of the content from the tuesch to the iwmlib. This is before the decoupeling of the layers.
2019-11-04 10:59:08 +01:00
view,
width: 512,
height: 512,
coordsLogging: true
})
var osmworld = '../assets/maps/osm/0/0/0.png'
Fixed cover bug. Renamed mapdata to mapprojection.
2019-12-11 16:45:26 +01:00
let worlOSMData = new MapProjection(new Projection.Mercator())
Improved doctests.
2019-11-05 16:02:27 +01:00
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()
}
Added the maps-module to the iwmlib. Migrated a ot of the content from the tuesch to the iwmlib. This is before the decoupeling of the layers.
2019-11-04 10:59:08 +01:00
</script>
Improved doctests.
2019-11-05 16:02:27 +01:00
<script class="doctest" data-collapsible data-collapsed data-title="Overlay Data">
Added the maps-module to the iwmlib. Migrated a ot of the content from the tuesch to the iwmlib. This is before the decoupeling of the layers.
2019-11-04 10:59:08 +01:00
/**
* 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',
Reworked overlay itself and doctest.
2019-12-12 19:02:58 +01:00
iconColor: "0x35aaea",
Added the maps-module to the iwmlib. Migrated a ot of the content from the tuesch to the iwmlib. This is before the decoupeling of the layers.
2019-11-04 10:59:08 +01:00
iconAnchor: { x: 0.5, y: 1 },
Reworked overlay itself and doctest.
2019-12-12 19:02:58 +01:00
size: 5,
Added the maps-module to the iwmlib. Migrated a ot of the content from the tuesch to the iwmlib. This is before the decoupeling of the layers.
2019-11-04 10:59:08 +01:00
scale: 0.2,
Reworked overlay itself and doctest.
2019-12-12 19:02:58 +01:00
disabledColor: 0x000000,
disabledIconColor: 0xCCCCCC,
disabledScale: 0.5,
color: '0x3FA7EE',
Added the maps-module to the iwmlib. Migrated a ot of the content from the tuesch to the iwmlib. This is before the decoupeling of the layers.
2019-11-04 10:59:08 +01:00
items: [
{
Reworked overlay itself and doctest.
2019-12-12 19:02:58 +01:00
name: 'Custom Icon',
Added the maps-module to the iwmlib. Migrated a ot of the content from the tuesch to the iwmlib. This is before the decoupeling of the layers.
2019-11-04 10:59:08 +01:00
fontWeight: "bold",
Reworked overlay itself and doctest.
2019-12-12 19:02:58 +01:00
icon: '../../../assets/icons/beenhere.png',
Added the maps-module to the iwmlib. Migrated a ot of the content from the tuesch to the iwmlib. This is before the decoupeling of the layers.
2019-11-04 10:59:08 +01:00
iconColor: 0x00ff00,
Reworked overlay itself and doctest.
2019-12-12 19:02:58 +01:00
iconAlpha: 0.5,
size: 0,
Added the maps-module to the iwmlib. Migrated a ot of the content from the tuesch to the iwmlib. This is before the decoupeling of the layers.
2019-11-04 10:59:08 +01:00
labelVerticalAlignment: "underneath",
label: 'Abidjan',
location: {
x: 5.34947,
y: -4.006472
},
information:
Reworked overlay itself and doctest.
2019-12-12 19:02:58 +01:00
'Here a custom icon is used. It overrides the icon setting in the global section.'
Added the maps-module to the iwmlib. Migrated a ot of the content from the tuesch to the iwmlib. This is before the decoupeling of the layers.
2019-11-04 10:59:08 +01:00
},
{
name: 'Berlin',
Reworked overlay itself and doctest.
2019-12-12 19:02:58 +01:00
label: "enabled",
disabledLabel: "disabled",
Added the maps-module to the iwmlib. Migrated a ot of the content from the tuesch to the iwmlib. This is before the decoupeling of the layers.
2019-11-04 10:59:08 +01:00
location: {
x: 52.52543,
y: 13.385291
},
information:
Reworked overlay itself and doctest.
2019-12-12 19:02:58 +01:00
'... ist die Bundeshauptstadt der Bundesrepublik Deutschland.',
enabled: false
Added the maps-module to the iwmlib. Migrated a ot of the content from the tuesch to the iwmlib. This is before the decoupeling of the layers.
2019-11-04 10:59:08 +01:00
},
{
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:
Reworked overlay itself and doctest.
2019-12-12 19:02:58 +01:00
`This item adjusts it's size according to the map.`
Added the maps-module to the iwmlib. Migrated a ot of the content from the tuesch to the iwmlib. This is before the decoupeling of the layers.
2019-11-04 10:59:08 +01:00
},
{
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',
Reworked overlay itself and doctest.
2019-12-12 19:02:58 +01:00
type: "factory",
label: "factory",
Added the maps-module to the iwmlib. Migrated a ot of the content from the tuesch to the iwmlib. This is before the decoupeling of the layers.
2019-11-04 10:59:08 +01:00
location: {
x: 35.696278,
y: 139.731366
},
information:
'... ist eine Global City in der Kantō-Region im Osten der japanischen Hauptinsel Honshū.'
}
]
}
Improved doctests.
2019-11-05 16:02:27 +01:00
</script>
<script class="doctest" data-collapsible data-title="Overlay">
Added the maps-module to the iwmlib. Migrated a ot of the content from the tuesch to the iwmlib. This is before the decoupeling of the layers.
2019-11-04 10:59:08 +01:00
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)
Improved doctests.
2019-11-05 16:02:27 +01:00
app.loadTextures(list, textures => texturesLoaded(textures), {
Added the maps-module to the iwmlib. Migrated a ot of the content from the tuesch to the iwmlib. This is before the decoupeling of the layers.
2019-11-04 10:59:08 +01:00
resolutionDependent: false
})
function texturesLoaded(textures) {
Reworked overlay itself and doctest.
2019-12-12 19:02:58 +01:00
Added the maps-module to the iwmlib. Migrated a ot of the content from the tuesch to the iwmlib. This is before the decoupeling of the layers.
2019-11-04 10:59:08 +01:00
/** When all textures are loaded .... */
Improved doctests.
2019-11-05 16:02:27 +01:00
setupMap(textures)
Added the maps-module to the iwmlib. Migrated a ot of the content from the tuesch to the iwmlib. This is before the decoupeling of the layers.
2019-11-04 10:59:08 +01:00
//Retrieve all overlay textures.
overlay.selectTextures(textures)
// Just some Helpers for the Popups.
let popup = null
let cleaner = null
const vanishingTime = 1000
Reworked overlay itself and doctest.
2019-12-12 19:02:58 +01: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'
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
})
Added the maps-module to the iwmlib. Migrated a ot of the content from the tuesch to the iwmlib. This is before the decoupeling of the layers.
2019-11-04 10:59:08 +01: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.
Improved doctests.
2019-11-05 16:02:27 +01:00
app.mapLayer.addLayer(exampleOverlayGeoLayer)
Added the maps-module to the iwmlib. Migrated a ot of the content from the tuesch to the iwmlib. This is before the decoupeling of the layers.
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>
Reference in New Issue Copy Permalink