{"id":715,"date":"2015-02-03T16:13:21","date_gmt":"2015-02-03T23:13:21","guid":{"rendered":"http:\/\/homepages.uc.edu\/~yaozo\/wordpress\/?p=715"},"modified":"2015-02-03T16:13:21","modified_gmt":"2015-02-03T23:13:21","slug":"add-a-before-after-map-slider-to-a-leaflet-map","status":"publish","type":"post","link":"https:\/\/zhuoyao.net\/index.php\/2015\/02\/03\/add-a-before-after-map-slider-to-a-leaflet-map\/","title":{"rendered":"Add a before-after map slider to a Leaflet map!"},"content":{"rendered":"
\n

The jQuery Before\/After plugin is a great interactive tool to explore changes through time. This plugin has been used to great effect by the New York Times to show changes in Japan before and after the tsunami<\/a> that destroyed the Fukushima Daiichi Nuclear Plant. In most examples of the plugin, though, the maps are static images and the user cannot zoom or pan.<\/p>\n

Thanks to the work of Graham MacDonald at the Urban Institute there is a tool that allows for the combination of the Before\/After plugin with a slippy map (the kind that lets you zoom and pan). You can read Graham\u2019s discussion<\/a> but we will provide a walk-through of the code in this post. By the way, the Urban Institute has a very nice implementation of the functionality in their Poverty and Race in America map<\/a>.<\/p>\n

1. Set up your dependencies.<\/h2>\n

CSS<\/strong> \u2013 In addition to the Leaflet CSS we\u2019re including Bootstrap as well as CSS that will allow us to use Bootstrap glyphicons<\/a> thanks to Lennard Voogdt and this project<\/a>.<\/p>\n

\n<link<\/span> href<\/span>=\"\/\/netdna.bootstrapcdn.com\/bootstrap\/3.1.1\/css\/bootstrap.min.css\"<\/span> rel<\/span>=\"stylesheet\"<\/span>><\/span>\n<link<\/span> rel<\/span>=\"stylesheet\"<\/span> type<\/span>=\"text\/css\"<\/span> href<\/span>=\"http:\/\/cdn.leafletjs.com\/leaflet-0.7.3\/leaflet.css\"<\/span> \/><\/span>\n<link<\/span> rel<\/span>=\"stylesheet\"<\/span> href<\/span>=\"css\/leaflet.awesome-markers.css\"<\/span>><\/span>\n<\/code><\/pre>\n
<\/code>JS<\/strong> – jQuery, jQuery-ui, code that allows users on touch devices to use the map and the code from Graham that creates the map (the map creation function is injquery.beforeafter-map-0.11.js<\/code>).<\/p>\n
\n<script<\/span> type<\/span>=\"text\/javascript\"<\/span> src<\/span>=\"http:\/\/code.jquery.com\/jquery-2.1.1.min.js\"<\/span>><\/span><\/script<\/span>><\/span>\n<script<\/span> type<\/span>=\"text\/javascript\"<\/span> src<\/span>=\"http:\/\/code.jquery.com\/ui\/1.11.0\/jquery-ui.min.js\"<\/span>><\/span><\/script<\/span>><\/span>\n<script<\/span> type<\/span>=\"text\/javascript\"<\/span> src<\/span>=\"js\/jquery.ui.touch-punch.min.js\"<\/span>><\/span><\/script<\/span>><\/span> \n<script<\/span> src<\/span>=\"\/\/netdna.bootstrapcdn.com\/bootstrap\/3.1.1\/js\/bootstrap.min.js\"<\/span>><\/span><\/script<\/span>><\/span>\n<script<\/span> type<\/span>=\"text\/javascript\"<\/span> src<\/span>=\"js\/jquery.beforeafter-map-0.11.js\"<\/span>><\/span><\/script<\/span>><\/span>\n<\/code><\/pre>\n
<\/code>HTML<\/strong> – create an overall div and a div that holds the before<\/em> and after<\/em> map instances (note that the ID for these is before<\/code> and after<\/code>, respectively).<\/p>\n
   <div<\/span> id<\/span>=\"map-container\"<\/span>><\/span>\n        <!-- Make sure to give the map divs height and width \n         I do it with the map class --><\/span>\n        <div<\/span> id<\/span>=\"before\"<\/span> class<\/span>=\"map\"<\/span>><\/span><\/div<\/span>><\/span>\n        <div<\/span> id<\/span>=\"after\"<\/span> class<\/span>=\"map\"<\/span>><\/span><\/div<\/span>><\/span>\n    <\/div<\/span>><\/span>\n<\/code><\/pre>\n
<\/code><\/p>\n
2. Create the Leaflet maps<\/h2>\n
Set up the maps:<\/p>\n
    var<\/span> center = [38.895<\/span>, -77.020<\/span>];\n        var<\/span> zoom = 12<\/span>;\n        var<\/span> before = L.map('before'<\/span>, {\n                attributionControl: false<\/span>,\n                inertia: false<\/span>,\n                minZoom: 12<\/span>\n            }).setView(center, zoom);\n            \n        var<\/span> after = L.map('after'<\/span>, {\n                inertia: false<\/span>,\n                minZoom: 12<\/span>\n            }).setView(center, zoom);\n<\/code><\/pre>\n
<\/code>Populate them with layers. In this case I’m using a MapBox TileLayer that we edited a bit:<\/p>\n
    L.tileLayer('http:\/\/{s}.tiles.mapbox.com\/v3\/spatial.map-qgihrqg5\/{z}\/{x}\/{y}.png'<\/span>).addTo(before); \/\/ <\/span>\n    L.tileLayer('http:\/\/{s}.tiles.mapbox.com\/v3\/spatial.map-qgihrqg5\/{z}\/{x}\/{y}.png'<\/span>).addTo(after); \/\/ <\/span>\n<\/code><\/pre>\n
<\/code><\/p>\n
3. Add features to the map<\/h2>\n
We will also add some before\/after features. Red will be before and blue will be after. Note that if you wanted to simply add a traditional Leaflet marker you would use:<\/p>\n
 L<\/span>.marker<\/span>([38.895, -77.060]<\/span>).addTo<\/span>(before<\/span>);\n<\/code><\/pre>\n
<\/code>but we wanted to use colored markers and Bootstrap glyphicons. Perhaps drink before and relax with music after?<\/p>\n
    #BEFORE (red)    <\/span>\n    var<\/span> circle = L.circle([38.895<\/span>, -77.020<\/span>], 2000<\/span>, {\n        color: 'red'<\/span>,\n        fillColor: 'red'<\/span>,\n        fillOpacity: 0.5<\/span>\n    }).addTo(before);\n\n    L.marker([38.895<\/span>, -77.060<\/span>], {icon: L.AwesomeMarkers.icon({icon: 'glass'<\/span>,  prefix: 'glyphicon'<\/span>,markerColor: 'red'<\/span>}) }).addTo(before);\n    L.marker([38.895<\/span>, -77.050<\/span>], {icon: L.AwesomeMarkers.icon({icon: 'glass'<\/span>,  prefix: 'glyphicon'<\/span>,markerColor: 'red'<\/span>}) }).addTo(before);\n    L.marker([38.895<\/span>, -77.040<\/span>], {icon: L.AwesomeMarkers.icon({icon: 'glass'<\/span>,  prefix: 'glyphicon'<\/span>,markerColor: 'red'<\/span>}) }).addTo(before);\n\n    #AFTER (blue)<\/span>\n    var<\/span> circle = L.circle([38.895<\/span>, -77.020<\/span>], 2000<\/span>, {\n        color: 'blue'<\/span>,\n        fillColor: 'blue'<\/span>,\n        fillOpacity: 0.5<\/span>\n    }).addTo(after);\n\n    L.marker([38.905<\/span>, -77.010<\/span>], {icon: L.AwesomeMarkers.icon({icon: 'headphones'<\/span>,  prefix: 'glyphicon'<\/span>,markerColor: 'blue'<\/span>}) }).addTo(after);\n    L.marker([38.915<\/span>, -77.000<\/span>], {icon: L.AwesomeMarkers.icon({icon: 'headphones'<\/span>,  prefix: 'glyphicon'<\/span>,markerColor: 'blue'<\/span>}) }).addTo(after);\n    L.marker([38.925<\/span>, -76.990<\/span>], {icon: L.AwesomeMarkers.icon({icon: 'headphones'<\/span>,  prefix: 'glyphicon'<\/span>,markerColor: 'blue'<\/span>}) }).addTo(after);\n<\/code><\/pre>\n
<\/code><\/p>\n
4. Use the beforeAfter<\/code> function to create the final maps and slider<\/h2>\n
The beforeAfter<\/code> function is in the jquery.beforeafter-map-0.11.js<\/code> file created by Graham MacDonald.<\/p>\n
$('#map-container'<\/span>).beforeAfter(before, after);\n<\/code><\/pre>\n
<\/code><\/p>\n
5. Play with your map<\/h2>\n