Tag Archives: 3D

The Trees of Prince George


I’ve been diving into ArcGIS Pro/ArcGIS Online lately, and here’s a quick way to produce a 3D web scene from publicly available data (final example: here). You do need an ArcGIS Online Organizational account with permission to publish in order to follow along.

  1. Find your data. In my case, I used a point feature class representing city trees, provided by the City of Prince George, through their Open Data Catalogue (layer here).
  2. In ArcGIS Pro, start a new local scene project and add the trees as a preset layer (Map -> Add Preset -> Realistic trees. Convenient!). Customize the preset symbology to use GenusName as the type, TreeHeight as the height, proportional as the crown width, and meters as the unit.
  3. Eventually, we need to share the trees as a web feature layer. Unfortunately, web feature layers are limited to 2000 features (there are 3928 trees in the dataset), so we need to split it up. You can do that by making a copy of the feature layer (copy/paste), and setting a definition query for each one (e.g. FID is Less Than 2000/FID is Greater Than or Equal to 2000).
  4. It’s time to share the web scene – Share -> Share As -> Web Scene.
  5. Fill out the web scene metadata (e.g. name, summary, tags, etc.).
  6. Click Analyze to make sure all is well, and troubleshoot the problems as necessary. You may need to change the scene coordinate reference system to match the layers.
  7. Click Share and the web scene should be uploaded to your ArcGIS organizational account. Make sure you share with everyone if this is meant to be a public scene.
  8. In a browser, log into your ArcGIS organizational account. You should see a web scene, hosted feature layer, and service definition. You can customize the web scene if you’d like.
  9. Click on the web scene item. Click Create Web App -> Using a Template. I used the simple scene viewer template. The rest takes you through some configuration steps, but they isn’t a whole lot to configure with this template.
  10. That’s it! You can see my example here: https://edynamics.maps.arcgis.com/apps/3DScene/index.html?appid=e596fa17a01f4a30ab0d7829031ba6f2

Basic Mapzen/Tangram test


Over the past few days, I’ve jumped into the Mapzen/Tangram ecosystem. First impressions: somewhat steep learning curve to grasp YAML format, lighting options are pretty neat, very fast to render GeoJSON, documentation is good although asks a lot of the newbie reader, the provided Mapzen Vector Tile Service (mostly OSM) is awesome, and I bet shaders are cool, but I don’t understand them (yet).

My example is largely based off the Mapzen JS Walkthrough, with a few simple additional wrinkles. I draw parcel geometry and attribute data directly from Open Data Prince George. I take building data from the same source, remove OSM buildings from the scene, and draw/extrude 3D buildings based on the building height attribute.

Runaway Train Simulation (Regina, SK)


CBC reported on a runaway train car that rumbled through Regina, SK early Wednesday morning (article here). After about 15 minutes, the car stopped itself about 4km away, after crossing several busy streets.

I’ve made a simulation here. I used the default truck model provided by Cesium. The animation takes the full 15 minutes to run at 1x speed, so you may want to speed it up using the green arrow in the control at bottom left.

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.

Cesium the weekend!


Looked into Cesium, the WebGL JavaScript library for creating 3D globes, and 2.5D and 2D maps, today.

So far, so good. The tutorials are great, and documentation relatively well populated. Installation was painless. The major quirks so far have been due to funny interactions between Windows Chrome and DirectX, which I won’t pretend to understand, but apparently it makes it so outlineWidth is not supported, which means all polygon outlines are set permanently to 1px. Not a huge deal, but I’m guessing I’ll run into more technical stumbling blocks as I delve further in.

Here’s a quick example, which draws a 10 degree grid over the Earth, and places an LSU beacon above Tiger Stadium.

Note: must use WebGL-enabled browser, which means Chrome or newer version of Firefox/IE/etc. You can check if your browser is compatible here.