App Building for the Technically Challenged Cartographer

By Kevin Duffin

Geovis Project Assignment @RyersonGeo SA 8905 Fall 2018

Creating a custom web mapping application can seem like a daunting task for an individual without a whole lot of technical experience. These individuals, myself included, can feel as though they must first learn computer science before they are able to perform web mapping. However, there are a variety of web services which allow for the creation of powerful geovizualization application without the detailed knowledge of computer programming.

One such service is ESRI’s Web Appbuilder for ArcGIS.

Web Appbuilder is an application hosted on ArcGIS online which allows users to add functionality to custom web maps. An exciting feature of the Web Appbuilder is the ability to create maps not only in 2D, but also in 3D via the scene view in Web Appbuilder.

The scene view environment allows users to create a variety of 3D interactive mapping applications on a virtual globe. Navigation around the virtual world is incorporated, and various customization are possible via a variety of out of the box functionalities which can be easily incorporated to any application.

Pretty great right? Follow along and learn how to make a 3D web app!

Introduction to my data

The economies of many nations around the world, including Canada, rely very heavily on natural resource use. In recent times there has been a push by many countries to decouple their economies from natural resource use to both increase the sustainability of their economy, and to decrease their environmental impact.

Material footprint is a measure of domestic material use developed by Wiedmann, T. O., Schandl, H., Lenzen, M., Moran, D., Suh, S., West, J., and Kanemoto, K in 2015. The material footprint(MF) of a nation is the total amount global raw materials extraction that can directly attributed to the final demand of that nations economy.

When developing the metric, Weidmann et al determined the MF per capita of every nation in the world. The group also calculated the MF per capita for various material types, such as biomass materials, construction materials, fossil fuels, and metal ores. I joined Weidmann et al.’s MF data to a country shapefile using ArcMap and the resulting shapefile was exported and saved to my local computer. This is the data I used to create my geovisualization project.

The goal of my project was to create a web mapping application which allows the user to view the MF data on a virtual globe, and toggle between material types. By viewing which material types are important to various nations, the user can then make inferences about sustainability of those nations.

Getting Started: Publishing Layers to ArcGIS Online

In order to create the web application, I first needed to publish the spatial data to ArcGIS Online. To do this I first logged in to my ArcGIS online account. If you do not have an ArcGIS Online account, you can create a free personal account or sign up through your organization, such as university or business. Once signed in, navigate to the “My Content” tab and click the “Add Item” button. For my project I added the MF data from my computer. If your data is saved on your local computer, ensure that it is in ZIP format. I added the MF layer six times, as I had six layers I wanted to display on my application. I named one layer the Material Footprint, four layers using the material groups, and one representing the select few countries which did not have data.

Creating the Map

Once the layers were uploaded, I navigated to the “Create” button and hit “map”. This opened a map viewer tab where I was able to create the basemap for my application on a 2D surface. I added the six layers to the map viewer and began making the basemap. The “change style” tab was used to classify and select a colour scheme for each layer. I then configured pop- ups to display the MF value of a nation when a country is selected. Once I was happy with all the layers, I then saved the layers and the map, and navigated back to “My Content”.

Creating the Web Scene

I next needed to display the layers I just created in a 3D environment. From the “Create Tab”, I selected “Create Scene”. A scene viewer page opened and the virtual 3D globe which I used to display my layers was generated.  Using the “Modify Scene” tab, I added my six layers that I formatted in the map view from my content.  As this scene will become the base of the mapping application, it is important that I configured all the desired setting in the scene view, as these settings will not be able to be changed in the application itself. For example, I altered the order of the layers in my legend, chose a basemap, specified the suns position in the sky, and optimized the performance of the scene in scene settings by ensuring the 3D graphics slide bar was set to Performance rather than quality.  I then saved the scene and navigated back to “My Content”.

Creating the Web App

In the “Create” tab, I then created an App using the Web Appbuilder. In the following “Create a web app” pop up, I specified 3D and gave the app a title, a tag, and a brief summary.

I then needed to specify to Scene which I wanted to use as the baselayer for my app. I navigated to the Scene I just created through the “Choose web scene” button in the scene setting window. This then projected my 3D MF layers onto the virtual globe into the map. I then navigated to the theme window  and chose a graphic theme for my application.

Adding Functionality

Functionality is added to Web Appbuilder applications through widgets. Widgets are tools that can be added to the application. These tools perform a variety of functions. Also, the number of widgets you can incorporate into an app is based on the theme you have selected, so choose wisely. In my application I chose four main widgets, Legend, About, Layer List and 3D Extrusion. The legend widget simply adds a legend to the app which updates depending on the layer being displayed. I configured the About widget to display text introducing the application. The layer List is the widget which enables the toggling between MF layers. Fnally, the 3D widget allows for several different 3D functionalities. I selected the “Area Extrusion” visualization type to extrude the countries based on their Material Footprint per Capita Values. Along with the 3D extrusion, a display bar is added the app which displays the MF values of each nation. By clicking on a nation name in the display bar, the view automatically zooms to that country. Neat!

Finishing Touches

After all the functionality was added to the application, I added a few finishing touches. A proper summary and description were added to the Web App page, and a simple splash widget was added to introduce the application.

Try it out here!

Try the application out here, and thanks for following along!

https://ryerson.maps.arcgis.com/apps/webappviewer3d/index.html?id=b72c5f9cb9194a1abbff695a7b5b275f

 

Movies and Television shows filmed in Toronto but based elsewhere…

by Alexander Pardy
Geovis Class Project @RyersonGeo, SA8905, Fall 2017

Data and Data Cleaning:

To obtain my data I used https://moviemaps.org/ and selected Toronto  the website displays a map that shows locations in the Greater Toronto Area  where movies and television shows were filmed. The point locations are overlaid on top of Google Maps imagery.

If you use the inspect element tool in internet explorer, you can find a single line of JavaScript code within the map section of the webpage that contains the latitude and longitude of every single point.

The data is in a similar format to python code. The entire line of JavaScript code was inputted into a Python script.  The python script writes the data into a CSV file that can then easily be opened in Microsoft Excel. Once the file was opened in Excel, Google was used to search for the setting of each and every single movie or television show, using the results of various different websites such as fan websites, IMDB, or Wikipedia. Some locations take place in fictional towns and cities, in this case locations were approximated using best judgement to find a similar location to the setting. All the information was than saved into a CSV file. Python was then used to delete out any duplicates in the CSV file and was used to give a count of each unique location value. This gives the total number of movies and television shows filmed at each different geographical location. The file was than saved out of python back into a CSV file. The latitude and longitude coordinates for each location was than obtained from Google and inputted into the CSV file.  An example is shown below.

Geospatial Work:

The CSV file was inputted into QGIS as a delimited text layer with the coordinate system WGS 84. The points were than symbolized using a graduated class method based on a classified count of the number of movies or television shows filmed in Toronto. A world country administrative shape file was obtained from the Database of Global Administrative Areas (GADM). There was a slight issue with this shapefile,  the shapefile had too much data and every little island on the planet was represented in this shapefile. Since we are working at a global scale the shapefile contained too much detail for the scope of this project.

Using WGS 84 the coordinate system positions the middle of the map at the prime meridian and the equator. Since a majority of the films and television shows are based in North America,  a custom world projection was created. This was accomplished in QGIS by going into Settings, Custom CRS, and selecting World Robinson projection. The parameters of this projection was then changed to change the longitude instead of being the prime meridian at 0 degrees, it was changed to -75 degrees to better center North America in the middle of the map. An issue came up after completing this is that a shapefile cannot be wrapped around a projection in QGIS.


After researching how to fix this, it was found that it can be accomplished by deleting out the area where the wrap around occurs. This can be accomplished by deleting the endpoints of where the occurrence happens. This is done by creating a text file that says:

This text box defines the corners of a polygon we wish to create in QGIS.  A layer  can now be created from the delimited text file, using custom delimiters set to semi colon and well-known text. It creates a polygon on our map, which is a very small polygon that looks like a line. Then by going into Vector, Geoprocessing Tools, Difference and selecting the input layer as the countries layer and the difference layer as the polygon that was created. Once done it gives a new country layer with a very thin part of the map deleted out (this is where the wrap around occurred). Now the map wraps around fine and is not stretched out. There is still a slight problem in Antarctica so it was selected and taken out of the map.

Styling:

The shapefile background was made grey with white hairlines to separate the countries. The count and size of the locations was kept the same. The locations were made 60% transparent. Since there was not a lot of  different cities the  symbols were classified to be in 62 classes, therefore each time the number increased, the size of the point would increase.  The map is now complete. A second map was added in the print composer section to show a zoomed in section of North America. Labels and lines were then added into the map using Illustrator.

Story Map:

I felt that after the map was made a visualization should also be created to help covey the map that was created by being able to tell a story of the different settings of films and television shows that were filmed in Toronto.  I created a ESRI story map that can be found Here .

The Story Map shows 45 points on a world map, these are all based on the setting of television shows and movies that were filmed in the City of Toronto. The points on the map are colour coded. Red point locations had 4-63 movie and television shows set around the points. Blue point locations had 2-3 movie and television shows set around the points. Green point locations had 1 movie or television show set around the point. When you click on a point it brings you to a closer view of the city the point is located in. It also brings up a description that tells you the name of the place you are viewing and the number of movies and television shows whose settings takes place in that location. You also have the option to play a selected movie or television show trailer from YouTube in the story map to give you an idea of what was filmed in Toronto but is conveyed by the media industry to be somewhere else.