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/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 9bc601c..c313d5b 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: #ffffff;
+ border-radius: 3px 0 0;
+ opacity: 0;
+ transition: opacity 100ms linear;
+}
+
+.is-visible #attribution-container {
+ opacity: 1;
+}