Bringing City Projects to Life with Drone Photos, Video, and Panoramas

Governments do a lot of work to make their cities better and story maps are a great way to communicate how progress is being made in a community.

Bringing City Projects to Life with Drone Photos, Video, and Panoramas


Governments do a lot of work to make their cities better. Often times these improvements aren't communicated effectively and leaves citizens wondering where their tax dollars are being spent. This map can be easily shared through the city's public map gallery,  embedded on their website, or social media channel allowing for word to spread about the good things happening in a community.

About the map

The content of this map was created over the course of two years. I worked with the City of La Mesa to capture the results of a park improvement project. This map utilizes Esri's Story Map tool that allowed me to easily bring together drone photos, video and panoramas.  These elements were embedded into a scrolling web page that creates an immersive experience of the park without actually being there. One of the coolest things about this map is a side-by-side of the before and after construction photos of the park.

The stack


  • ESRI Story Map: This is a scrolling web page that allows you to bring together a variety of content into a user-friednly web app. You can even embed custom HTML which is what allowed me to add in the panoramas.

  • ArcGIS for JavaScript API: I used Esri's API to build something custom. It was quick and easy to drop in some points based on photo locations and retrieve the panoramas when a point was clicked.

  • Pannellum: Pannellum is a lightweight, free, and open source panorama viewer for the web. This allows for rendering of panoramas in the browser. Very grateful for this one!

  • AWS - Simple Storage Service: The AWS Simple Storage Service, or S3, is used to store the panoramas and custom HTML and JavaScript. You can quickly create a functioning website by enabling a folder to serve out content through HTTP.


  • DJI Phantom: A drone was used to capture the aerial photos and video. Luckily I had a licensed and certified pilot to do this part, flying drones really isn't my thing.

  • Ricoh Theta IV: Used to capture the panoramic photos. It can take 300 photos between charges, 14 megapixel output, HDR rendering and a lot more!

The map

Click here to see the map, below is a screenshot of the side-by-side panoramas!


Shout out!

Here's a list of some the resources that I used to help me make this map

  • Panellum - Thank you Matthew Petroff for the open source software! Couldn't have made this map without you.

  • City of La Mesa - Thanks to all the people involved on this park project. It really blew me away at how the park changed. A lot of people put in some serious hours to make this happen.