{"_id":"5452b671b7fa011600a75c27","api":{"params":[],"results":{"codes":[]},"try":true,"url":"","auth":"never","basic_auth":false},"body":"Here are some step-by-step instructions on how to get up and running with your first visualisation, a 3D basemap. You can also [use this JSBin](http://jsbin.com/guqojerova/7/edit?html,js,output) to see the example running and play with the code.\n\nThe first step is to download the [latest ViziCities build files](https://github.com/vizicities/vizicities/tree/0.2.0/build) (JS & CSS).\n\nOnce you've done that then set up the basic HTML and include the ViziCities files:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<!DOCTYPE html>\\n<html>\\n<head>\\n  <meta http-equiv=\\\"Content-type\\\" content=\\\"text/html; charset=utf-8\\\">\\n  <title>ViziCities - Basic Example</title>\\n\\n  <style type=\\\"text/css\\\">\\n    html, body {\\n      height: 100%;\\n      width: 100%;\\n    }\\n    \\n    #vizicities-viewport {\\n      height: 100%;\\n      width: 100%;\\n    }\\n  </style>\\n\\n  <link rel=\\\"stylesheet\\\" type=\\\"text/css\\\" href=\\\"vizi.css\\\">\\n</head>\\n<body>\\n  <div id=\\\"vizicities-viewport\\\"></div>\\n  <script src=\\\"vizi.min.js\\\"></script>\\n  <script src=\\\"main.js\\\"></script>\\n</body>\\n</html>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nAt this point you can initialise ViziCities in a new script (`main.js` in this example):\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"var world = new VIZI.World({\\n  viewport: document.querySelector(\\\"#vizicities-viewport\\\"),\\n  center: new VIZI.LatLon(51.50358, -0.01924)\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nAnd add some controls:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"var controls = new VIZI.ControlsMap(world.camera);\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nLet's add a basemap using [the Blueprint API](http://dev.vizicities.com/v0.2.0/docs/using-the-blueprint-api):\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"var mapConfig = {\\n  input: {\\n    type: \\\"BlueprintInputMapTiles\\\",\\n    options: {\\n      tilePath: \\\"https://a.tiles.mapbox.com/v3/examples.map-i86l3621/{z}/{x}/{y}:::at:::2x.png\\\"\\n    }\\n  },\\n  output: {\\n    type: \\\"BlueprintOutputImageTiles\\\",\\n    options: {\\n      grids: [{\\n        zoom: 13,\\n        tilesPerDirection: 5,\\n        cullZoom: 11\\n      }]\\n    }\\n  },\\n  triggers: [{\\n    triggerObject: \\\"output\\\",\\n    triggerName: \\\"initialised\\\",\\n    triggerArguments: [\\\"tiles\\\"],\\n    actionObject: \\\"input\\\",\\n    actionName: \\\"requestTiles\\\",\\n    actionArguments: [\\\"tiles\\\"],\\n    actionOutput: {\\n      tiles: \\\"tiles\\\" // actionArg: triggerArg\\n    }\\n  }, {\\n    triggerObject: \\\"output\\\",\\n    triggerName: \\\"gridUpdated\\\",\\n    triggerArguments: [\\\"tiles\\\"],\\n    actionObject: \\\"input\\\",\\n    actionName: \\\"requestTiles\\\",\\n    actionArguments: [\\\"tiles\\\"],\\n    actionOutput: {\\n      tiles: \\\"tiles\\\" // actionArg: triggerArg\\n    }\\n  }, {\\n    triggerObject: \\\"input\\\",\\n    triggerName: \\\"tileReceived\\\",\\n    triggerArguments: [\\\"image\\\", \\\"tile\\\"],\\n    actionObject: \\\"output\\\",\\n    actionName: \\\"outputImageTile\\\",\\n    actionArguments: [\\\"image\\\", \\\"tile\\\"],\\n    actionOutput: {\\n      image: \\\"image\\\", // actionArg: triggerArg\\n      tile: \\\"tile\\\"\\n    }\\n  }]\\n};\\n\\nvar switchboardMap = new VIZI.BlueprintSwitchboard(mapConfig);\\nswitchboardMap.addToWorld(world);\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nThe last step is to to set up the update and render loop:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"var clock = new VIZI.Clock();\\n\\nvar update = function() {\\n  var delta = clock.getDelta();\\n\\n  world.onTick(delta);\\n  world.render();\\n\\n  window.requestAnimationFrame(update);\\n};\\n\\nupdate();\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nLoad the HTML page in a browser and enjoy your awesome 3D view of London!","is_link":false,"slug":"getting-started","type":"basic","__v":5,"githubsync":"","project":"545285163f92fc0e009396c7","updates":[],"category":"54557c91a1e5cd0e00435ecc","excerpt":"Get up and running with your first visualisation, a 3D basemap of London","link_url":"","title":"Getting started with ViziCities","user":"545284e73f92fc0e009396c6","version":"5452b671b7fa011600a75c25","createdAt":"2014-10-30T18:36:07.141Z","order":0,"sync_unique":"","metadata":{"title":"","description":"","image":[]},"childrenPages":[]}

Guides

Blueprint Inputs

Blueprint Outputs

Blueprint General

Core

Controls

Geo

Geometry

Getting started with ViziCities

Get up and running with your first visualisation, a 3D basemap of London
Here are some step-by-step instructions on how to get up and running with your first visualisation, a 3D basemap. You can also [use this JSBin](http://jsbin.com/guqojerova/7/edit?html,js,output) to see the example running and play with the code. The first step is to download the [latest ViziCities build files](https://github.com/vizicities/vizicities/tree/0.2.0/build) (JS & CSS). Once you've done that then set up the basic HTML and include the ViziCities files: [block:code] { "codes": [ { "code": "<!DOCTYPE html>\n<html>\n<head>\n <meta http-equiv=\"Content-type\" content=\"text/html; charset=utf-8\">\n <title>ViziCities - Basic Example</title>\n\n <style type=\"text/css\">\n html, body {\n height: 100%;\n width: 100%;\n }\n \n #vizicities-viewport {\n height: 100%;\n width: 100%;\n }\n </style>\n\n <link rel=\"stylesheet\" type=\"text/css\" href=\"vizi.css\">\n</head>\n<body>\n <div id=\"vizicities-viewport\"></div>\n <script src=\"vizi.min.js\"></script>\n <script src=\"main.js\"></script>\n</body>\n</html>", "language": "html" } ] } [/block] At this point you can initialise ViziCities in a new script (`main.js` in this example): [block:code] { "codes": [ { "code": "var world = new VIZI.World({\n viewport: document.querySelector(\"#vizicities-viewport\"),\n center: new VIZI.LatLon(51.50358, -0.01924)\n});", "language": "javascript" } ] } [/block] And add some controls: [block:code] { "codes": [ { "code": "var controls = new VIZI.ControlsMap(world.camera);", "language": "javascript" } ] } [/block] Let's add a basemap using [the Blueprint API](http://dev.vizicities.com/v0.2.0/docs/using-the-blueprint-api): [block:code] { "codes": [ { "code": "var mapConfig = {\n input: {\n type: \"BlueprintInputMapTiles\",\n options: {\n tilePath: \"https://a.tiles.mapbox.com/v3/examples.map-i86l3621/{z}/{x}/{y}@2x.png\"\n }\n },\n output: {\n type: \"BlueprintOutputImageTiles\",\n options: {\n grids: [{\n zoom: 13,\n tilesPerDirection: 5,\n cullZoom: 11\n }]\n }\n },\n triggers: [{\n triggerObject: \"output\",\n triggerName: \"initialised\",\n triggerArguments: [\"tiles\"],\n actionObject: \"input\",\n actionName: \"requestTiles\",\n actionArguments: [\"tiles\"],\n actionOutput: {\n tiles: \"tiles\" // actionArg: triggerArg\n }\n }, {\n triggerObject: \"output\",\n triggerName: \"gridUpdated\",\n triggerArguments: [\"tiles\"],\n actionObject: \"input\",\n actionName: \"requestTiles\",\n actionArguments: [\"tiles\"],\n actionOutput: {\n tiles: \"tiles\" // actionArg: triggerArg\n }\n }, {\n triggerObject: \"input\",\n triggerName: \"tileReceived\",\n triggerArguments: [\"image\", \"tile\"],\n actionObject: \"output\",\n actionName: \"outputImageTile\",\n actionArguments: [\"image\", \"tile\"],\n actionOutput: {\n image: \"image\", // actionArg: triggerArg\n tile: \"tile\"\n }\n }]\n};\n\nvar switchboardMap = new VIZI.BlueprintSwitchboard(mapConfig);\nswitchboardMap.addToWorld(world);", "language": "javascript" } ] } [/block] The last step is to to set up the update and render loop: [block:code] { "codes": [ { "code": "var clock = new VIZI.Clock();\n\nvar update = function() {\n var delta = clock.getDelta();\n\n world.onTick(delta);\n world.render();\n\n window.requestAnimationFrame(update);\n};\n\nupdate();", "language": "javascript" } ] } [/block] Load the HTML page in a browser and enjoy your awesome 3D view of London!