Added missing dependency to the iwmlib.

lib/pixi/maps/display.js

@@ -0,0 +1,113 @@
+/**
+ * The class CoordinateDisplay shows the coordinates of the center of the sceen
+ * in the top left of the renderer.
+ *
+ * @private
+ * @class
+ * @extends PIXI.Graphics
+ * @see {@link http://pixijs.download/dev/docs/PIXI.Graphics.html|PIXI.Graphics}
+ */
+export class CoordinateDisplay extends PIXI.Graphics {
+    /**
+     * Creates an instance of a CoordinateDisplay.
+     *
+     * @constructor
+     * @param {MapApp} mapApp - The MapApp where the coordinates should be displayed.
+     */
+    constructor(mapApp) {
+        super()
+
+        this.app = mapApp
+
+        this.crosshair = new PIXI.Graphics()
+
+        this.outerSize = 15
+        this.innerSize = 5
+        this.thickness = 2
+        this.color = 0xe73230
+
+        this.crosshair.lineStyle(this.thickness, this.color)
+        this.crosshair.moveTo(-this.outerSize, 0)
+        this.crosshair.lineTo(-this.innerSize, 0)
+        this.crosshair.moveTo(this.innerSize, 0)
+        this.crosshair.lineTo(this.outerSize, 0)
+
+        this.crosshair.moveTo(0, -this.outerSize)
+        this.crosshair.lineTo(0, -this.innerSize)
+        this.crosshair.moveTo(0, this.innerSize)
+        this.crosshair.lineTo(0, this.outerSize)
+
+        this.text = new PIXI.Text(
+            'Pending ...',
+            new PIXI.TextStyle({
+                fontFamily: 'Arial',
+                fontSize: 14,
+                fontWeight: 'bold',
+                fill: '#f6f6f6',
+                stroke: '#434f4f',
+                strokeThickness: 3
+            })
+        )
+
+        this.refreshCoordinates()
+
+        this.yOffset = 20
+        this.volume = 32
+        this.margin = 5
+
+        this._updateFrame()
+
+        this.text.position.set(20 + this.margin, this.yOffset + this.volume + 2 * this.margin)
+
+        this.addChild(this.text)
+        this.addChild(this.crosshair)
+        this.setCrosshair()
+
+        window.setInterval(this.refreshCoordinates.bind(this), 300)
+    }
+
+    _updateFrame() {
+        this.clear()
+        this.lineStyle(3, 0x434f4f, 1)
+            .beginFill(0x434f4f, 0.6)
+            .drawRoundedRect(20, this.yOffset + this.volume + this.margin, this.text.width + 2 * this.margin, 32, 5)
+            .endFill()
+    }
+
+    toggleCrosshair() {
+        if (this.crosshair.parent) this.disableCrosshair()
+        else this.enableCrosshair()
+    }
+
+    enableCrosshair() {
+        this.addChild(this.crosshair)
+    }
+
+    disableCrosshair() {
+        this.removeChild(this.crosshair)
+    }
+
+    /**
+     * Refreshes displayed coordinates.
+     *
+     * @return {MapApp} Returns the MapApp object for chaining.
+     */
+    refreshCoordinates() {
+        if (this.app.mapLayer.mapview.focus && this.app.mapLayer.mapview.zoom) {
+            //TODO pass a mapview to avoid global access.
+            var coords = this.app.mapLayer.mapview.focus
+            this.setCrosshair()
+            this.text.text =
+                'Lat: ' +
+                coords.x.toFixed(4) +
+                '| Lng: ' +
+                coords.y.toFixed(4) +
+                '| Zoom: ' +
+                this.app.mapLayer.mapview.zoom.toFixed(2)
+            this._updateFrame()
+        }
+    }
+    setCrosshair() {
+        this.crosshair.position.set(this.app.center.x, this.app.center.y)
+    }
+}