kopia lustrzana https://github.com/robhawkes/vizicities
Add support to view other attributions
rodzic
4f98bee863
commit
2aa7406b5c
|
@ -88,6 +88,7 @@
|
||||||
"lodash.throttle": "^4.0.0",
|
"lodash.throttle": "^4.0.0",
|
||||||
"lru-cache": "^4.0.0",
|
"lru-cache": "^4.0.0",
|
||||||
"reqwest": "^2.0.5",
|
"reqwest": "^2.0.5",
|
||||||
|
"shortid": "^2.2.6",
|
||||||
"three": "^0.74.0",
|
"three": "^0.74.0",
|
||||||
"topojson": "^1.6.24",
|
"topojson": "^1.6.24",
|
||||||
"xhr2": "^0.1.3"
|
"xhr2": "^0.1.3"
|
||||||
|
|
28
src/World.js
28
src/World.js
|
@ -49,14 +49,22 @@ class World extends EventEmitter {
|
||||||
}
|
}
|
||||||
|
|
||||||
_initAttribution() {
|
_initAttribution() {
|
||||||
var message = '<a href="http://vizicities.com" target="_blank">Powered by ViziCities</a>';
|
var message = '<a href="http://vizicities.com" target="_blank">ViziCities</a> | <a id="show-attr" href="#">Attribution</a>';
|
||||||
|
|
||||||
var element = document.createElement('div');
|
var element = document.createElement('div');
|
||||||
element.classList.add('vizicities-attribution');
|
element.classList.add('vizicities-attribution');
|
||||||
|
|
||||||
|
var additionalElem = document.createElement('div');
|
||||||
|
additionalElem.id = 'attribution-container';
|
||||||
|
|
||||||
element.innerHTML = message;
|
element.innerHTML = message;
|
||||||
|
element.appendChild(additionalElem);
|
||||||
|
|
||||||
this._container.appendChild(element);
|
this._container.appendChild(element);
|
||||||
|
|
||||||
|
document.getElementById('show-attr').addEventListener('click', function(e) {
|
||||||
|
e.currentTarget.parentNode.classList.toggle('is-visible');
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
_initEngine() {
|
_initEngine() {
|
||||||
|
@ -133,6 +141,21 @@ class World extends EventEmitter {
|
||||||
this.emit('postUpdate', delta);
|
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
|
// Set world view
|
||||||
setView(latlon) {
|
setView(latlon) {
|
||||||
// Store initial geographic coordinate for the [0,0,0] world position
|
// Store initial geographic coordinate for the [0,0,0] world position
|
||||||
|
@ -230,6 +253,9 @@ class World extends EventEmitter {
|
||||||
|
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
layer._addToWorld(this).then(() => {
|
layer._addToWorld(this).then(() => {
|
||||||
|
if (layer._options.attribution) {
|
||||||
|
this._addAttribution(layer._options.id, layer._options.attribution);
|
||||||
|
}
|
||||||
this.emit('layerAdded', layer);
|
this.emit('layerAdded', layer);
|
||||||
resolve(this);
|
resolve(this);
|
||||||
}).catch(reject);
|
}).catch(reject);
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
import EventEmitter from 'eventemitter3';
|
import EventEmitter from 'eventemitter3';
|
||||||
import extend from 'lodash.assign';
|
import extend from 'lodash.assign';
|
||||||
|
import shortid from 'shortid';
|
||||||
import THREE from 'three';
|
import THREE from 'three';
|
||||||
import Scene from '../engine/Scene';
|
import Scene from '../engine/Scene';
|
||||||
import {CSS3DObject} from '../vendor/CSS3DRenderer';
|
import {CSS3DObject} from '../vendor/CSS3DRenderer';
|
||||||
|
@ -23,6 +24,7 @@ class Layer extends EventEmitter {
|
||||||
super();
|
super();
|
||||||
|
|
||||||
var defaults = {
|
var defaults = {
|
||||||
|
id: shortid.generate(),
|
||||||
output: true,
|
output: true,
|
||||||
outputToScene: true
|
outputToScene: true
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
.vizicities-attribution {
|
.vizicities-attribution {
|
||||||
|
position: relative;
|
||||||
background: rgba(255, 255, 255, 0.9);
|
background: rgba(255, 255, 255, 0.9);
|
||||||
border-radius: 3px 0 0;
|
border-radius: 3px 0 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
@ -16,7 +17,25 @@
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.vizicities-attribution a:hover {
|
.vizicities-attribution a:hover {
|
||||||
color: #2bb2ed;
|
color: #2bb2ed;
|
||||||
text-decoration: underline;
|
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;
|
||||||
|
}
|
||||||
|
|
Ładowanie…
Reference in New Issue