Tuesday, March 25, 2014

3D Visualization of Manhattan using QGIS Plugin

GIS Blogger Anita Graser, aka Underdark, has created a nice visualization using the QGIS2threejs plugin, including an interactive web-based version.  I won't repeat the instructions listed on her blog, but I will make a few suggestions as I go along. Her eloquent map features buildings extruded (constant height), trees, and some elevation changes. Feeling inspired, I thought I would give it a quick try.

If you just want to see the visualization, visit: http://webmapexamples.net/3DExample/Cityscape.html

Note: You will need Firefox, Chrome, or Internet Explorer 11--basically a Web-GL capable browser to view the visualizations.

WebGL is an API that allows for 3D visualizations to be displayed in a web browser without additional plugins. So, users won't need to install anything to view your product.  The threejs plugin is a JavaScript library that helps to keep everything neat and tidy.  For examples of threejs projects, check out this website: http://threejs.org/ which is filled with examples of featured projects.  Believe it or not, the projects you will see below consist of five files that take up less than 5 megabytes of storage.

Tip #1: Using a shapefile or digitizing a boundary for an extent can help to speed the project along and keep the look of your map consistent.  In QGIS, you can do this using the AutoTrace plugin.

For the project, I focused on Manhattan from Central Park down to just below times square.

Below is what the project looks like in QGIS.  I left the bound on to show the project area.  I used a building footprint shapefile that contained height from New York City's Open Data Portal.  Please note: This file is large ~ 180 MB.  In addition, there is a basemap from Open Street Map using the QGIS plugin, and a DEM.  You can also add other point, polygon, or line features to your 3D map.  I have chosen to stay with just buildings.  I color-coded the buildings based on height for effect (redder is taller).  Click on any of the screenshots to magnify them.

Project area and files 
Running the plugin is rather quick.  The result is five files exported to a folder of your choosing.  The contents of the folder can be placed into the root or public directory of web hosting service to publish to the web!  Of course, you can also double-click the resulting *.html file to open it on your desktop--please note some broswers may try to block you from opening it.  So right-click, and choose open with a friendly browser like Chrome or Firefox.

Tip #2:  I created a new variable to half the building heights.  Otherwise, the tall buildings of NYC barely fit in the web browser and makes viewing awkward and challenging.

You can view the visualization at: http://webmapexamples.net/3DExample/Cityscape.html

When you first open the html file, the view will be oriented the same way you have the files in QGIS.  If you have not used 3D viewers before, you can navigate using the left and right mouse buttons and wheel to  pan, rotate, and zoom.  Try not to make sudden moves with the mouse because it is easy to get disoriented. Refreshing the web page will send you back to the starting view.
3D Visualization of Manhattan.  Redder buildings are taller.
As you zoom and pan, you can bring areas into closer view.  Here looking down 7th Avenue in NYC.

A closer look: From Central Park down 7th Avenue
Lastly, an overhead view of Times Square...
Can you see where the ball is dropped on New Year's...One Times Square?
Overall, the plugin was fast and easy to use.  Not only can it be used for creating cityscapes...You could also visualize chloropleth maps in 3D, for example.  Performance in browser was smooth.  I saw memory usage similar to what Underdark reported, around 1.6 GB of RAM.  This is reduced if you do not constantly hold down any of the mouse buttons--occasionally releasing as you view.

Update #1: If the basemap is not loading, and you see a black rectangle, reload/refresh your browser once or twice and it should appear!

Update #2: Forgot to mention: Since almost 2 GB of RAM is used--this prevents viewing the maps on a mobile device, since most mobile devices don't have or max out at 2 GB.  I have gotten them to load in Android after a long time, but you won't be able to manipulate them (zoom, pan, rotate,etc.)


  1. hi there -- how did you get this to render without the sides? i am struggling to figure this out!!

    1. Hi Leah, I created a shapefile for my area of interest/project area. For example, you can use the AutoTrace plugin to draw a simple boundary/polygon and save it as a shapefile. I used this shapefile to clip the building and elevation files before using the plugin. Does this answer your question?
      - Jon

  2. hi Jon, I see some great 3D work here. I've been trying to do something similar for a project of mine and I couldnt get through enough sources to help me come up with such results. It would be of great help if you could help me do the same.

  3. HI Prikyanka, In brief, you will need a Digital Elevation Model or flat raster, a basemap (any will do), and some vector data. For more information, see below.

    Other tutorials:

  4. Congratulation for the great post. Those who come to read your article will find lots of helpful and informative tips.

    media photography

  5. Great post.

    Any ideas on how to get the files uploaded into a worpress web page?

  6. There appears to be a plugin(s) for Wordpress using Leaflet:


    but otherwise you would need a folder to host the a web page.

  7. I've been having a blast with this plugin. Any idea how one might force it export at full (or just "high") resolution at large spatial extents? See 2 examples below, one with a finer extent and a second at a larger spatial extent. The more zoomed in version seems to have greater detail from my LiDAR DEM and approximated 1933 canopy/tree heights than the surface with a broader expanse. It would be nice to have the same resolution no matter what.

    small: http://people.duke.edu/~zsb3/CCZO_RoseHill_small.html

    big: http://people.duke.edu/~zsb3/CCZO_RoseHill_big.html

    1. Try selecting "World" and adjusting the extent and size. Also, try adjusting the sampling from the "DEM" menu.

  8. Thank you! Maybe someone looking for 3d render service for architects and designers. I found good one - archicgi.com.