Digital Geography

2. January 2017

JuxtaposeJS and the Death (and Re-Birth) of Bogoslof Island

This post is just a quick update on a unique event unfolding in my home state of Alaska and a cool new tool to help you post image sliders on the web.  First, let’s start with the event.

The Eruption of Bogoslof Island

Over the past few weeks, a volcano has been erupting in Alaska.  This by itself is not that unique, as we have lots of volcanoes and they tend to erupt pretty frequently.  You can check out the current activity for yourself at the Alaska Volcano Observatory.  This most recent eruption is a bit different though.  The island is very small and it’s not a commonly erupting volcano.  It’s called Bogoslof Volcano, or Bogoslof Island, and it is the tiny tip of a much larger submerged stratovolcano.  The island itself only rises a few tens of meters above sea level, but the volcano rises 1700 meters from the sea floor. Perhaps this reminds us to not judge a book by its cover, huh?.

The eruptions began in December of 2016 and through 3 or 4 eruptive events, Bogoslof Island has been transformed.  The central part of the island has been destroyed and returned to the sea,  while new land has erupted (no pun intended) from the sea creating a new ring island.  You can see before and after images of the island in the slider below.

 

The images in the slider are both from the Sentinel-1 spacecraft.  The before image is an average of 5 images collected before the eruptions began and the after image is a single image following the 23 Dec 2016 eruption.  As you can clearly see, the island was severely altered.

JuxtaposeJS

This was my first time using Juxtapose, a new JavaScript tool I found on the web.  I have been seeing some great images from the good folks at Planet lately, and they often use a nifty slider to show before and after images in an easy-to-use fashion.  Looking further into this it appears they are using Juxtapose from the Northwestern University’s Knight Lab.  This is a great tool and easy to use.

I took my original Sentinel-1 SAR images and radiometrically terrain corrected them using ESA’s Sentinel Toolbox software.  This gave me a bunch of co-registered Geotiff files that I could work with in python using GDAL. As I said above, I took 5 before event images and averaged them using a simple python script.  I only have a single after event image so far, so I took that image and applied a Lee speckle filter to remove some of the noise.  Following this the images were converted to PNG and uploaded to the digital-geography.com server.

 

Before (top) and after (bottom) images as they were provided to the Juxtapose web site.

 

After preparing my images I went over to the Juxtapose web site and used their simple web form.  Taking the HTML they provide after getting your slider correct I added this to my WordPress post and voila!!  The slider worked great right out of the box and all I had to do was edit the height of the iframe a bit to make it look better.

JuxtaposeJS is a fun tool that I’m sure to be using more in the future. Hopefully you will find uses for it too. Thanks for reading.

  • Kurt

    Nice tip, thanks. Just a remark: Vertical slider does not work with firefox

    • Andy

      for me they do.