Tidied up examples

examples/basic-example/main.js

@@ -194,97 +194,6 @@ var choroplethConfig = {
 var switchboardChoropleth = new VIZI.BlueprintSwitchboard(choroplethConfig);
 switchboardChoropleth.addToWorld(world);
 
-var kmlConfig = {
-  input: {
-    type: "BlueprintInputKML",
-    options: {
-      path: "./data/sample.kml"
-    }
-  },
-  output: {
-    type: "BlueprintOutputDebugPoints",
-    options: {}
-  },
-  triggers: [{
-    triggerObject: "output",
-    triggerName: "initialised",
-    triggerArguments: [],
-    actionObject: "input",
-    actionName: "requestData",
-    actionArguments: [],
-    actionOutput: {}
-  }, {
-    triggerObject: "input",
-    triggerName: "dataReceived",
-    triggerArguments: ["kml"],
-    actionObject: "output",
-    actionName: "outputPoints",
-    actionArguments: ["data"],
-    actionOutput: {
-      data: {
-        // Loop through each item in trigger.geoJSON and return a new array of processed values (a map)
-        process: "map",
-        itemsObject: "kml",
-        itemsProperties: "document.placemark",
-        // Return a new object for each item with the given properties
-        transformation: {
-          coordinates: "point.coordinates"
-        }
-      }
-    }
-  }]
-};
-
-var switchboardKML = new VIZI.BlueprintSwitchboard(kmlConfig);
-switchboardKML.addToWorld(world);
-
-var colladaConfig = {
-  input: {
-    type: "BlueprintInputKML",
-    options: {
-      path: "./data/kml-model/sample.kml"
-    }
-  },
-  output: {
-    type: "BlueprintOutputCollada",
-    options: {
-      modelPathPrefix: "./data/kml-model/"
-    }
-  },
-  triggers: [{
-    triggerObject: "output",
-    triggerName: "initialised",
-    triggerArguments: [],
-    actionObject: "input",
-    actionName: "requestData",
-    actionArguments: [],
-    actionOutput: {}
-  }, {
-    triggerObject: "input",
-    triggerName: "dataReceived",
-    triggerArguments: ["kml"],
-    actionObject: "output",
-    actionName: "outputCollada",
-    actionArguments: ["collada"],
-    actionOutput: {
-      collada: {
-        // Loop through each item in trigger.geoJSON and return a new array of processed values (a map)
-        process: "map",
-        itemsObject: "kml",
-        itemsProperties: "placemark.model",
-        // Return a new object for each item with the given properties
-        transformation: {
-          coordinates: ["location.longitude", "location.latitude"],
-          modelPath: "link.href"
-        }
-      }
-    }
-  }]
-};
-
-var switchboardCollada = new VIZI.BlueprintSwitchboard(colladaConfig);
-switchboardCollada.addToWorld(world);
-
 var clock = new VIZI.Clock();
 
 var update = function() {

examples/gpx-example/main.js

@@ -4,6 +4,49 @@ var world = new VIZI.World({
 
 var controls = new VIZI.ControlsMap(world.camera);
 
+var gpxConfig = {
+  input: {
+    type: "BlueprintInputGPX",
+    options: {
+      path: "./data/sample.gpx"
+    }
+  },
+  output: {
+    type: "BlueprintOutputDebugLines",
+    options: {}
+  },
+  triggers: [{
+    triggerObject: "output",
+    triggerName: "initialised",
+    triggerArguments: [],
+    actionObject: "input",
+    actionName: "requestData",
+    actionArguments: [],
+    actionOutput: {}
+  }, {
+    triggerObject: "input",
+    triggerName: "dataReceived",
+    triggerArguments: ["gpx"],
+    actionObject: "output",
+    actionName: "outputLines",
+    actionArguments: ["data"],
+    actionOutput: {
+      data: {
+        process: "map",
+        itemsObject: "gpx",
+        itemsProperties: "trk.trkseg.trkpt",
+        transformation: {
+          coordinates: ["@lon", "@lat"],
+          height: "ele"
+        }
+      }
+    }
+  }]
+};
+
+var switchboardGPX = new VIZI.BlueprintSwitchboard(gpxConfig);
+switchboardGPX.addToWorld(world);
+
 var mapConfig = {
   input: {
     type: "BlueprintInputMapTiles",
@@ -82,49 +125,6 @@ var mapConfig = {
 var switchboardMap = new VIZI.BlueprintSwitchboard(mapConfig);
 switchboardMap.addToWorld(world);
 
-var gpxConfig = {
-  input: {
-    type: "BlueprintInputGPX",
-    options: {
-      path: "./data/sample.gpx"
-    }
-  },
-  output: {
-    type: "BlueprintOutputDebugLines",
-    options: {}
-  },
-  triggers: [{
-    triggerObject: "output",
-    triggerName: "initialised",
-    triggerArguments: [],
-    actionObject: "input",
-    actionName: "requestData",
-    actionArguments: [],
-    actionOutput: {}
-  }, {
-    triggerObject: "input",
-    triggerName: "dataReceived",
-    triggerArguments: ["gpx"],
-    actionObject: "output",
-    actionName: "outputLines",
-    actionArguments: ["data"],
-    actionOutput: {
-      data: {
-        process: "map",
-        itemsObject: "gpx",
-        itemsProperties: "trk.trkseg.trkpt",
-        transformation: {
-          coordinates: ["@lon", "@lat"],
-          height: "ele"
-        }
-      }
-    }
-  }]
-};
-
-var switchboardGPX = new VIZI.BlueprintSwitchboard(gpxConfig);
-switchboardGPX.addToWorld(world);
-
 var clock = new VIZI.Clock();
 
 var update = function() {

examples/kml/collada-example/index.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+  <title>ViziCities - KML Collada Example</title>
+
+  <style type="text/css">
+    html, body {
+      height: 100%;
+      width: 100%;
+    }
+
+    body {
+      background: #222;
+      margin: 0;
+      overflow: hidden;
+      padding: 0;
+    }
+
+    #vizicities-viewport {
+      height: 720px;
+      left: 50%;
+      margin: -360px 0 0 -640px;
+      position: absolute;
+      top: 50%;
+      width: 1280px;
+    }
+  </style>
+
+  <link rel="stylesheet" type="text/css" href="../../../build/vizi.css">
+</head>
+<body>
+  <div id="vizicities-viewport"></div>
+  <script src="../../../build/vizi.js"></script>
+  <script src="main.js"></script>
+</body>
+</html>

examples/kml/collada-example/main.js

@@ -0,0 +1,142 @@
+var world = new VIZI.World({
+  viewport: document.querySelector("#vizicities-viewport"),
+  center: new VIZI.LatLon(40.01000594412381, -105.2727379358738)
+});
+
+var controls = new VIZI.ControlsMap(world.camera);
+
+var colladaConfig = {
+  input: {
+    type: "BlueprintInputKML",
+    options: {
+      path: "./data/sample.kml"
+    }
+  },
+  output: {
+    type: "BlueprintOutputCollada",
+    options: {
+      modelPathPrefix: "./data/"
+    }
+  },
+  triggers: [{
+    triggerObject: "output",
+    triggerName: "initialised",
+    triggerArguments: [],
+    actionObject: "input",
+    actionName: "requestData",
+    actionArguments: [],
+    actionOutput: {}
+  }, {
+    triggerObject: "input",
+    triggerName: "dataReceived",
+    triggerArguments: ["kml"],
+    actionObject: "output",
+    actionName: "outputCollada",
+    actionArguments: ["collada"],
+    actionOutput: {
+      collada: {
+        process: "map",
+        itemsObject: "kml",
+        itemsProperties: "placemark.model",
+        transformation: {
+          coordinates: ["location.longitude", "location.latitude"],
+          modelPath: "link.href"
+        }
+      }
+    }
+  }]
+};
+
+var switchboardCollada = new VIZI.BlueprintSwitchboard(colladaConfig);
+switchboardCollada.addToWorld(world);
+
+var mapConfig = {
+  input: {
+    type: "BlueprintInputMapTiles",
+    options: {
+      tilePath: "https://a.tiles.mapbox.com/v3/examples.map-i86l3621/{z}/{x}/{y}@2x.png"
+    }
+  },
+  output: {
+    type: "BlueprintOutputImageTiles",
+    options: {
+      grids: [{
+        zoom: 19,
+        tilesPerDirection: 3,
+        cullZoom: 17
+      }, {
+        zoom: 18,
+        tilesPerDirection: 3,
+        cullZoom: 16
+      }, {
+        zoom: 17,
+        tilesPerDirection: 3,
+        cullZoom: 15
+      }, {
+        zoom: 16,
+        tilesPerDirection: 3,
+        cullZoom: 14
+      }, {
+        zoom: 15,
+        tilesPerDirection: 3,
+        cullZoom: 13
+      }, {
+        zoom: 14,
+        tilesPerDirection: 3,
+        cullZoom: 12
+      }, {
+        zoom: 13,
+        tilesPerDirection: 5,
+        cullZoom: 11
+      }]
+    }
+  },
+  triggers: [{
+    triggerObject: "output",
+    triggerName: "initialised",
+    triggerArguments: ["tiles"],
+    actionObject: "input",
+    actionName: "requestTiles",
+    actionArguments: ["tiles"],
+    actionOutput: {
+      tiles: "tiles" // actionArg: triggerArg
+    }
+  }, {
+    triggerObject: "output",
+    triggerName: "gridUpdated",
+    triggerArguments: ["tiles"],
+    actionObject: "input",
+    actionName: "requestTiles",
+    actionArguments: ["tiles"],
+    actionOutput: {
+      tiles: "tiles" // actionArg: triggerArg
+    }
+  }, {
+    triggerObject: "input",
+    triggerName: "tileReceived",
+    triggerArguments: ["image", "tile"],
+    actionObject: "output",
+    actionName: "outputImageTile",
+    actionArguments: ["image", "tile"],
+    actionOutput: {
+      image: "image", // actionArg: triggerArg
+      tile: "tile"
+    }
+  }]
+};
+
+var switchboardMap = new VIZI.BlueprintSwitchboard(mapConfig);
+switchboardMap.addToWorld(world);
+
+var clock = new VIZI.Clock();
+
+var update = function() {
+  var delta = clock.getDelta();
+
+  world.onTick(delta);
+  world.render();
+
+  window.requestAnimationFrame(update);
+};
+
+update();

examples/kml/point-example/index.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+  <title>ViziCities - KML Point Example</title>
+
+  <style type="text/css">
+    html, body {
+      height: 100%;
+      width: 100%;
+    }
+
+    body {
+      background: #222;
+      margin: 0;
+      overflow: hidden;
+      padding: 0;
+    }
+
+    #vizicities-viewport {
+      height: 720px;
+      left: 50%;
+      margin: -360px 0 0 -640px;
+      position: absolute;
+      top: 50%;
+      width: 1280px;
+    }
+  </style>
+
+  <link rel="stylesheet" type="text/css" href="../../../build/vizi.css">
+</head>
+<body>
+  <div id="vizicities-viewport"></div>
+  <script src="../../../build/vizi.js"></script>
+  <script src="main.js"></script>
+</body>
+</html>

examples/kml/point-example/main.js

@@ -0,0 +1,138 @@
+var world = new VIZI.World({
+  viewport: document.querySelector("#vizicities-viewport")
+});
+
+var controls = new VIZI.ControlsMap(world.camera);
+
+var kmlConfig = {
+  input: {
+    type: "BlueprintInputKML",
+    options: {
+      path: "./data/sample.kml"
+    }
+  },
+  output: {
+    type: "BlueprintOutputDebugPoints",
+    options: {}
+  },
+  triggers: [{
+    triggerObject: "output",
+    triggerName: "initialised",
+    triggerArguments: [],
+    actionObject: "input",
+    actionName: "requestData",
+    actionArguments: [],
+    actionOutput: {}
+  }, {
+    triggerObject: "input",
+    triggerName: "dataReceived",
+    triggerArguments: ["kml"],
+    actionObject: "output",
+    actionName: "outputPoints",
+    actionArguments: ["data"],
+    actionOutput: {
+      data: {
+        process: "map",
+        itemsObject: "kml",
+        itemsProperties: "document.placemark",
+        transformation: {
+          coordinates: "point.coordinates[0]"
+        }
+      }
+    }
+  }]
+};
+
+var switchboardKML = new VIZI.BlueprintSwitchboard(kmlConfig);
+switchboardKML.addToWorld(world);
+
+var mapConfig = {
+  input: {
+    type: "BlueprintInputMapTiles",
+    options: {
+      tilePath: "https://a.tiles.mapbox.com/v3/examples.map-i86l3621/{z}/{x}/{y}@2x.png"
+    }
+  },
+  output: {
+    type: "BlueprintOutputImageTiles",
+    options: {
+      grids: [{
+        zoom: 19,
+        tilesPerDirection: 3,
+        cullZoom: 17
+      }, {
+        zoom: 18,
+        tilesPerDirection: 3,
+        cullZoom: 16
+      }, {
+        zoom: 17,
+        tilesPerDirection: 3,
+        cullZoom: 15
+      }, {
+        zoom: 16,
+        tilesPerDirection: 3,
+        cullZoom: 14
+      }, {
+        zoom: 15,
+        tilesPerDirection: 3,
+        cullZoom: 13
+      }, {
+        zoom: 14,
+        tilesPerDirection: 3,
+        cullZoom: 12
+      }, {
+        zoom: 13,
+        tilesPerDirection: 5,
+        cullZoom: 11
+      }]
+    }
+  },
+  triggers: [{
+    triggerObject: "output",
+    triggerName: "initialised",
+    triggerArguments: ["tiles"],
+    actionObject: "input",
+    actionName: "requestTiles",
+    actionArguments: ["tiles"],
+    actionOutput: {
+      tiles: "tiles" // actionArg: triggerArg
+    }
+  }, {
+    triggerObject: "output",
+    triggerName: "gridUpdated",
+    triggerArguments: ["tiles"],
+    actionObject: "input",
+    actionName: "requestTiles",
+    actionArguments: ["tiles"],
+    actionOutput: {
+      tiles: "tiles" // actionArg: triggerArg
+    }
+  }, {
+    triggerObject: "input",
+    triggerName: "tileReceived",
+    triggerArguments: ["image", "tile"],
+    actionObject: "output",
+    actionName: "outputImageTile",
+    actionArguments: ["image", "tile"],
+    actionOutput: {
+      image: "image", // actionArg: triggerArg
+      tile: "tile"
+    }
+  }]
+};
+
+var switchboardMap = new VIZI.BlueprintSwitchboard(mapConfig);
+switchboardMap.addToWorld(world);
+
+var clock = new VIZI.Clock();
+
+var update = function() {
+  var delta = clock.getDelta();
+
+  world.onTick(delta);
+  world.render();
+
+  window.requestAnimationFrame(update);
+};
+
+update();