From 0402c54df7674aaf45723fb2ff8afa8b46aba6f6 Mon Sep 17 00:00:00 2001 From: Robin Hawkes Date: Fri, 17 Jun 2016 09:38:29 +0100 Subject: [PATCH] Updated readme and added kitchen sink example --- README.md | 22 +++++++++- examples/kitchen-sink/index.html | 20 +++++++++ examples/kitchen-sink/main.css | 4 ++ examples/kitchen-sink/main.js | 72 ++++++++++++++++++++++++++++++++ 4 files changed, 116 insertions(+), 2 deletions(-) create mode 100644 examples/kitchen-sink/index.html create mode 100644 examples/kitchen-sink/main.css create mode 100644 examples/kitchen-sink/main.js diff --git a/README.md b/README.md index 55809f9..641de97 100644 --- a/README.md +++ b/README.md @@ -21,7 +21,25 @@ Already know what you're doing? Here's the quickest way to install ViziCities... ## Examples -## Changes since 0.2 +## Main changes since 0.2 + +* Re-written from the ground up +* Complete overhaul of visual styling +* Massive performance improvements across the board +* Vastly simplified setup and API +* Better management and cleanup of memory +* Sophisticated quadtree-based grid system +* Physically-based lighting and materials (when enabled) +* Realistic day/night skybox (when enabled) +* Shadows based on position of sun in sky (when enabled) +* Built-in support for image-based tile endpoints +* Built-in support for GeoJSON and TopoJSON tile endpoints +* Built-in support for non-tiled GeoJSON and TopoJSON files +* Click events on individual features (when enabled) +* Internal caching of tile-based endpoints +* Easier to extend and add new functionality +* Easier to access and use general three.js features within ViziCities +* Separation of three.js from the core ViziCities codebase ## Getting started @@ -47,4 +65,4 @@ Want to share an interesting use of ViziCities, or perhaps just have a question ## License -ViziCities is copyright UrbanSim Inc. and uses the fair and simple BSD-3 license. Want to see it in full? No problem, [you can read it here](https://github.com/UDST/vizicities/blob/master/LICENSE). +ViziCities is copyright [UrbanSim Inc.](http://www.urbansim.com/) and uses the fair and simple BSD-3 license. Want to see it in full? No problem, [you can read it here](https://github.com/UDST/vizicities/blob/master/LICENSE). diff --git a/examples/kitchen-sink/index.html b/examples/kitchen-sink/index.html new file mode 100644 index 0000000..d1636c6 --- /dev/null +++ b/examples/kitchen-sink/index.html @@ -0,0 +1,20 @@ + + + + + Kitchen Sink ViziCities Example + + + +
+ + + + + + + + + + + diff --git a/examples/kitchen-sink/main.css b/examples/kitchen-sink/main.css new file mode 100644 index 0000000..4f8aa0b --- /dev/null +++ b/examples/kitchen-sink/main.css @@ -0,0 +1,4 @@ +* { margin: 0; padding: 0; } +html, body { height: 100%; overflow: hidden;} + +#world { height: 100%; } diff --git a/examples/kitchen-sink/main.js b/examples/kitchen-sink/main.js new file mode 100644 index 0000000..a88e671 --- /dev/null +++ b/examples/kitchen-sink/main.js @@ -0,0 +1,72 @@ +// London +var coords = [51.505, -0.09]; + +var world = VIZI.world('world', { + skybox: true, + postProcessing: true +}).setView(coords); + +// Set position of sun in sky +world._environment._skybox.setInclination(0.3); + +// Add controls +VIZI.Controls.orbit().addTo(world); + +// CartoDB basemap +VIZI.imageTileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', { + attribution: '© OpenStreetMap contributors, © CartoDB' +}).addTo(world); + +// Building and roads from Mapzen (polygons and linestrings) +var topoJSONTileLayer = VIZI.topoJSONTileLayer('https://vector.mapzen.com/osm/buildings,roads/{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, + lineColor: '#f7c616', + lineWidth: 1, + lineTransparent: true, + lineOpacity: 0.2, + lineBlending: THREE.AdditiveBlending, + lineRenderOrder: 2 + }; + }, + filter: function(feature) { + // Don't show points + return feature.geometry.type !== 'Point'; + }, + attribution: '© OpenStreetMap contributors, Who\'s On First.' +}).addTo(world); + +// London Underground lines +VIZI.geoJSONLayer('https://rawgit.com/robhawkes/4acb9d6a6a5f00a377e2/raw/30ae704a44e10f2e13fb7e956e80c3b22e8e7e81/tfl_lines.json', { + output: true, + interactive: true, + style: function(feature) { + var colour = feature.properties.lines[0].colour || '#ffffff'; + + return { + lineColor: colour, + lineHeight: 20, + lineWidth: 3, + lineTransparent: true, + lineOpacity: 0.5, + lineBlending: THREE.AdditiveBlending, + lineRenderOrder: 2 + }; + }, + onEachFeature: function(feature, layer) { + layer.on('click', function(layer, point2d, point3d, intersects) { + console.log(layer, point2d, point3d, intersects); + }); + }, + attribution: '© Transport for London.' +}).addTo(world);