Using ArcGIS Experience Builder for 3D Mapping of Zoning restrictions and Buildings in Toronto

Daniel Kogan

Geovis Project Assignment @RyersonGeo, SA8905, Fall 2021

Introduction/ background

Every city has zoning bylaws that dictate land use. Most cities, including the City of Toronto, have zoning bylaws that set building height limits for different zoning areas. Sometimes, buildings are built above the height limit, either due to development agreements or grandfathering of buildings (when a new zoning by-law doesn’t apply to existing buildings). The aim of this project is to provide a visualization tool for assessing which buildings in Toronto are within the zoning height limits and which are not.

Data and Processing

3D Buildings

The 3D building data was retrieved from Toronto Open Data and derived using the following methods:

  • LiDAR (2015)
  • Site Plans – building permit site plan drawings
  • Oblique Aerials – oblique aerial photos and “street view” photos accessible in Pictometry, Google Earth, and Google Maps.
  • 3DMode – digital 3D model provided by the developer

Zoning Bylaws

Two zoning Bylaw shapefiles were used (retrieved from Toronto Open Data as well):

  • Building Heights Limits – spatially joined (buildings within zoning area) to the 3D buildings to create the symbology shown on the map. Categories were calculated using the max average building height (3D data) and zoning height limit (zoning bylaws).
  • Zoning Categories – used to gain additional information and investigate how or why buildings went over the zoning height limit.


ArcGIS experience builder was used to visualize the data. A local scene with the relevant data was uploaded as a web scene and chosen as the data source for the interactive map in the “Experience”. The map includes the following aspects: Legend showing the zoning and height categories, a layer list allowing users to toggle the zoning category layer on to for further exploration of the data, and a “Filter by Height Category” tool that allows users to view buildings within a selected height category. Pop-ups are enabled for individual buildings and zones for additional information. Some zones include bylaw expectations which may explain why some of the buildings within them are allowed to be above the zoning height limit (only an exception code is provided, a google search is required to gain a better understanding). instructions and details about the map are provided to the user as well.


The main limitation of this project is insufficient data – a lack of either building height or zoning height results in a category of “No data” which are displayed as grey buildings. Another limitation is possibly the accuracy of the data, as LiDAR data can sometimes be off and provide wrong estimates of building height. Inaccuracies within 1m were solved by adding an additional category, but there may be some inaccuracies beyond

Introducing YouthMappers

Author: Daniel Council

Geovis Project Assignment @RyersonGeo, SA8905, Fall 2021

Project Link:


During my time in undergrad, I became involved with an international network of student mappers called YouthMappers. Through virtual internships and engagement with the chapter at my university, I started to become an active member of the network. For starters, one of the main goals of YouthMappers is to create open data for areas of the world that are lacking readily available spatial data. 

The concept of open data is similar to Wikipedia, it can be provided by anyone. The primary method of open data collection used is OpenStreetMap, which is an open source platform that anyone can edit and upload spatial information onto, such as roads and buildings, for example. Many companies, organizations, and websites use data found on OpenStreetMap. The popular mobile-phone game, Pokémon Go, sources its map data from OpenStreetMap. However, arguably the most beneficial aspect of open data is that it is free, readily available, and accessible to anyone.

YouthMappers Chapters around the Globe

There are currently 291 YouthMappers chapters located throughout 62 countries around the globe. My chapter was located in Muncie, Indiana, at Ball State University. I interned with YouthMappers to research how open data is being used in Belize, and I also looked into how the Belizean government views open data as opposed to official sources of information. Additionally, I worked with the YouthMappers Validation Hub, which works to validate mapping projects conducted by YouthMappers chapters.

Project Description

For my geovisualization project, I was inspired by my involvement with YouthMappers. I wanted to introduce the organization to our class using technology provided by Esri. I often work with Dashboards, web maps, and Story Maps, but I was interested in trying out one of the other apps that Esri hosts in order to learn a new tool. I came across Experience Builder in ArcGIS Online, and was interested in how it can almost be used as a tool for creating a website, one that can be viewed across any type of device.

While there is a lot of overlap in functionality between Experience Builder, Dashboards, and Story Maps, Experience Builder allows for increased customization. There is no coding necessary, however. In fact, the user interface for creating an Experience is quite user friendly once you learn the main concepts. Within Experience Builder, you can even integrate and link other Esri applications like Survey123 or Dashboards, a functionality not available elsewhere. Experience Builder can be more comprehensive than Dashboards, which is mainly used to provide information on a singular, non-scrolling screen. With Experience Builder, you can create long, scrolling pages (which I did not personally do in my project). With this being said, Experience Builder is definitely the way to go if you’re looking to make something that is more in tune with a website. 

The remainder of this blog post will serve as a tutorial for the basics of how to use Experience Builder to create a web page for your organization. The approach I took was fairly simple, as I wanted to be able to disseminate the key information with as few pages and tabs as possible, and also have everything fit on a singular screen to prevent the need for endless scrolling. I only included three tabs to display information, which are described below. YouthMappers already has their own website, so my project is more of a condensed and interactive version that can be viewed in a short amount of time, and provides a general introduction to people who may be unfamiliar with the network. 

Three Tabs used to Separate Information

About: Used to introduce the organization and give a visualization of how widespread it is. The map I used is interactive and allows for user-friendly navigation and custom pop-ups for each point on the map.

Our Work: Gives a real-life example of a project conducted by the organization, and shows the benefits and impact this project makes. Giving an example helps the viewer understand how the organization operates. A visual of the completed or in-progress project can further provide something almost tangible.

Get Involved: Provides a way to viewers to become a member or learn more about the organization if they wish. Gives a link to the more detailed organization website.

Experience Builder: The Basics

Now, for using Experience Builder itself, there are a few important concepts to learn before beginning. While the app provides a number of pre-made templates, I would recommend starting with a blank project. I tried starting with a template but personally found it too overwhelming. I enjoyed the process of learning how Experience Builder works from scratch and found it easier than trying to integrate my ideas with something that was already formatted in a specific way.

Pages: In my project, there are three pages, each being linked to the tabs mentioned above. Pages are almost like layers on a map, each one contains different components and displays different visualizations.

Widgets: Each page can contain a multitude of widgets. Different types of widgets are designated by the icon to the left of its name. For my Experience, I used maps, images, text, tabs, and charts, just to name a few. I also gave my widgets descriptive names that related to what they displayed. It helped me keep track of my widgets in an organized manner. 

After adding your widgets, you can customize them to your liking. When a widget is activated, the “Style” tab appears on the right side of the screen. Here, one can alter the size, position, appearance, and other visual effects of each widget.

Overall, Experience Builder is a unique tool that combines the story-telling aspects of Story Maps, the geospatial technology of web maps, and the easy-to-navigate user interface of Dashboards. I would definitely use this tool again for future use, as I can now visualize more ways it can be utilized.