Permalink
Browse files

Added attribution

  • Loading branch information...
1 parent b9dbf3b commit a261a49e57d928cb914177b449bab7e79247a2c0 @robhawkes robhawkes committed Jun 17, 2016
View
@@ -13,11 +13,6 @@ A framework for 3D geospatial visualisation in the browser
* License
-## Quick install
-
-Already know what you're doing? Here's the quickest way to install ViziCities...
-
-
## Examples
* Basic example (2D basemap and 3D buildings)
@@ -50,6 +45,85 @@ Already know what you're doing? Here's the quickest way to install ViziCities...
## Getting started
+The first step is to add the latest ViziCities distribution to your website:
+
+```html
+<script src="path/to/vizicities.min.js"></script>
+<link rel="stylesheet" href="path/to/vizicities.css">
+```
+
+From there you will have access to the `VIZI` namespace which you can use to interact with and set up ViziCities.
+
+You'll also want to add a HTML element that you want to contain your ViziCities visualisation:
+
+```html
+<div id="vizicities"></div>
+```
+
+It's worth adding some CSS to the page to size the ViziCities element correctly, in this case filling the entire page:
+
+```css
+* { margin: 0; padding: 0; }
+html, body { height: 100%; overflow: hidden;}
+#vizicities { height: 100%; }
+```
+
+The next step is to set up an instance of the ViziCities `World` component and position it in Manhattan:
+
+```javascript
+// Manhattan
+var coords = [40.739940, -73.988801];
+var world = VIZI.world('vizicities').setView(coords);
+```
+
+The first argument is the ID of the HTML element that you want to use as a container for the ViziCities visualisation.
+
+Then add some controls:
+
+```javascript
+VIZI.Controls.orbit().addTo(world);
+```
+
+And a 2D basemap using tiles from CartoDB:
+
+```javascript
+VIZI.imageTileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
+ attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
+}).addTo(world);
+```
+
+At this point you can take a look at your handywork and should be able to see a 2D map focussed on the Manhattan area. You can move around using the mouse.
+
+If you want to be a bit more adventurous then you can add 3D buildings using Mapzen vector tiles:
+
+```javascript
+VIZI.topoJSONTileLayer('https://vector.mapzen.com/osm/buildings/{z}/{x}/{y}.topojson?api_key=vector-tiles-NT5Emiw', {
+ interactive: false,
+ style: function(feature) {
+ var height;
+
+ if (feature.properties.height) {
+ height = feature.properties.height;
+ } else {
+ height = 10 + Math.random() * 10;
+ }
+
+ return {
+ height: height
+ };
+ },
+ filter: function(feature) {
+ // Don't show points
+ return feature.geometry.type !== 'Point';
+ },
+ attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, <a href="http://whosonfirst.mapzen.com#License">Who\'s On First</a>.'
+}).addTo(world);
+```
+
+Refresh the page and you'll see 3D buildings appear on top of the 2D basemap.
+
+[Take a look at the various examples](https://github.com/UDST/vizicities/tree/master/examples) to see some more complex uses of ViziCities.
+
## Using ViziCities? Please attribute it
@@ -64,6 +138,11 @@ If you absolutely have to remove the attribution then please get in touch and we
* How to contribute
+## Consultancy work
+
+We offer consultancy work...
+
+
## Contact us
Want to share an interesting use of ViziCities, or perhaps just have a question about it? You can communicate with the ViziCities team via email (hello@vizicities.com) and Twitter (@ViziCities).
View
@@ -0,0 +1,22 @@
+.vizicities-attribution {
+ background: rgba(255, 255, 255, 0.9);
+ border-radius: 3px 0 0;
+ bottom: 0;
+ color: #666;
+ font-family: Arial, Verdana, sans-serif;
+ font-size: 11px;
+ padding: 4px 7px;
+ position: absolute;
+ right: 0;
+ z-index: 9998;
+}
+
+.vizicities-attribution a, .vizicities-attribution a:visited {
+ color: #2bb2ed;
+ text-decoration: none;
+}
+
+ .vizicities-attribution a:hover {
+ color: #2bb2ed;
+ text-decoration: underline;
+ }
View
@@ -233,6 +233,7 @@ return /******/ (function(modules) { // webpackBootstrap
this._controls = [];
this._initContainer(domId);
+ this._initAttribution();
this._initEngine();
this._initEnvironment();
this._initEvents();
@@ -249,6 +250,18 @@ return /******/ (function(modules) { // webpackBootstrap
this._container = document.getElementById(domId);
}
}, {
+ key: '_initAttribution',
+ value: function _initAttribution() {
+ var message = '<a href="http://vizicities.com" target="_blank">Powered by ViziCities</a>';
+
+ var element = document.createElement('div');
+ element.classList.add('vizicities-attribution');
+
+ element.innerHTML = message;
+
+ this._container.appendChild(element);
+ }
+ }, {
key: '_initEngine',
value: function _initEngine() {
this._engine = new _engineEngine2['default'](this._container, this);
Oops, something went wrong.
Oops, something went wrong.
@@ -4,6 +4,7 @@
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<title>All The Things ViziCities Example</title>
<link rel="stylesheet" href="main.css">
+ <link rel="stylesheet" href="../../dist/vizicities.css">
</head>
<body>
<div id="world"></div>
@@ -4,6 +4,7 @@
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<title>Basic ViziCities Example</title>
<link rel="stylesheet" href="main.css">
+ <link rel="stylesheet" href="../../dist/vizicities.css">
</head>
<body>
<div id="world"></div>
@@ -4,6 +4,7 @@
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<title>Colour by Height ViziCities Example</title>
<link rel="stylesheet" href="main.css">
+ <link rel="stylesheet" href="../../dist/vizicities.css">
</head>
<body>
<div id="world"></div>
@@ -4,6 +4,7 @@
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<title>GeoJSON ViziCities Example</title>
<link rel="stylesheet" href="main.css">
+ <link rel="stylesheet" href="../../dist/vizicities.css">
</head>
<body>
<div id="world"></div>
@@ -4,6 +4,7 @@
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<title>MTA Routes ViziCities Example</title>
<link rel="stylesheet" href="main.css">
+ <link rel="stylesheet" href="../../dist/vizicities.css">
</head>
<body>
<div id="world"></div>
View
@@ -87,14 +87,6 @@ function build() {
// Proxy the global proj4 variable to require('proj4')
'proj4': 'proj4'
},
- // resolve: {
- // alias: {
- // 'TweenLite': __dirname + '/node_modules/gsap/src/uncompressed/TweenLite.js',
- // 'TweenMax': __dirname + '/node_modules/gsap/src/uncompressed/TweenMax.js',
- // 'TimelineLite': __dirname + '/node_modules/gsap/src/uncompressed/TimelineLite.js',
- // 'TimelineMax': __dirname + '/node_modules/gsap/src/uncompressed/TimelineMax.js'
- // }
- // },
module: {
loaders: [
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }
@@ -120,6 +112,11 @@ function build() {
.pipe($.livereload());
}
+function moveCSS() {
+ return gulp.src(path.join('src', config.entryFileName + '.css'))
+ .pipe(gulp.dest(destinationFolder));
+}
+
function _mocha() {
return gulp.src(['test/setup/node.js', 'test/unit/**/*.js'], {read: false})
.pipe($.mocha({
@@ -237,8 +234,11 @@ gulp.task('lint-gulpfile', lintGulpfile);
// Lint everything
gulp.task('lint', ['lint-src', 'lint-test', 'lint-gulpfile']);
+// Move CSS
+gulp.task('move-css', moveCSS);
+
// Build two versions of the library
-gulp.task('build', ['lint', 'clean'], build);
+gulp.task('build', ['lint', 'clean', 'move-css'], build);
// Lint and run our tests
gulp.task('test', ['lint'], test);
View
@@ -26,6 +26,7 @@ class World extends EventEmitter {
this._controls = [];
this._initContainer(domId);
+ this._initAttribution();
this._initEngine();
this._initEnvironment();
this._initEvents();
@@ -40,6 +41,17 @@ class World extends EventEmitter {
this._container = document.getElementById(domId);
}
+ _initAttribution() {
+ var message = '<a href="http://vizicities.com" target="_blank">Powered by ViziCities</a>';
+
+ var element = document.createElement('div');
+ element.classList.add('vizicities-attribution');
+
+ element.innerHTML = message;
+
+ this._container.appendChild(element);
+ }
+
_initEngine() {
this._engine = new Engine(this._container, this);
View
@@ -0,0 +1,22 @@
+.vizicities-attribution {
+ background: rgba(255, 255, 255, 0.9);
+ border-radius: 3px 0 0;
+ bottom: 0;
+ color: #666;
+ font-family: Arial, Verdana, sans-serif;
+ font-size: 11px;
+ padding: 4px 7px;
+ position: absolute;
+ right: 0;
+ z-index: 9998;
+}
+
+.vizicities-attribution a, .vizicities-attribution a:visited {
+ color: #2bb2ed;
+ text-decoration: none;
+}
+
+ .vizicities-attribution a:hover {
+ color: #2bb2ed;
+ text-decoration: underline;
+ }

0 comments on commit a261a49

Please sign in to comment.