Creating 3D Story Maps using data from Esri CityEngine.


In the last couple of years Story Maps have become quite popular with ArcGIS Desktop / Online users. They provide a quick and efficient way to deliver important information or a message in a form of an easily-configurable web application that uses geographic data and can be enriched by adding various types of media content. There are thousands of story maps that you can access through ArcGIS online and it’s very easy to create your own.

One of my areas of expertise is 3D GIS and from time to time people ask me whether it’s possible to display 3D information in a Story Map. Well, the answer is yes. This functionality has been available for more than a year and I believe it’s time to write a blog about the workflow that will make your story maps 3D –enabled.

In this blog I will demonstrate how to use CityEngine 3D scenes to publish your 3D data to ArcGIS Online and create an interactive Story Map that uses 3D web scenes.

For the purpose of this demo, I used one of the CityEngine Examples provided by Esri Inc. on their CityEngine Gallery web page, available here:>>

The example that I’m using is called Redlands Redevelopment 2016; it can be downloaded as a package that includes the CityEngine project, CGA rule files, data and documentation.

To follow the below steps, you will need CityEngine 2016 and an active ArcGIS Online organizational subscription.

To illustrate the capabilities of the CityEngine and ArcGIS software that can help you to publish your 3D data on the web and use it in an interactive Story Map web application, I will consider the following scenario.

Let’s assume that the Council is planning to re-develop a portion of the downtown area in Redlands and they’re currently evaluating several proposals that include a residential complex, a business / Technology Park and a shopping center with a multi-level car park. The task is to create 3D models that represent each proposed project and provide the general public with a simple tool to access this information before the final decision can be discussed and made.

I used the data and the CityEngine rules from the original Redlands Example to create a simple model of the central part of the City of Redlands and digitized the boundary of the fictitious proposed development:

3dblog1

In this blog I will avoid talking about the details of how the proposed development area was subdivided into individual footprints and then the CGA rules were applied to them to generate models of buildings, parks and open areas.  If you’d like to repeat the steps mentioned below, you can download a simplified version of the CityEngine project which I created for this demo. It’s available here:  >>

I used the CGA rules from the Redlands redevelopment CityEngine project supplied by Esri Inc. to create 3 separate CityEngine scenes, each representing a particular scenario of the proposed development.  Each 3D scene will be published to ArcGIS Online and used in the future Story Map as a separate tab / view.

So, my re-development scenario models are:

  1. A residential complex

3dblog2

2. A business / technology park (offices)

3dblog3

3. A new shopping center

3DBLOG4.jpg

The first step in the process of publishing your 3D Scenes from CityEngine is to select all features and models within a scene and use the File > Export Models command to export the scene as an Esri Scene Layer Package.

3d5.gif

Please note that it’s recommended that your CityEngine Scenes are using the WebMercator (WGS1984) projection, as shown below. This will help to avoid some common issues with aligning your 3D data in the web scene viewer in ArcGIS Online.

3dblog6

When exporting models to an Esri Scene layer Package you can choose between creating a local scene and a global scene. The geographic extent of the dataset is relatively small, so in this particular case we can use the Local Scene setting.

3DBLOG7.jpg

This process needs to be repeated for the two other scenes representing scenarios 2 and 3. Once the export has been completed, you should have the following Scene layer packages:

3dblog8

The next step is uploading the scene layer packages to ArcGIS Online. Navigate to www.arcgis.com, sign in to you ArcGIS Online for Organisations account and use the Add Item button (under MyContent) to load the scene packages.

3dblog9

You can also load the scene layer packages using the File > Share As command in CityEngine.

Once loaded, the scene layer packages will automatically be published as hosted scene layers.

3DBLOG10.jpg

You can then open them in the Scene Viewer

3DBLOG11.jpg

Then save each as a separate web scene

3dblog12

These web scenes will be referenced by the Story Map that will be created in the next step.

3dblog13

Now that the 3D scenes have been published, we can create a Story Map that will use them. Scenes can be viewed as a part of a Story Map in a browser that supports WebGL. The full list of system requirements is available here: >>

Users can create Story Maps using the downloadable examples or online template. Currently, there are several Story Map templates that support the addition of the 3D web scenes, including the Story Map Journal, Story Map Cascade and Story Map Series.  The full list of the available Story Map templates is available here:  >>

In this example, I will use the Story Map Journal template. Creating Story Maps using the interactive workflow on the website is easy – you need to start the wizard, enter the title and define the content of the main stage and the side panel. At each step the Map Journal Builder application will guide you by providing tips and instructions.

To add a Web Scene to your story map, in the Step 1 : Main Stage content, set the type of content to Web page

3dblog14

Copy the URL of one of the web scenes and press configure:

3dblog15

Depending on the extent of the web scene you can change the optimal position. “Fill” is default and it works best for most applications.

3dblog16

It’s also recommended to uncheck the option “unload when reader navigates away”. This will prevent the scene from being re-loaded every time a user returns to it in the Story Map application.

Another best practice is to simplify the user interface of the web scene viewer before embedding it to the Story Map. To minimize the UI, you can add &ui=min at the end of the scene’s URL as shown below:

3dblog17

On the next step, you will need to add some content for the Side Panel. This may include information about the area, images and other types of media content. In my example I added a brief description of the existing site before redevelopment and some information about each scenario.

3DBLOG18.jpg

Once you’ve finished with the first section, click the Add Section button in the side panel to add more sections (and more web scenes) to your Story Map. Repeat the procedure for the remaining web scenes.

Finally, change the settings (at the top of the app) if you’d like to use custom fonts and change the colors used by the app and share your Story Map to provide other users (in your organization or the general public) with access to you final web application.

3DBLOG19.jpg

My web app with 3 web scenes can be accessed here: >>

This example mentioned above is pretty simple, however this workflow allows creating some amazing Story Maps in which you can use both – your own 3D content or the content provided by Esri Inc. Check out this Story Map called Mountains of Fire. Good luck with 3D mapping!

This entry was posted in General and tagged , , , on by .

About Ivan E.

Russia-born geographer with a degree in Cartography and GIS with a 18-year Esri-related experience. Had been working for Esri Russia (CIS) then moved to Australia to join Esri Australia as support trainer in the Professional services dept. Area of expertise: ArcGIS Desktop software, 3D modelling (CityEngine), cartography, remote sensing

Got something to say?

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s