Create your own Before / After map

Few hours after releasing Landsat 8 Before/After I had a question on how to do it with other images than Landsat 8 previews. So here is a quick tutorial:

First you need to load some libraries and define some styles

<html lang="en">
<head>
        <!-- CSS Libraries -->
	<link href="css/leaflet.css" rel="stylesheet">

        <!-- Javascript Libraries -->
        <!-- Respect the order -->
	<script src="js/jquery.js"></script>
	<script src="js/jquery-ui.min.js"></script>
	<script src="js/jquery.ui.touch-punch.min.js"></script>
	<script src="js/jquery.beforeafter-map-1.01.js"></script>
	<script src="js/leaflet.js"></script>
	<script src="js/L.Map.Sync.js"></script> <!--https://github.com/turban/Leaflet.Sync-->
	<style>
		body{
		    position:fixed;
		    height: 100%;
		    width: 100%;
		    margin: 0px;
		    padding: 0px;
		}
		#map-container{
		    position: relative;
		    height: 100%;
		    width: 100%;
		}
		.map{
		    position: absolute;
		    height: 100%;
		    width: 100%;
		    top: 0px;
		    left: 0px;
		}
        </style>
</head>

Define the html containers in your body

<body>
    <div id="map-container"> <!-- Map Container -->
	<div id="map-before" class="map"></div> <!-- Left Map -->
	<div id="map-after" class="map"></div> <!-- Right Map -->
    </div>

Now we initialize the maps content

<script>
	mapbefore = L.map('map-before', {
	    zoom: 1,
	    attributionControl: false,
	    zoomControl: false,
	    touchZoom: false,
	    //doubleClickZoom: 'center', //options
	    //scrollWheelZoom: 'center', //options
	    inertia: false,
	    //minZoom: 1, //options
	    //maxZoom: 11, //options
	    center: [1,1]
	});

	mapafter = L.map('map-after', {
	    zoom: 1,
	    attributionControl: false,
	    zoomControl: false,
	    touchZoom: false,
	    //doubleClickZoom: 'center', //options
	    //scrollWheelZoom: 'center', //options
	    inertia: false,
	    //minZoom: 1, //options
	    //maxZoom: 11, //options
	    center: [1,1]
	});

	var osm_url = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
	var attribution = '© OpenStreetMap';

	L.tileLayer(osm_url).addTo(mapbefore);
	L.tileLayer(osm_url, {id: 'MapID', attribution: attribution}).addTo(mapafter);

	L.control.zoom({position:'topright'}).addTo(mapafter);
	L.control.attribution({position:'bottomright'}).addTo(mapafter);


	before_overlays = new L.layerGroup().addTo(mapbefore);
	after_overlays = new L.layerGroup().addTo(mapafter);

	mapbefore.sync(mapafter);
	mapafter.sync(mapbefore);

	$('#map-container').beforeAfter(mapbefore, mapafter);
    </script>

Your page is almost ready, we just need to add data on both side.

Using the new Astro Digital platform to "search, process, and publish imagery", you can create tile layers of landsat image

<script>
        //tile layers found on  Hot OSM OpenAerialMap
        attribution = '© Landsat imagery courtesy of NASA and USGS, processed by AstroDigital';
        tileUrl = 'http://a.tiles.mapbox.com/v4/' +
        'astrodigital.LC80150342014210LGN00_bands_432/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiYXN0cm9kaWdpdGFsIiwiYSI6ImNVb1B0ZkEifQ.IrJoULY2VMSBNFqHLrFYew';
        L.tileLayer(tileUrl, {attribution: attribution}).addTo(before_overlays);

        tileUrl = 'http://a.tiles.mapbox.com/v4/' +
        'astrodigital.LC80150342015037LGN00_bands_432/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiYXN0cm9kaWdpdGFsIiwiYSI6ImNVb1B0ZkEifQ.IrJoULY2VMSBNFqHLrFYew';
        L.tileLayer(tileUrl, {attribution: attribution}).addTo(after_overlays);

        mapafter.setView([37.3, -77], 10) // set view on the area
</script>

</body>
</html>

Another way is to process by yourself some images using gdal or landsat-util

  • Find and download images you want, using Earth Explorer or Libra
  • Process images using landsat-util (merge, pansharp...) or gdal
  • Reproject your data to the pseudo mercator projection (EPSG:3857) (gdalwarp or landsat-util)
  • Create your own tile layer using gdal2tiles.py or gdal2tiles for leaflet
  • More info and Usefull links:
  • Download the demo page (zipped with all js libraries) Here