{"id":15030228,"url":"https://github.com/udst/vizicities","last_synced_at":"2025-12-12T04:30:22.313Z","repository":{"id":11649218,"uuid":"14155824","full_name":"UDST/vizicities","owner":"UDST","description":"A framework for 3D geospatial visualization in the browser","archived":false,"fork":false,"pushed_at":"2019-02-02T17:59:13.000Z","size":15434,"stargazers_count":2720,"open_issues_count":105,"forks_count":336,"subscribers_count":178,"default_branch":"master","last_synced_at":"2025-05-15T12:02:25.962Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://vizicities.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/UDST.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-11-05T22:18:05.000Z","updated_at":"2025-05-01T13:51:42.000Z","dependencies_parsed_at":"2022-08-31T00:22:19.037Z","dependency_job_id":null,"html_url":"https://github.com/UDST/vizicities","commit_stats":null,"previous_names":["vizicities/vizicities"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UDST%2Fvizicities","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UDST%2Fvizicities/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UDST%2Fvizicities/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UDST%2Fvizicities/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/UDST","download_url":"https://codeload.github.com/UDST/vizicities/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254337612,"owners_count":22054253,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-09-24T20:12:48.828Z","updated_at":"2025-12-12T04:30:22.249Z","avatar_url":"https://github.com/UDST.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ViziCities (0.3)\n\nA framework for 3D geospatial visualization in the browser\n\n[![](https://cloud.githubusercontent.com/assets/22612/16195132/1c0b2176-36f0-11e6-853b-3e93c04c4b17.gif)](http://vizicities.com/demos/all-the-things)\n\n\n### Important links\n\n* [Examples](#examples)\n* [Getting started](#getting-started)\n* [Attribution](#using-vizicities-please-attribute-it)\n* [License](#license)\n\n\n## Examples\n\n* [Basic example](https://github.com/UDST/vizicities/tree/master/examples/basic) (2D basemap and 3D buildings) ([demo](http://cdn.rawgit.com/UDST/vizicities/master/examples/basic/index.html))\n* [Buildings coloured by height](https://github.com/UDST/vizicities/tree/master/examples/colour-by-height) ([demo](http://cdn.rawgit.com/UDST/vizicities/master/examples/colour-by-height/index.html))\n* [Basic GeoJSON example](https://github.com/UDST/vizicities/tree/master/examples/geojson) (points, linestrings and polygons) ([demo](http://cdn.rawgit.com/UDST/vizicities/master/examples/geojson/index.html))\n* [Interactivity](https://github.com/UDST/vizicities/tree/master/examples/interactive) (open console and click on features) ([demo](http://cdn.rawgit.com/UDST/vizicities/master/examples/interactive/index.html))\n* [NYC MTA routes](https://github.com/UDST/vizicities/tree/master/examples/mta-routes) ([demo](http://cdn.rawgit.com/UDST/vizicities/master/examples/mta-routes/index.html))\n* [Lots of GeoJSON](https://github.com/UDST/vizicities/tree/master/examples/lots-of-features) features ([demo](http://cdn.rawgit.com/UDST/vizicities/master/examples/lots-of-features/index.html))\n* [All the things](https://github.com/UDST/vizicities/tree/master/examples/all-the-things) (will test even the best computers) ([demo](http://cdn.rawgit.com/UDST/vizicities/master/examples/all-the-things/index.html))\n\n\n## Main changes since 0.2\n\n* Re-written from the ground up\n* Complete overhaul of visual styling\n* Massive performance improvements across the board\n* Vastly simplified setup and API\n* Better management and cleanup of memory\n* Sophisticated quadtree-based grid system\n* Physically-based lighting and materials (when enabled)\n* Realistic day/night skybox (when enabled)\n* Shadows based on position of sun in sky (when enabled)\n* Built-in support for image-based tile endpoints\n* Built-in support for GeoJSON and TopoJSON tile endpoints\n* Built-in support for non-tiled GeoJSON and TopoJSON files\n* Click events on individual features (when enabled)\n* Internal caching of tile-based endpoints\n* Easier to extend and add new functionality\n* Easier to access and use general three.js features within ViziCities\n* Separation of three.js from the core ViziCities codebase\n\n\n## Getting started\n\nThe first step is to add the latest ViziCities distribution to your website:\n\n```html\n\u003cscript src=\"path/to/vizicities.min.js\"\u003e\u003c/script\u003e\n\u003clink rel=\"stylesheet\" href=\"path/to/vizicities.css\"\u003e\n```\n\nFrom there you will have access to the `VIZI` namespace which you can use to interact with and set up ViziCities.\n\nYou'll also want to add a HTML element that you want to contain your ViziCities visualisation:\n\n```html\n\u003cdiv id=\"vizicities\"\u003e\u003c/div\u003e\n```\n\nIt's worth adding some CSS to the page to size the ViziCities element correctly, in this case filling the entire page:\n\n```css\n* { margin: 0; padding: 0; }\nhtml, body { height: 100%; overflow: hidden;}\n#vizicities { height: 100%; }\n```\n\nThe next step is to set up an instance of the ViziCities `World` component and position it in Manhattan:\n\n```javascript\n// Manhattan\nvar coords = [40.739940, -73.988801];\nvar world = VIZI.world('vizicities').setView(coords);\n```\n\nThe first argument is the ID of the HTML element that you want to use as a container for the ViziCities visualisation.\n\nThen add some controls:\n\n```javascript\nVIZI.Controls.orbit().addTo(world);\n```\n\nAnd a 2D basemap using tiles from CartoDB:\n\n```javascript\nVIZI.imageTileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {\n  attribution: '\u0026copy; \u003ca href=\"http://www.openstreetmap.org/copyright\"\u003eOpenStreetMap\u003c/a\u003e contributors, \u0026copy; \u003ca href=\"http://cartodb.com/attributions\"\u003eCartoDB\u003c/a\u003e'\n}).addTo(world);\n```\n\nAt this point you can take a look at your handywork and should be able to see a 2D map focussed on the Manhattan area. You can move around using the mouse.\n\nIf you want to be a bit more adventurous then you can add 3D buildings using Mapzen vector tiles:\n\n```javascript\nVIZI.topoJSONTileLayer('https://vector.mapzen.com/osm/buildings/{z}/{x}/{y}.topojson?api_key=vector-tiles-NT5Emiw', {\n  interactive: false,\n  style: function(feature) {\n    var height;\n\n    if (feature.properties.height) {\n      height = feature.properties.height;\n    } else {\n      height = 10 + Math.random() * 10;\n    }\n\n    return {\n      height: height\n    };\n  },\n  filter: function(feature) {\n    // Don't show points\n    return feature.geometry.type !== 'Point';\n  },\n  attribution: '\u0026copy; \u003ca href=\"http://www.openstreetmap.org/copyright\"\u003eOpenStreetMap\u003c/a\u003e contributors, \u003ca href=\"http://whosonfirst.mapzen.com#License\"\u003eWho\\'s On First\u003c/a\u003e.'\n}).addTo(world);\n```\n\nRefresh the page and you'll see 3D buildings appear on top of the 2D basemap.\n\n[Take a look at the various examples](https://github.com/UDST/vizicities/tree/master/examples) to see some more complex uses of ViziCities.\n\n\n## Using ViziCities? Please attribute it\n\nWhile we love giving you free and open access to the code for ViziCities, we also appreciate getting some recognition for all the hard work that's gone into it. A small attribution is built into ViziCities and, while possible to remove, we'd really appreciate it if you left it in.\n\nIf you absolutely have to remove the attribution then please get in touch and we can work something out.\n\n\n## Consultancy work\n\nWant to use ViziCities but don't want to customise it yourself? Or perhaps you have an idea that might benefit from ViziCities but aren't sure how to make it a reality? We offer consultancy related to ViziCities projects and would love to see how we can help you.\n\nInterested? [Get in touch with us](mailto:vizicities@urbansim.com) and let's get talking.\n\n\n## Contact us\n\nWant to share an interesting use of ViziCities, or perhaps just have a question about it? You can communicate with the ViziCities team via email ([vizicities@urbansim.com](mailto:vizicities@urbansim.com)) and Twitter ([@ViziCities](http://twitter.com/ViziCities)).\n\n\n## License\n\nViziCities 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).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fudst%2Fvizicities","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fudst%2Fvizicities","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fudst%2Fvizicities/lists"}