A webpage to track progress of the P3 construction site. It collects assets captured by a DJI Mavic Air 2 drone and products processed via Maps Made Easy, including orthomosaic maps, before-and-after images, aerial photos, and 3D models.
The before and after page uses TwentyTwenty, a visual diff tool, to compare images captured on different days with an interactive slider.
See this how-to video for more details on setting up the TwentyTwenty jQuery plugin. More details and the full source code also available here.
The slider handle style has been modified from its default settings to look instead like the handles used by The Verge.
Added dropdown menus to the slider, based on this tutorial.
Latest maps have been resized down to 97.5% of original size to match when overlaid on previous maps in before and after slider.
The gif animation was made locally with the command-line utility gifsicle, using this script. Alternatively, you can also make gifs in a web browser at EZgif.