Creating an interactive flyover tour with satellite imagery

I recently built a flyover tour of an area using satellite imagery. The tour accompanied a major investigative report that highlighted points of interest in a town. It brought those points together into a place-based story by zooming in and out of a detailed satellite image, with overlaid text from our reporters guiding the reader from point to point:

Whereas the reporters had worked on this project for months, when it was presented to me I was given a pretty short window to throw it together. So I chose an existing Knight Lab tool called Gigapixel that lets you zoom in and out of an image, with textual overlays. I figured I’d just get a satellite image as a baselayer, plug it in to Gigapixel and be good to go.

Turns out the whole ‘get a satellite image as a baselayer’ step was way more complicated than I anticipated. By the time the project was finished, I’d downloaded tons of image files, resized them, stitched them together into columns, stitched those columns together into a sort of digital quilt, dropped the quilt into Photoshop, and ultimately hosted it new on a server. And then, yeah, I just plugged it into Gigapixel and was good to go.

Here, I’ll run through the steps I took and the tools I used to create this project. I’ll focus on the toughest step: preparing the base image . I’ll devote less time to other necessary and less complicated steps involving image hosting and JSON.

Finding the Satellite Data

The first step in this project was finding good satellite imagery. I didn’t want to get sued by Google for using theirs, and I figured we didn’t need to send photographers up in a helicopter to get aerial shots. Governments oftentimes offer satellite imagery for free, so I looked to New York’s GIS web resources.

Turns out the state government has a site called NYS Orthos Online that makes statewide satellite snapshots available for download. The satellite imagery is composed of tiles. You can zoom in to the area you’re interested in, select a region and download all the tiles in that region. Working with our reporters, I identified the geographic area we were interested in exploring and downloaded all the tiles that made up that region. In total, this meant that I was working with about 70 tiles that, when put together, would recreate the region I was interested in:

From this site, I downloaded all the tiles in the region of interest. Each tile gave me one folder with four files. Three of the files were geodata I wasn’t interested in. One file was a jp2 image file that I was interested in. So I took all the jp2 files from all 70 tiles and combined them into one folder.

Now I had all the image tiles that I wanted to combine into the base image. The jp2 format (a not-very-widely-used update to jpeg) was a problem, as it didn’t play nicely with my photoshop. The files were also too large for my liking. So I converted all 70 images into smaller, more usable pngs.

Image Manipulation with ImageMagick

I now had about 70 pngs representing all of the tiles that I wanted to work with, but I had a few problems. First, the images were enormous, and in the interest of load time and possible space constraints, I always try to use smaller files. Second, individual image tiles were pretty useless to me, as I wanted to create one large image made up of these many images. That meant stitching the images back together into a coherent whole.

ImageMagick is a software suite that lets you manipulate, convert, and tinker with image files on the command line. In this project, I used it to quickly resize and combine the images.

Now things are going to get a bit into the weeds, but stick with me. It’ll pay off in fun visuals very soon. So my 70 pngs had names like e_06060852_06_07400_4bd_2013.png. The only numbers that changed were these, represented by x’s: e_06xx08xx_06_07400_4bd_2013.png. The first two x’s increased by three as the tiles got further east: 06 to 09 to 12. The second two x’s increased by two as the tiles got further south: 0606 to 0608 to 0610. This naming pattern allowed me to repeat the same batch processing by only changing a few numbers. Here’s a map of the naming pattern to make it a little clearer:

Resizing

The way to resize images is to type this command: ‘convert’ + original-image-file ‘-resize’ x% ‘new-image-file-name’. So for one of my files, I would write:

convert e_06060852_06_07400_4bd_2014.png -resize 30% e_06060852_06_07400_4bd_2013_one_third.png

and the resultant file would be a third the size. In my text editor, I typed the batch resize commands for one column.

When I entered the right directory through the command line and pasted that text block, it automatically resized all the images to 30%, leaving me with 14 image files 30% of the size of my old ones. All I had to do to resize the other columns was a quick find and replace. For the next column, whose tiles start with 0609, one find and replace from 0606 to 0609 produced this…

I dropped that into the command line and all of column 2’s tiles were resized in about 20 seconds.

For the third column, which started with 0612…

Etc… The whole process took minutes (it’s taken much longer to explain it here than to actually do it) and it allowed me to cut the size of 70 files by 70% total.

Appending

The next step was to combine these smaller files. What I wanted was one enormous png made up of all these smaller pngs. ImageMagick makes combining images side by side really easy. To combine them horizontally, one next to another, you just type

convert +append file1.png file2.png file3.png all3files.png

Vertically, it’s this:

convert -append file1.png file2.png file3.png all3files.png

Since I had one directory per column of tiles, it made sense to append column by column. I followed the same text editor find and replace approach for this process. Recall that my files were now called: 30_percent_06120852.png, 30_percent_06120854.png, etc… So I wrote this out in my text editor:

But keep in mind this is one long line. I separated it to make it visually pleasing (and how very pleasing it is)

When I dropped that into the command line, within maybe 20 seconds I had one very tall png. Following the same find and replace procedure, I created commands to build column 2, which was another very tall image called column2.png, and column 3, giving me column 3.png, and so on… In case you’re wondering what one of these pngs looked like, here it is:

Still with me down here? The next step was to combine these png’s side by side using the horizontal append:

That gave me a relatively massive png that looked like this:

Now that is what we’re looking for. Looks like nothing? Well it’s such a high quality image that I can do this and the quality remains good:

That high quality is crucial for an interactive tour that relies on zooming in.

Photoshop and Zoomify

I now had an enormous image that was ready for Gigapixel. The final step was to take advantage of something called Zoomify, which takes an enormous image, cuts it up into tiles and lets you host those tiles in a way that makes it easy for software like Gigapixel to explore. Is it ridiculous that I stitched together these tiles just to have Zoomify break them up? Yes. But tiles are what the state government offered, so tiles I took. And keep in mind the the image file was now much, much smaller and in a format that actually works with Photoshop and Gigapixel.

For the Zoomify step, I worked with a server. Luckily, I’ve recently set two servers up with Digital Ocean (it’s quite easy) and fully configured them to host any basic sites. Knight offers very clear instructions on how to use Zoomify through Photoshop to host your images, so all I had to do was drop my image into Photoshop, convert it to RGB (for some reason Zoomify didn’t work unless it was in RGB… thanks Internet for answering that puzzling question) and send it off into the cloud. From there, Gigapixel caught it and dropped it into my project. All was well in the world.

Now I will note that while Gigapixel offers a really helpful story building drag and drop tool, I wanted more customization, so I took the JSON of my project and reworked it to my heart’s content. This let me, for example, open with a zoomed in title image, which the default settings of Gigapixel don’t let you do. But that was JSON work that has nothing to do with the digital tapestry that this (now very long) post is about. Whew. That’s it for me.

Here’s the finished project: data.lohud.com/features/ramapo.