The maps module provides a handy toolkit to easily integrate maps in an application. Create a full screen map
+ application by using the mapapp. Utilize the GeoLayer-system to integrate maps in an existing application.
+ Draw graphics onto the map using geographical positions instead of pixel positions with the GeoGraphics.
+ Or just use an Overlay to quickly draw icons for each point on a map.
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/lib/pixi/maps/map.js b/lib/pixi/maps/map.js
index 5464fe7..c39ffb5 100644
--- a/lib/pixi/maps/map.js
+++ b/lib/pixi/maps/map.js
@@ -93,10 +93,18 @@ export class GeoMap {
}
flushHandlers() {
- // this.onLoaded
+ this.onLoad.empty()
this.onTransform.empty()
}
+ /**
+ * Locks all transformations on the map.
+ * Single parameters can be set if necessary. False means the value is locked, true means they can be modified.
+ *
+ * @public
+ * @param {object} [{ rotatable = false, translatable = false, movableX = false, movableY = false, scalable = false }={}]
+ * @memberof GeoMap
+ */
lock({ rotatable = false, translatable = false, movableX = false, movableY = false, scalable = false } = {}) {
if (this.image && this.image.scatter) {
this.image.scatter.translatable = rotatable
@@ -105,30 +113,26 @@ export class GeoMap {
this.image.scatter.rotatable = movableY
this.image.scatter.scalable = scalable
}
-
- // Issue #001: This causes the map to not be displayed at the correct position on
- // map change.
- // // Rotation does not yet work with the cover mechanism.
- // //this.rotatable = false
- // this.translatable = false
- // this.scalable = false
}
+ /**
+ * Unlocks all transformations on the map.
+ * Single parameters can be set if necessary. False means the value is locked, true means they can be modified.
+ *
+ * @public
+ * @param {object} [{ rotatable = false, translatable = false, movableX = false, movableY = false, scalable = false }={}]
+ * @memberof GeoMap
+ */
unlock({ rotatable = true, translatable = true, movableX = true, movableY = true, scalable = true } = {}) {
- if (this.image && this.image.scatter) {
- this.image.scatter.translatable = translatable
- this.image.scatter.movableX = movableX
- this.image.scatter.movableY = movableY
- this.image.scatter.rotatable = rotatable
- this.image.scatter.scalable = scalable
- }
- // Issue #001
- // // Rotation does not yet work with the cover mechanism.
- // //this.rotatable = true
- // this.translatable = true
- // this.scalable = true
+ this.lock({ rotatable, translatable, movableX, movableY, scalable })
}
+ /**
+ * Unloads the image of the map.
+ *
+ * @public
+ * @memberof GeoMap
+ */
unload() {
if (this.image) {
if (this.image.parent) {
@@ -142,6 +146,12 @@ export class GeoMap {
}
}
+ /**
+ * Removes the map, freeing all memory ba flushing handlers and removing the image.
+ *
+ * @public
+ * @memberof GeoMap
+ */
remove() {
if (this.image) this.image.mask = null
@@ -175,8 +185,6 @@ export class GeoMap {
this.image = image
if (frame) this.setFrame(frame)
- let boundaries = this.mapdata.getBoundaries()
-
let scatterOpts = Object.assign({
cover: this.cover,
scaleable: this.scaleable,
@@ -186,7 +194,6 @@ export class GeoMap {
startScale: this.startScale,
minScale: this.minScale,
maxScale: this.maxScale,
- boundaries,
onTransform: this.transformed.bind(this)
})
@@ -242,7 +249,7 @@ export class GeoMap {
* to a coordinate with latitude and longitude.
*
*
- * @param {object} point - Point in form of {x: x_val, y: y_val}.
+ * @param {object} point - Point in form of {x, y}.
* @returns {object} - Coordinates on the map in form of {x: latitude, y: longitude}.
*/
coordinatesFromPoint(point) {
@@ -254,7 +261,7 @@ export class GeoMap {
* Transform coordinates in the map into pixel positions on the deep zoom image.
*
* @param {object} coords - Coordinates of a map position in form {x: latitude, y: longitude}.
- * @return - Returns a image position in form of {x: x_val, y: y_val}.
+ * @return {Point} - Returns a image position in form of {x: x, y: y}.
*/
coordinatesToPoint(coordinates) {
return this.toAbsolutePixelCoordinates(this.mapdata.toPixel(coordinates))
diff --git a/lib/pixi/maps/mapapp.js b/lib/pixi/maps/mapapp.js
index e3b5544..7b37618 100644
--- a/lib/pixi/maps/mapapp.js
+++ b/lib/pixi/maps/mapapp.js
@@ -11,6 +11,9 @@ import { MapList } from './maplist.js'
* MapApp is responsible for showing fullscreen
* map applications.
*
+ * @export
+ * @class MapApp
+ * @extends {PIXIApp}
*/
export default class MapApp extends PIXIApp {
constructor(opts = {}) {
@@ -191,9 +194,9 @@ export default class MapApp extends PIXIApp {
}
selectMap(key) {
+ if (this.debug) console.log('Select map', key, result)
let result = this.mapList.select(key)
- console.log('Select map', key, result)
if (result && this.mapLayer) {
this.mapLayer.changeMap(this.mapList.map)
}
@@ -226,6 +229,14 @@ export default class MapApp extends PIXIApp {
this.onTransform.call(this, event)
}
+ /**
+ *
+ * Called when the mapLayer changed the map.
+ *
+ * @private
+ * @param {*} lastMap
+ * @memberof MapApp
+ */
_mapChanged(lastMap) {
if (lastMap) {
lastMap.flushHandlers()
diff --git a/lib/pixi/maps/mapdata.js b/lib/pixi/maps/mapdata.js
index 95b8f7c..b93a87e 100644
--- a/lib/pixi/maps/mapdata.js
+++ b/lib/pixi/maps/mapdata.js
@@ -14,7 +14,7 @@ export class MapData {
* @constructor
* @param {Projection}[projection] - Specifies the projection of the map (e.g. Mercator Projection).
* @param {object}[opts] - Addiditonal options.
- * @param {[[minLat, minLng],[maxLat, maxLng]]}[opts.bounds] - Describes the minimum and maximum coordinates on the map
+ * @param {array}[opts.bounds] - Describes the minimum and maximum coordinates on the map in the form of {[[minLat, minLng],[maxLat, maxLng]]}.
* @param {Point}[opts.translate] - Defines a translation, when clipping is not an option (e.g. when the whole world is shown, but translated.)
*/
constructor(projection, opts = {}) {
@@ -52,6 +52,7 @@ export class MapData {
/**
* Transforms a pixel point on the map to a geographical coordinate.
*
+ * @public
* @param {{x,y} | PIXI.Point} point - A pixel position on the map.
* @returns {{x,y} | PIXI.Point} - A geographical coordinate.
* @memberof MapData
@@ -84,6 +85,7 @@ export class MapData {
/**
* Transform a geographical coordinate to a pixel point on the map.
*
+ * @public
* @param {{x,y} | PIXI.Point} coordinates - A point in the form of {x:lat,y:lng}.
* @returns {{x,y} | PIXI.Point} point - A pixel position on the map.
* @memberof MapData
@@ -116,6 +118,18 @@ export class MapData {
return point
}
+
+ /**
+ * Get's the clipping of the map data. Clipping describes the
+ * piece of the map that is shown. E.g. if we just show a map of
+ * europe, then we have to set the clipping properly, otherwise
+ * the preojection would produce the wrong results when transforming
+ * from a point to coordinates or the other way around.
+ *
+ * @readonly
+ * @memberof MapData
+ * @returns {object} - Object that contains a min and max value of the clipping in form of: {min: {x,y}, max:{x,y}}. Where x and y are in between 0 and 1.
+ */
get clip() {
let unclipped = {
min: { x: 0, y: 0 },
@@ -125,30 +139,30 @@ export class MapData {
return this.opts.clip ? this.opts.clip : unclipped
}
+
/**
- * Bounds to pixel transforms some bounds in form of {min:{x:minLat, y:minLng},max:{x:maxLat, y:maxLng}}
- * to pixel coordinates.
+ * Returns the biggest viewport the mapdata allows.
+ * This is determined by the projecton or the clipping on the mapapp.
*
+ * @readonly
+ * @memberof MapData
*/
- getBoundaries() {
- // let min = this.toPixel(bounds.min)
- // let max = this.toPixel(bounds.max)
-
- // Y values needs to be swapped, as PIXI has it's origin
- // in the top-left corner and a regular map in the bottom-left corner.
- let boundaries = {
- min: { x: 0, y: 0 },
- max: { x: 1, y: 1 }
- }
-
- return boundaries
- }
-
get maxViewport() {
return this.opts.clip ? this.opts.clip : this.projection.maxViewport
}
}
+
+/**
+ * Special mapdata for DeepZoomMap objects.
+ *
+ * Note: It just transform the clipping parameter of the tiles config
+ * to the clipping of the mapapp.
+ *
+ * @export
+ * @class DeepZoomMapData
+ * @extends {MapData}
+ */
export class DeepZoomMapData extends MapData {
constructor(projection, tilesConfig, opts = {}) {
if (tilesConfig.clip) {
diff --git a/lib/pixi/maps/maplist.js b/lib/pixi/maps/maplist.js
index fe1c1ee..08e77c8 100644
--- a/lib/pixi/maps/maplist.js
+++ b/lib/pixi/maps/maplist.js
@@ -1,3 +1,10 @@
+/**
+ * MapList is a list of maps with one active index.
+ * It contains some utility functions to change the map.
+ *
+ * @export
+ * @class MapList
+ */
export class MapList {
constructor(active = null, maps = {}) {
this.maps = maps
@@ -9,8 +16,9 @@ export class MapList {
/**
* Selects a map from the map list.
*
+ * @public
* @param {string} active - Name of the map to select.
- * @returns
+ * @returns {Map} - Returns the active map. Returns null if no map was added to the MapList.
* @memberof MapList
*/
select(active) {
@@ -40,6 +48,13 @@ export class MapList {
return map
}
+ /**
+ * Clones the entire maplist.
+ *
+ * @public
+ * @returns {MapList} - Returns a cloned instance of this map list.
+ * @memberof MapList
+ */
clone() {
let maps = {}
@@ -50,6 +65,14 @@ export class MapList {
return new MapList(this.active, maps)
}
+ /**
+ * Adds a new map to the map list.
+ *
+ * @public
+ * @param {string} key - Key to identify the map.
+ * @param {GeoMap} map - The GeoMap to add.
+ * @memberof MapList
+ */
add(key, map) {
if (this.maps[key] != null) consol.warn('Key already in mapList. The existing key was overwritten.')
if (this.active == null) this.active = key
@@ -57,10 +80,25 @@ export class MapList {
this.maps[key] = map
}
+ /**
+ * Returns the the active map.
+ * If none is set, it returns null.
+ *
+ *@public
+ * @readonly
+ * @memberof MapList
+ */
get map() {
return this.maps && this.maps[this.active] ? this.maps[this.active] : null
}
+ /**
+ * Selects the next map in the map array.
+ *
+ * @public
+ * @returns {GeoMap} - Returns the next map in the list.
+ * @memberof MapList
+ */
next() {
let keys = Object.keys(this.maps)
let idx = keys.indexOf(this.active)
@@ -69,6 +107,13 @@ export class MapList {
return next
}
+ /**
+ * Removes all maps from the maplist.
+ * And cleans up all maps.
+ *
+ * @public
+ * @memberof MapList
+ */
cleanup() {
for (let key in this.maps) {
let map = this.maps[key]
diff --git a/lib/pixi/maps/mapviewport.html b/lib/pixi/maps/mapviewport.html
new file mode 100644
index 0000000..a1249f2
--- /dev/null
+++ b/lib/pixi/maps/mapviewport.html
@@ -0,0 +1,163 @@
+
+
+
+
+
+ MapViewport
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
MapViewport
+
+ The MapViewport works under the hood of a map layer to track the informations about the current focus point and
+ zoom position.
+ This is important to maintain the same view when maps are changed.
+
+
+
+
+
WHAT TO SEE: The map should focus Paris.
+
+
+
+
+
\ No newline at end of file
diff --git a/lib/pixi/maps/mapview.js b/lib/pixi/maps/mapviewport.js
similarity index 99%
rename from lib/pixi/maps/mapview.js
rename to lib/pixi/maps/mapviewport.js
index 3c28d0c..d4d82ff 100644
--- a/lib/pixi/maps/mapview.js
+++ b/lib/pixi/maps/mapviewport.js
@@ -6,7 +6,7 @@ import { DeepZoomMap } from './map.js'
* It ensures, that maps can be changed, without the user noticing it.
*
*/
-export default class MapView {
+export default class MapViewport {
/**
*
* @param {object} [focus = {x:0, y:0}] - Defines the startup focuspoint of the app.
diff --git a/lib/thumbnail.png b/lib/thumbnail.png
index 196e6eb..3dab009 100644
Binary files a/lib/thumbnail.png and b/lib/thumbnail.png differ
+
+ 
+
+