{"_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":[]}
Getting started with ViziCities
Get up and running with your first visualisation, a 3D basemap of London