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.
This commit is contained in:
@@ -0,0 +1,261 @@
|
||||
<!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,
|
||||
{
|
||||
cover: false,
|
||||
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.
|
||||
pointApp.mapLayer.place(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>
|
||||
Reference in New Issue
Block a user