Tag Archives: GeoJSON

3D Grande Prairie Buildings (LiDAR)


Sometime in the last year, the County of Grande Prairie (Alberta) starting providing bare earth and full feature LiDAR through their Open Data Catalogue (LiDAR download map here). Here’s how you can use the data to visualize 3D buildings, using a combination of ArcGIS for Desktop (with Spatial Analyst and LAStools), QGIS, and Cesium JS.

  1. Find and download the bare earth (digital terrain model = DTM) and full feature (digital surface model = DSM) LiDAR zip files for a quarter section of your choice from the LiDAR viewer (I used the files here and here). To familiarize yourself with the concepts of DSMs and DTMs, read this answer.msw8y
  2. Download LAStools and add the LAStools toolbox to ArcMap (or ArcCatalog)
  3. Run the las2dem tool within the LAStools toolbox for each of your downloaded .las files. You can accept all default parameters.
  4. The tool should output a .tif image for each surface, projected to UTM Zone 11. If not, run Define Projection to assign the projection.
  5. The names of each layer will be the same, by default (e.g. “710622NW.tif”). Change them to be unique, so geoprocessing tools (and you) can easily tell them apart (e.g. “710622NW_BE.tif” and “710622NW_FF.tif”).
  6. The DTM and DSM each report elevations in meters above sealevel. Since we are interested in the difference between those elevations (i.e. the difference between rooftop and the ground pixels) we need to subtract the two images. You can do this using the Minus tool, or more generally, Raster Calculator. I used the expression: Int(“710622NW_FF.tif”-“710622NW_BE.tif”) to return the difference between the DSM and DTM, as integer numbers (this will simplify things later on).
  7. Eventually, we are going to want polygons to load into Cesium (on the order of hundreds or perhaps a few thousand), not individual pixels (there are 700,448 pixels in my image). At this point, we have what is called a classified image, classified by height in meter increments. We want to group this classified image by similar height values, and we can do that by processing our classified output. Following the instructions in this link, we are guided through filtering, smoothing, and generalizing our output.
  8. Run Raster to Polygon on your generalized output to produce polygons.
  9. Cesium is going to want lat/long coordinates, so you may as well run the Project tool on your polygons to switch the data to WGS84.
  10. As far as I know, ArcGIS does not support GeoJSON (which we are going to use in Cesium). Conveniently, QGIS does. So, load your polygons in QGIS and “Save As…” GeoJSON.
  11. Upload your GeoJSON to your host.
  12. Switching to Cesium, create a map and load your GeoJSON (general example here). Cycling through the GeoJSON polygons, assign the polygon height to 0, and the extruded height to match the elevation attribute in your data (for me, that was stored in the “GRIDCODE” field).
  13. That’s it! You can see my interactive example here, using a “modern” browser. Here’s a sample, showing the Paradise Inn (pictures from my example, and Tom Shield Realty):



Note: I tried and failed to add a link to the LiDAR Open Data License in my example. Hopefully, this will be sufficient.




PG Open Data & GeoJSON


The City of Prince George recently unveiled the new City Open Data website, providing access to an impressive selection of spatial (and some non-spatial) datasets. Although these datasets have been available for some time on the old open data catalog, they are all now also available as GeoJSON, GeoService, and OGC WMS.

Here‘s an example of how you can load a Prince George GeoJSON layer through the Google Maps API.

3D Prince George Buildings Map


I’ve been working through some of the demos for Cesium JS (a JavaScript library for creating 3D maps), and came across this one demonstrating how to display the buildings of Nanaimo.

I was curious to see if the data exists for Prince George, BC, and it turns out, it does (PG Open Data Catalogue, buildings download)! I’m not 100% sure if this dataset was created manually or through automation, but I’m impressed with the level of detail.

The method I used to make this map* is actually shockingly simple. I downloaded the shapefile, saved it as GeoJSON in QGIS, and uploaded it to my server. Then, the JavaScript on the webpage incorporates Cesium, loads the geometry data from the GeoJSON, adds heights from the buildings’ attributes list, and sets the camera view. That’s how easily you can make a pretty neat looking 3D map of Prince George.

*note: there are over 30,000 buildings in this dataset. It takes about 30 seconds to load, for me. It may not work on your mobile devices.