From 530556161992b08a43901641ee5e1dcc2e2aed2a Mon Sep 17 00:00:00 2001 From: Severin Opel Date: Mon, 25 Nov 2019 18:04:11 +0100 Subject: [PATCH] Ongoing cleanup and refactoring of maps. --- css/doctest.css | 13 ++ dist/iwmlib.pixi.js | 172 +++++++++++++-------- lib/interaction.js | 1 - lib/pixi/maps/geographics.html | 6 +- lib/pixi/maps/geolayer.js | 26 +++- lib/pixi/maps/map.html | 145 +++++++++++++++++ lib/pixi/maps/map.js | 57 ++++--- lib/pixi/maps/mapapp.js | 28 +++- lib/pixi/maps/mapdata.html | 12 +- lib/pixi/maps/mapdata.js | 39 +++-- lib/pixi/maps/maplist.js | 9 +- lib/pixi/maps/overlay.js | 8 +- lib/pixi/maps/projections/projection.js | 4 +- lib/pixi/maps/projections/projections.html | 47 +++++- lib/pixi/maps/projections/robinson.js | 18 ++- lib/pixi/maps/scatter.js | 35 ++--- 16 files changed, 462 insertions(+), 158 deletions(-) create mode 100644 lib/pixi/maps/map.html diff --git a/css/doctest.css b/css/doctest.css index bc49454..7b27c7c 100644 --- a/css/doctest.css +++ b/css/doctest.css @@ -22,6 +22,19 @@ html.dark-mode { color: white; } +.dark-mode a{ + color: #569CD6; + font-weight: bold; +} + +.dark-mode a:hover{ + color: white; +} + +a{ + text-decoration: none; +} + .title { position: relative; font-size: 2.5rem; diff --git a/dist/iwmlib.pixi.js b/dist/iwmlib.pixi.js index 4e44232..70024dc 100644 --- a/dist/iwmlib.pixi.js +++ b/dist/iwmlib.pixi.js @@ -17203,22 +17203,21 @@ this.debugGraphics.endFill(); } - // if (this.cover) { - // // The reference to the element handler needs to be stored, - // // that we can remove it later on. - // this._applyInitialCover = this._applyInitialCover.bind(this) - // } + if (this.cover) { + // The reference to the element handler needs to be stored, + // that we can remove it later on. + this._applyInitialCover = this._applyInitialCover.bind(this); + this.displayObject.on('added', this._applyInitialCover); + this._applyInitialCover(); + } } - // _applyInitialCover() { - // if (this.debug) console.log('ApplyInitialCover: ', parent) + _applyInitialCover() { + if (this.debug) console.log('ApplyInitialCover: ', parent); - // if (this.displayObject.parent) - // this.forceCover(this.displayObject.parent.width, this.displayObject.parent.height) - // else { - // this.displayObject.on('added', eventHandler) - // } - // } + if (this.displayObject.parent) + this.forceCover(this.displayObject.parent.width, this.displayObject.parent.height); + } get boundaries() { if (this._boundaries) return this._boundaries @@ -17341,8 +17340,6 @@ if (this.cover) { let minCoverScale = this.calculateMinCoverScale(this.parent.width, this.parent.height); if (scale < minCoverScale) { - console.error('USE MIN COVER SCALE', minCoverScale, scale); - scale = minCoverScale; } } @@ -17458,7 +17455,7 @@ this.projection = projection; - if (this.clip) { + if (this.opts.clip) { let _cmin = this.projection.forward(this.opts.clip.min); let _cmax = this.projection.forward(this.opts.clip.max); @@ -17481,7 +17478,7 @@ } toCoordinates(point) { - if (this.clip) { + if (this.opts.clip) { let min = this.clipExt.point.min; let max = this.clipExt.point.max; @@ -17534,24 +17531,28 @@ } get clip() { - return this.opts.clip + let unclipped = { + min: { x: 0, y: 0 }, + max: { x: 1, y: 1 } + }; + + 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. * - * @param {*} bounds */ - boundsToPixel(bounds) { - let min = this.toPixel(bounds.min); - let max = this.toPixel(bounds.max); + 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: min.x, y: max.y }, - max: { x: max.x, y: min.y } + min: { x: 0, y: 0 }, + max: { x: 1, y: 1 } }; return boundaries @@ -17613,7 +17614,7 @@ * @memberof Projection */ backward(point) { - console.error('You must override the backward fuction in ' + this.name + '.'); + console.error('You must override the backward function in ' + this.name + '.'); } toString() { @@ -17625,7 +17626,7 @@ } get maxViewport() { - return { min: new PIXI.Point(-90, -180), max: new PIXI.Point(90, 180) } + return { min: new PIXI.Point(0, 0), max: new PIXI.Point(1, 1) } } } @@ -17719,10 +17720,12 @@ this.onLoad = new EventHandler('loaded', { listeners: onLoad }); this.onTransform = new EventHandler('transform', { listeners: onTransform }); - this.alpha = alpha; + this._alpha = alpha; this.cover = cover; this.debug = debug; + + //TODO discuss if this is required here. // Those are just scatter options and the information // is redundant in the map class and the scatter. @@ -17800,10 +17803,24 @@ if (this.image.parent) { this.image.parent.removeChild(this.image); } - this.image.scatter = null; + + if (this.scatter) { + this.scatter.killAnimation(); + this.image.scatter = null; + } } } + remove() { + if (this.image) this.image.mask = null; + + this.removeFrame(); + this.onTransform.empty(); + this.onLoad.empty(); + + this.unload(); + } + /** * Is called when the scatter object is transformed. * @@ -17827,12 +17844,7 @@ this.image = image; if (frame) this.setFrame(frame); - let min = this.mapdata.toPixel(this.viewport.min); - let max = this.mapdata.toPixel(this.viewport.max); - let boundaries = { - min: { x: min.x, y: max.y }, - max: { x: max.x, y: min.y } - }; + let boundaries = this.mapdata.getBoundaries(); let scatterOpts = Object.assign({ cover: this.cover, @@ -17851,17 +17863,6 @@ this.image.scatter = scatter == null ? this.scatter : scatter; this.onLoad.call(this); - - // Object.assign(this.image, { - // set scatter (value) { - // console.trace("Scatter set.") - // this._scatter = value - // }, - // get scatter (){ - // console.trace("Get Scatter.") - // return this._scatter - // } - // }) } /** @@ -17957,8 +17958,8 @@ console.error('Overload get distance in subclass.'); } - set alpha(value) { - console.error('Overload get alpha in subclass.'); + get alpha() { + return this._alpha } /** @@ -17988,6 +17989,10 @@ return coords } + removeFrame() { + this.frame = null; + } + setFrame(frame) { if (this.debug) console.log('Set Frame: ', frame); this.frame = frame; @@ -18078,10 +18083,6 @@ return null } - /** - * - */ - /** * Validates if the map data contains valid data * for creating the maps. @@ -18414,6 +18415,7 @@ class ImageMap extends GeoMap { constructor(sprite, mapdata, opts = {}) { super(mapdata, opts); + if (this.debug) console.log('Construct Image Map', sprite, mapdata, opts); this.sprite = sprite; @@ -18759,8 +18761,8 @@ _adjustLng(lng, inv = false) { let moved = inv ? lng + this.lng0 : lng - this.lng0; - if (moved < -180) moved += 360; - if (moved > 180) moved -= 360; + // if (moved < -180) moved += 360 + // if (moved > 180) moved -= 360 return moved } @@ -18781,12 +18783,20 @@ return { low: minIndex, high: maxIndex, ratio, sign } } - toString() { - return - } get name() { return 'Robinson Projection' } + + get maxViewport() { + let min = new PIXI.Point(-90, -180); + let max = new PIXI.Point(90, 180); + + max.x += this.lng0; + min.x += this.lng0; + + console.log({ min, max }); + return { min, max } + } } /** @@ -19664,6 +19674,7 @@ 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; map.name = key; this.maps[key] = map; } @@ -19680,6 +19691,13 @@ console.log(keys, idx, next); return next } + + cleanup() { + for (let key in this.maps) { + let map = this.maps[key]; + map.remove(); + } + } } //import { GeoGraphics } from "../pixi/geographics.js" @@ -19903,9 +19921,11 @@ mapList, scatterContainer, displayObject, - { onTransform = null, onChange = null, focus = null, zoom = null, viewport = null } = {} + { onTransform = null, onChange = null, focus = null, zoom = null, viewport = null, name = null } = {} ) { - super(displayObject); + super(displayObject, { + name + }); this.transformHandler = new EventHandler('onTransform', { listeners: onTransform @@ -19971,6 +19991,17 @@ return mapLayerClone } + /** + * Helper function to quickly display the next map. + * Order is defined by the key ordering of the maplist. + * + * @memberof MapLayer + */ + next() { + let nextMap = this.mapList.next(); + this.changeMap(nextMap); + } + /** * Changes the map to the specified one, keeping the position and the zoom of the old map. * @@ -20082,6 +20113,10 @@ get mapLayer() { return this } + + cleanup() { + this.mapList.cleanup(); + } } MapLayer.idx = 0; @@ -20167,11 +20202,22 @@ this._setupKeyboardUtils(); } + logMapBoundaries() { + let map = this.mapLayer.map; + + let boundaries = { + min: this.mapLayer.mapview.coordinatesFromWindowPoint(map, { x: 0, y: 0 }), + max: this.mapLayer.mapview.coordinatesFromWindowPoint(map, { x: 0, y: 0 }) + }; + + console.log(JSON.stringify(boundaries)); + } + _setupMapLayer() { this.mapContainer = new PIXI.Container(); console.log(this.mapList); this.mapLayer = new MapLayer(this.mapList, this.scene, this.mapContainer, { - name: 'Map Layer', + name: 'Root Map Layer', focus: this.focus, zoom: this.zoom }); @@ -21123,12 +21169,11 @@ return false }, informationCallback = null, - adjustItems = null + adjustItems = null, + cleanupItems = null } = {}) { const name = this.name[0].toUpperCase() + this.name.slice(1).toLowerCase() + ' Overlay'; let geoLayer = new GeoLayer(new PIXI.Container(), { name }); - - console.log(this); geoLayer.visibility = this.zoomVisibility; if (this.rescale) geoLayer.rescale = this.rescale; @@ -21141,6 +21186,9 @@ item.overlay = this; let graphics = this.createItem(item, informationCallback); geoLayer.addChild(graphics); + if (cleanupItems) { + cleanupItems(item); + } } }); return geoLayer diff --git a/lib/interaction.js b/lib/interaction.js index c97d35f..830af1e 100755 --- a/lib/interaction.js +++ b/lib/interaction.js @@ -999,7 +999,6 @@ export class InteractionMapper extends InteractionDelegate { if (found != null) { this.interaction.addTarget(key, found) } - console.log(this.target) } let size = this.interaction.current.size let limit = this.logInteractionsAbove diff --git a/lib/pixi/maps/geographics.html b/lib/pixi/maps/geographics.html index ec075e9..5044e53 100644 --- a/lib/pixi/maps/geographics.html +++ b/lib/pixi/maps/geographics.html @@ -46,7 +46,7 @@ ] function createApp(view) { - let app = new MapApp({ + let app = window.GeoPointApp = new MapApp({ view, focus: { x: 0, y: 0 }, zoom: 1, @@ -70,11 +70,11 @@ wikimedia ], (sprites) => { - let osmMap = new ImageMap(sprites.get(osmworld), new MapData(new Projection.Mercator()), { cover: true }) + let osmMap = new ImageMap(sprites.get(osmworld), new MapData(new Projection.Mercator()), { cover: true, debug: true }) let wikimediaMap = new ImageMap(sprites.get(wikimedia), new MapData(new Projection.Robinson(10)), { baseZoomHeight: sprites.get(osmworld).texture.height, - cover: true + cover: true, debug: true }) app.addMaps({ diff --git a/lib/pixi/maps/geolayer.js b/lib/pixi/maps/geolayer.js index 69a9b49..2c42757 100644 --- a/lib/pixi/maps/geolayer.js +++ b/lib/pixi/maps/geolayer.js @@ -86,7 +86,6 @@ export class GeoLayer { set visibility(value) { let { min = 0, max = Infinity } = value - console.log(min) this._visibility = { min, max } } @@ -224,9 +223,11 @@ export class MapLayer extends GeoLayer { mapList, scatterContainer, displayObject, - { onTransform = null, onChange = null, focus = null, zoom = null, viewport = null } = {} + { onTransform = null, onChange = null, focus = null, zoom = null, viewport = null, name = null } = {} ) { - super(displayObject) + super(displayObject, { + name + }) this.transformHandler = new EventHandler('onTransform', { listeners: onTransform @@ -292,6 +293,17 @@ export class MapLayer extends GeoLayer { return mapLayerClone } + /** + * Helper function to quickly display the next map. + * Order is defined by the key ordering of the maplist. + * + * @memberof MapLayer + */ + next() { + let nextMap = this.mapList.next() + this.changeMap(nextMap) + } + /** * Changes the map to the specified one, keeping the position and the zoom of the old map. * @@ -304,7 +316,7 @@ export class MapLayer extends GeoLayer { /* map , useScatterAsContainer = true // If set to false, the normal container is used. This is necessary when using submaps and the container need to be a RigidContainer.*/ ) { - console.log('Change map to: ', name) + console.log('🗺️ Change map to: ', name) let oldMap = this.map this.mapList.select(name) @@ -316,10 +328,8 @@ export class MapLayer extends GeoLayer { let map = this.map if (map) { - console.log('Load Map') map.load() - console.log(this, this.scatterContainer) this.scatterContainer.addChild(map.image) this.mapview.apply(map) @@ -403,6 +413,10 @@ export class MapLayer extends GeoLayer { get mapLayer() { return this } + + cleanup() { + this.mapList.cleanup() + } } MapLayer.idx = 0 diff --git a/lib/pixi/maps/map.html b/lib/pixi/maps/map.html new file mode 100644 index 0000000..6944a2d --- /dev/null +++ b/lib/pixi/maps/map.html @@ -0,0 +1,145 @@ + + + + + + Map + + + + + + + + + + + + + + + + +

Map

+

+ The Map class shows a geographical map using a scatter element. +

+ +

DeepZoomMap

+

Usually a DeepZoomMap will be used to display maps. It uses a DeepZoomImage to display the map in different resolutions depending on + the zoom factor.

+ + + + + + +

ImageMap

+

Single images can be also used as maps. This can be useful for examples, debugging purposes or other use-cases + when there are no different tiles required or available.

+ + + + + + + + \ No newline at end of file diff --git a/lib/pixi/maps/map.js b/lib/pixi/maps/map.js index 06d84ad..5464fe7 100644 --- a/lib/pixi/maps/map.js +++ b/lib/pixi/maps/map.js @@ -53,7 +53,7 @@ export class GeoMap { this.onLoad = new EventHandler('loaded', { listeners: onLoad }) this.onTransform = new EventHandler('transform', { listeners: onTransform }) - this.alpha = alpha + this._alpha = alpha this.cover = cover this.debug = debug @@ -134,10 +134,24 @@ export class GeoMap { if (this.image.parent) { this.image.parent.removeChild(this.image) } - this.image.scatter = null + + if (this.scatter) { + this.scatter.killAnimation() + this.image.scatter = null + } } } + remove() { + if (this.image) this.image.mask = null + + this.removeFrame() + this.onTransform.empty() + this.onLoad.empty() + + this.unload() + } + /** * Is called when the scatter object is transformed. * @@ -161,12 +175,7 @@ export class GeoMap { this.image = image if (frame) this.setFrame(frame) - let min = this.mapdata.toPixel(this.viewport.min) - let max = this.mapdata.toPixel(this.viewport.max) - let boundaries = { - min: { x: min.x, y: max.y }, - max: { x: max.x, y: min.y } - } + let boundaries = this.mapdata.getBoundaries() let scatterOpts = Object.assign({ cover: this.cover, @@ -185,17 +194,6 @@ export class GeoMap { this.image.scatter = scatter == null ? this.scatter : scatter this.onLoad.call(this) - - // Object.assign(this.image, { - // set scatter (value) { - // console.trace("Scatter set.") - // this._scatter = value - // }, - // get scatter (){ - // console.trace("Get Scatter.") - // return this._scatter - // } - // }) } /** @@ -291,8 +289,8 @@ export class GeoMap { console.error('Overload get distance in subclass.') } - set alpha(value) { - console.error('Overload get alpha in subclass.') + get alpha() { + return this._alpha } /** @@ -322,6 +320,10 @@ export class GeoMap { return coords } + removeFrame() { + this.frame = null + } + setFrame(frame) { if (this.debug) console.log('Set Frame: ', frame) this.frame = frame @@ -383,7 +385,6 @@ export class GeoMap { let maps = {} if (GeoMap._validateJson(json, error)) { for (let [mapname, data] of Object.entries(json)) { - console.log(data.tiles, data.tiles.path, root + data.tiles.path) data.tiles.path = root + data.tiles.path maps[mapname] = GeoMap._createMap(data) maps[mapname].name = mapname @@ -412,10 +413,6 @@ export class GeoMap { return null } - /** - * - */ - /** * Validates if the map data contains valid data * for creating the maps. @@ -525,7 +522,6 @@ export class DeepZoomMap extends GeoMap { * @param {object} opts - Additional options to specify the behaviour of the deep zoom image. */ constructor(mapdata, tilesConfig, opts = {}) { - if (!tilesConfig.app) console.error('App was not set in the tilesConfig.') opts = Object.assign( { maxScale: Math.min(tilesConfig.width, tilesConfig.height) / tilesConfig.tileSize, @@ -545,9 +541,7 @@ export class DeepZoomMap extends GeoMap { if (!(this.mapdata instanceof MapData)) { console.error('Use the MapData object for creating maps!') } else { - if (this.mapdata instanceof DeepZoomMapData) { - if (!this.mapdata.app) console.error('No app was set on the mapdata!') - } else { + if (!(this.mapdata instanceof DeepZoomMapData)) { console.error('Use the DeepZoomMapData object.') } } @@ -559,6 +553,7 @@ export class DeepZoomMap extends GeoMap { * @private */ load(container = null, scatter = null) { + if (!this.mapdata.app) console.error('App was not set in the mapdata.') this.info = new DeepZoomInfo(this.tilesConfig) let image = new DeepZoomImage(this.info, { app: this.mapdata.app, @@ -569,7 +564,6 @@ export class DeepZoomMap extends GeoMap { super.load(image, container, scatter) - console.log('LOADED: ', this.image) if (this.debug) console.log('Loaded image: ', image, 'With options: ', this.info) } @@ -748,6 +742,7 @@ DeepZoomMap.tintcolor = 0 export class ImageMap extends GeoMap { constructor(sprite, mapdata, opts = {}) { super(mapdata, opts) + if (this.debug) console.log('Construct Image Map', sprite, mapdata, opts) this.sprite = sprite diff --git a/lib/pixi/maps/mapapp.js b/lib/pixi/maps/mapapp.js index db1c7ab..e3b5544 100644 --- a/lib/pixi/maps/mapapp.js +++ b/lib/pixi/maps/mapapp.js @@ -88,18 +88,32 @@ export default class MapApp extends PIXIApp { this._setupKeyboardUtils() } + /** + * Log boundaries for a shown map. + * This is for development purposes only, if you want + * to find the boundaries of a shown map. + * + * @memberof MapApp + */ + logMapBoundaries() { + let map = this.mapLayer.map + + let boundaries = { + min: this.mapLayer.mapview.coordinatesFromWindowPoint(map, { x: 0, y: 0 }), + max: this.mapLayer.mapview.coordinatesFromWindowPoint(map, { x: 0, y: 0 }) + } + + console.log(JSON.stringify(boundaries)) + } + _setupMapLayer() { this.mapContainer = new PIXI.Container() - console.log(this.mapList) this.mapLayer = new MapLayer(this.mapList, this.scene, this.mapContainer, { - name: 'Map Layer', + name: 'Root Map Layer', focus: this.focus, - zoom: this.zoom + zoom: this.zoom, + onChange: this._mapChanged.bind(this) }) - - this.mapLayer.changeHandler.add(this._mapChanged.bind(this)) - - if (this.mapList.map) this.mapLayer.changeMap(this.mapList.map) } setup() { diff --git a/lib/pixi/maps/mapdata.html b/lib/pixi/maps/mapdata.html index 8d26a08..473348f 100644 --- a/lib/pixi/maps/mapdata.html +++ b/lib/pixi/maps/mapdata.html @@ -145,7 +145,7 @@ -

Clipped And Translated Map

+

Translated Map

Maps can be also translated, if the whole world is shown and clipping is not an option.

Coordinates: @@ -160,7 +160,7 @@ // Fake offset by using the old mapdata. - let translation = squared_world.toPixel({ x: 0, y: -140 }) + let translation = squared_world.toPixel({ x: 90-10, y: -140 }) console.log(translation) @@ -168,7 +168,7 @@ // And also translated in hoizontal direction. // The translate option corrects that. let translated_world = new MapData(new Projection.Mercator(), { - translate: { x: 0, y: 40 }, + translate: { x: -10, y: 40 }, }) @@ -180,7 +180,7 @@ height: size + "px", backgroundImage: "url(../assets/maps/osm/0/0/0.png)", backgroundColor: "red", - backgroundPosition: translation.x * size + "px 0" + backgroundPosition: translation.x * size + "px " +translation.y * size + "px" }) //Same as above @@ -191,7 +191,9 @@ diff --git a/lib/pixi/maps/mapdata.js b/lib/pixi/maps/mapdata.js index 19974f1..95b8f7c 100644 --- a/lib/pixi/maps/mapdata.js +++ b/lib/pixi/maps/mapdata.js @@ -27,7 +27,7 @@ export class MapData { this.projection = projection - if (this.clip) { + if (this.opts.clip) { let _cmin = this.projection.forward(this.opts.clip.min) let _cmax = this.projection.forward(this.opts.clip.max) @@ -49,8 +49,15 @@ export class MapData { } } + /** + * Transforms a pixel point on the map to a geographical coordinate. + * + * @param {{x,y} | PIXI.Point} point - A pixel position on the map. + * @returns {{x,y} | PIXI.Point} - A geographical coordinate. + * @memberof MapData + */ toCoordinates(point) { - if (this.clip) { + if (this.opts.clip) { let min = this.clipExt.point.min let max = this.clipExt.point.max @@ -74,6 +81,13 @@ export class MapData { return coordinates } + /** + * Transform a geographical coordinate to a pixel point on the map. + * + * @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 + */ toPixel(coordinates) { let coords = { x: coordinates.x, y: coordinates.y } if (this.opts.translate) { @@ -103,24 +117,28 @@ export class MapData { } get clip() { - return this.opts.clip + let unclipped = { + min: { x: 0, y: 0 }, + max: { x: 1, y: 1 } + } + + 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. * - * @param {*} bounds */ - boundsToPixel(bounds) { - let min = this.toPixel(bounds.min) - let max = this.toPixel(bounds.max) + 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: min.x, y: max.y }, - max: { x: max.x, y: min.y } + min: { x: 0, y: 0 }, + max: { x: 1, y: 1 } } return boundaries @@ -133,7 +151,6 @@ export class MapData { export class DeepZoomMapData extends MapData { constructor(projection, tilesConfig, opts = {}) { - if (!opts.app) console.error('Deepzoom Mapdata needs an app set in the options.') if (tilesConfig.clip) { opts.clip = { min: { @@ -147,8 +164,6 @@ export class DeepZoomMapData extends MapData { } } - console.log(tilesConfig, opts) - super(projection, opts) this.app = opts.app } diff --git a/lib/pixi/maps/maplist.js b/lib/pixi/maps/maplist.js index c707c7d..fe1c1ee 100644 --- a/lib/pixi/maps/maplist.js +++ b/lib/pixi/maps/maplist.js @@ -52,6 +52,7 @@ export class 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 map.name = key this.maps[key] = map } @@ -65,7 +66,13 @@ export class MapList { let idx = keys.indexOf(this.active) let next = idx + 1 < keys.length ? keys[idx + 1] : keys[0] - console.log(keys, idx, next) return next } + + cleanup() { + for (let key in this.maps) { + let map = this.maps[key] + map.remove() + } + } } diff --git a/lib/pixi/maps/overlay.js b/lib/pixi/maps/overlay.js index 37cbec0..b70b06a 100644 --- a/lib/pixi/maps/overlay.js +++ b/lib/pixi/maps/overlay.js @@ -184,12 +184,11 @@ export default class Overlay { return false }, informationCallback = null, - adjustItems = null + adjustItems = null, + cleanupItems = null } = {}) { const name = this.name[0].toUpperCase() + this.name.slice(1).toLowerCase() + ' Overlay' let geoLayer = new GeoLayer(new PIXI.Container(), { name }) - - console.log(this) geoLayer.visibility = this.zoomVisibility if (this.rescale) geoLayer.rescale = this.rescale @@ -202,6 +201,9 @@ export default class Overlay { item.overlay = this let graphics = this.createItem(item, informationCallback) geoLayer.addChild(graphics) + if (cleanupItems) { + cleanupItems(item) + } } }) return geoLayer diff --git a/lib/pixi/maps/projections/projection.js b/lib/pixi/maps/projections/projection.js index 68acd62..3a0fb3a 100644 --- a/lib/pixi/maps/projections/projection.js +++ b/lib/pixi/maps/projections/projection.js @@ -26,7 +26,7 @@ export default class Projection { * @memberof Projection */ backward(point) { - console.error('You must override the backward fuction in ' + this.name + '.') + console.error('You must override the backward function in ' + this.name + '.') } toString() { @@ -38,6 +38,6 @@ export default class Projection { } get maxViewport() { - return { min: new PIXI.Point(-90, -180), max: new PIXI.Point(90, 180) } + return { min: new PIXI.Point(0, 0), max: new PIXI.Point(1, 1) } } } diff --git a/lib/pixi/maps/projections/projections.html b/lib/pixi/maps/projections/projections.html index 86c7f58..0bc23c5 100644 --- a/lib/pixi/maps/projections/projections.html +++ b/lib/pixi/maps/projections/projections.html @@ -92,6 +92,10 @@ + + \ No newline at end of file diff --git a/lib/pixi/maps/projections/robinson.js b/lib/pixi/maps/projections/robinson.js index d64550f..a056981 100644 --- a/lib/pixi/maps/projections/robinson.js +++ b/lib/pixi/maps/projections/robinson.js @@ -117,8 +117,8 @@ export default class Robinson extends Projection { _adjustLng(lng, inv = false) { let moved = inv ? lng + this.lng0 : lng - this.lng0 - if (moved < -180) moved += 360 - if (moved > 180) moved -= 360 + // if (moved < -180) moved += 360 + // if (moved > 180) moved -= 360 return moved } @@ -139,10 +139,18 @@ export default class Robinson extends Projection { return { low: minIndex, high: maxIndex, ratio, sign } } - toString() { - return - } get name() { return 'Robinson Projection' } + + get maxViewport() { + let min = new PIXI.Point(-90, -180) + let max = new PIXI.Point(90, 180) + + max.x += this.lng0 + min.x += this.lng0 + + console.log({ min, max }) + return { min, max } + } } diff --git a/lib/pixi/maps/scatter.js b/lib/pixi/maps/scatter.js index 07ec4a3..9ac702e 100644 --- a/lib/pixi/maps/scatter.js +++ b/lib/pixi/maps/scatter.js @@ -349,22 +349,21 @@ export class CoverScatter extends AdvancedScatter { this.debugGraphics.endFill() } - // if (this.cover) { - // // The reference to the element handler needs to be stored, - // // that we can remove it later on. - // this._applyInitialCover = this._applyInitialCover.bind(this) - // } + if (this.cover) { + // The reference to the element handler needs to be stored, + // that we can remove it later on. + this._applyInitialCover = this._applyInitialCover.bind(this) + this.displayObject.on('added', this._applyInitialCover) + this._applyInitialCover() + } } - // _applyInitialCover() { - // if (this.debug) console.log('ApplyInitialCover: ', parent) + _applyInitialCover() { + if (this.debug) console.log('ApplyInitialCover: ', parent) - // if (this.displayObject.parent) - // this.forceCover(this.displayObject.parent.width, this.displayObject.parent.height) - // else { - // this.displayObject.on('added', eventHandler) - // } - // } + if (this.displayObject.parent) + this.forceCover(this.displayObject.parent.width, this.displayObject.parent.height) + } get boundaries() { if (this._boundaries) return this._boundaries @@ -487,8 +486,6 @@ export class CoverScatter extends AdvancedScatter { if (this.cover) { let minCoverScale = this.calculateMinCoverScale(this.parent.width, this.parent.height) if (scale < minCoverScale) { - console.error('USE MIN COVER SCALE', minCoverScale, scale) - scale = minCoverScale } } @@ -546,10 +543,10 @@ export class MapObjectScatter extends CoverScatter { ) super(displayObject, renderer, opts) - if (!renderer) { - console.error('Renderer was not set!') - return - } + // if (!renderer) { + // console.error('Renderer was not set!') + // return + // } this.cover = opts.cover }