mirror
/
vizicities
kopia lustrzana https://github.com/robhawkes/vizicities
1
0
Forkuj 0
Kod Zgłoszenia Projekty Wydania Wiki Aktywność

Added examples

master
Robin Hawkes 2016-06-20 11:16:41 +01:00
rodzic 65d39b230f
commit 1dbf8586d6
6 zmienionych plików z 114 dodań i 0 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

19
examples/interactive/index.html 100644
Wyświetl plik

@ -0,0 +1,19 @@
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<title>Interactive ViziCities Example</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="../../dist/vizicities.css">
</head>
<body>
<div id="world"></div>
<script src="../vendor/three.min.js"></script>
<script src="../vendor/TweenMax.min.js"></script>
<script src="../vendor/chroma.min.js"></script>
<script src="../../dist/vizicities.min.js"></script>
<script src="main.js"></script>
</body>
</html>

4
examples/interactive/main.css 100644
Wyświetl plik

@ -0,0 +1,4 @@
* { margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden;}
#world { height: 100%; }

40
examples/interactive/main.js 100644
Wyświetl plik

@ -0,0 +1,40 @@
// London
var coords = [51.5052, -0.0308];
var world = VIZI.world('world', {
skybox: false,
postProcessing: false
}).setView(coords);
// Add controls
VIZI.Controls.orbit().addTo(world);
// CartoDB basemap
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);
// Chroma scale for height-based colours
var colourScale = chroma.scale('YlOrBr').domain([0,350]);
// Census boundary polygons
VIZI.geoJSONLayer('https://cdn.rawgit.com/robhawkes/5d6efd288b24e698783a/raw/dcf5ac06b40d7f0100cffd4af220865860e68b82/census.json', {
output: true,
interactive: true,
style: function(feature) {
var value = feature.properties.POPDEN;
var colour = colourScale(value).hex();
return {
color: colour
};
},
onEachFeature: function(feature, layer) {
layer.on('click', function(layer, point2d, point3d, intersects) {
var id = layer.feature.properties.LAD11CD;
var value = layer.feature.properties.POPDEN;
console.log(id + ': ' + value, layer, point2d, point3d, intersects);
});
}
}).addTo(world);

18
examples/lots-of-features/index.html 100644
Wyświetl plik

@ -0,0 +1,18 @@
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<title>Lots of Features ViziCities Example</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="../../dist/vizicities.css">
</head>
<body>
<div id="world"></div>
<script src="../vendor/three.min.js"></script>
<script src="../vendor/TweenMax.min.js"></script>
<script src="../../dist/vizicities.min.js"></script>
<script src="main.js"></script>
</body>
</html>

4
examples/lots-of-features/main.css 100644
Wyświetl plik

@ -0,0 +1,4 @@
* { margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden;}
#world { height: 100%; }

29
examples/lots-of-features/main.js 100644
Wyświetl plik

@ -0,0 +1,29 @@
// London
var coords = [51.505, -0.09];
var world = VIZI.world('world', {
skybox: false,
postProcessing: false
}).setView(coords);
// Add controls
VIZI.Controls.orbit().addTo(world);
// CartoDB basemap
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);
// Census boundary polygons
VIZI.geoJSONLayer('https://cdn.rawgit.com/robhawkes/9a00cb9cfbd70174d856/raw/0d56960538909a844393f9f8e091608e3b978c7a/lsoa-simplified-merged-1.5%2525.geojson', {
output: true,
style: function(feature) {
var colour = Math.random() * 0xffffff;
return {
color: colour,
transparent: true,
opacity: 0.4
};
}
}).addTo(world);