Added attribution

README.md

@@ -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).

dist/vizicities.css

@@ -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;
+  }

dist/vizicities.js

@@ -233,6 +233,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    this._controls = [];
 	
 	    this._initContainer(domId);
+	    this._initAttribution();
 	    this._initEngine();
 	    this._initEnvironment();
 	    this._initEvents();
@@ -248,6 +249,18 @@ return /******/ (function(modules) { // webpackBootstrap
 	    value: function _initContainer(domId) {
 	      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() {

examples/all-the-things/index.html

@@ -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>

examples/basic/index.html

@@ -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>

examples/colour-by-height/index.html

@@ -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>

examples/geojson/index.html

@@ -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>

examples/mta-routes/index.html

@@ -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>

gulpfile.babel.js

@@ -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);

src/World.js

@@ -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);
 

src/vizicities.css

@@ -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;
+  }