From 2aa7406b5c106c061d8c9c9c596665b7eb1b6c21 Mon Sep 17 00:00:00 2001 From: Matthew Harrison-Jones Date: Thu, 15 Sep 2016 17:04:17 +0100 Subject: [PATCH 1/2] Add support to view other attributions --- package.json | 1 + src/World.js | 28 +++++++++++++++++++++++++++- src/layer/Layer.js | 2 ++ src/vizicities.css | 27 +++++++++++++++++++++++---- 4 files changed, 53 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 4a1ff59..24a8e68 100644 --- a/package.json +++ b/package.json @@ -88,6 +88,7 @@ "lodash.throttle": "^4.0.0", "lru-cache": "^4.0.0", "reqwest": "^2.0.5", + "shortid": "^2.2.6", "three": "^0.74.0", "topojson": "^1.6.24", "xhr2": "^0.1.3" diff --git a/src/World.js b/src/World.js index fc44c31..e818217 100644 --- a/src/World.js +++ b/src/World.js @@ -49,14 +49,22 @@ class World extends EventEmitter { } _initAttribution() { - var message = 'Powered by ViziCities'; + var message = 'ViziCities | Attribution'; var element = document.createElement('div'); element.classList.add('vizicities-attribution'); + var additionalElem = document.createElement('div'); + additionalElem.id = 'attribution-container'; + element.innerHTML = message; + element.appendChild(additionalElem); this._container.appendChild(element); + + document.getElementById('show-attr').addEventListener('click', function(e) { + e.currentTarget.parentNode.classList.toggle('is-visible'); + }); } _initEngine() { @@ -133,6 +141,21 @@ class World extends EventEmitter { this.emit('postUpdate', delta); } + _addAttribution(id, message) { + var container = document.getElementById('attribution-container'); + + var span = document.createElement('p'); + span.dataset.layer = id; + span.innerHTML = message; + + container.appendChild(span); + } + + _removeAttribution(id) { + var elem = document.querySelectorAll('#attribution-container [data-layer="' + id + '"]')[0]; + elem.remove(); + } + // Set world view setView(latlon) { // Store initial geographic coordinate for the [0,0,0] world position @@ -230,6 +253,9 @@ class World extends EventEmitter { return new Promise((resolve, reject) => { layer._addToWorld(this).then(() => { + if (layer._options.attribution) { + this._addAttribution(layer._options.id, layer._options.attribution); + } this.emit('layerAdded', layer); resolve(this); }).catch(reject); diff --git a/src/layer/Layer.js b/src/layer/Layer.js index ed20ce6..122db3e 100644 --- a/src/layer/Layer.js +++ b/src/layer/Layer.js @@ -1,5 +1,6 @@ import EventEmitter from 'eventemitter3'; import extend from 'lodash.assign'; +import shortid from 'shortid'; import THREE from 'three'; import Scene from '../engine/Scene'; import {CSS3DObject} from '../vendor/CSS3DRenderer'; @@ -23,6 +24,7 @@ class Layer extends EventEmitter { super(); var defaults = { + id: shortid.generate(), output: true, outputToScene: true }; diff --git a/src/vizicities.css b/src/vizicities.css index 9bc601c..f01022f 100644 --- a/src/vizicities.css +++ b/src/vizicities.css @@ -1,4 +1,5 @@ .vizicities-attribution { + position: relative; background: rgba(255, 255, 255, 0.9); border-radius: 3px 0 0; bottom: 0; @@ -16,7 +17,25 @@ text-decoration: none; } - .vizicities-attribution a:hover { - color: #2bb2ed; - text-decoration: underline; - } +.vizicities-attribution a:hover { +color: #2bb2ed; +text-decoration: underline; +} + +#attribution-container { + position: absolute; + right: 0; + bottom: 0; + z-index: -1; + width: 250px; + padding: 4px 7px; + padding-right: 120px; + background: rgba(255, 255, 255, 0.9); + border-radius: 3px 0 0; + opacity: 0; + transition: opacity 100ms linear; +} + +.is-visible #attribution-container { + opacity: 1; +} From 3f0597939d540e41ccbf5b8fca0efc7cad8c61b8 Mon Sep 17 00:00:00 2001 From: Matthew Harrison-Jones Date: Fri, 16 Sep 2016 11:39:02 +0100 Subject: [PATCH 2/2] QA fixes --- src/layer/tile/GeoJSONTileLayer.js | 5 ++++- src/vizicities.css | 2 +- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/layer/tile/GeoJSONTileLayer.js b/src/layer/tile/GeoJSONTileLayer.js index af4119b..8303a97 100644 --- a/src/layer/tile/GeoJSONTileLayer.js +++ b/src/layer/tile/GeoJSONTileLayer.js @@ -106,7 +106,10 @@ class GeoJSONTileLayer extends TileLayer { } _createTile(quadcode, layer) { - return new GeoJSONTile(quadcode, this._path, layer, this._options); + var newOptions = extend({}, defaults, this._options); + delete newOptions.attribution; + + return new GeoJSONTile(quadcode, this._path, layer, newOptions); } // Destroys the layer and removes it from the scene and memory diff --git a/src/vizicities.css b/src/vizicities.css index f01022f..c313d5b 100644 --- a/src/vizicities.css +++ b/src/vizicities.css @@ -30,7 +30,7 @@ text-decoration: underline; width: 250px; padding: 4px 7px; padding-right: 120px; - background: rgba(255, 255, 255, 0.9); + background: #ffffff; border-radius: 3px 0 0; opacity: 0; transition: opacity 100ms linear;