Leaflet-history

Plugin to LeafletJS that allows user to navigate back through previous extents

Download .zip Download .tar.gz View on GitHub

With external controls

These buttons are wired up to events to appear when a move is made, and use the Leaflet-History API to make the map move.

Custom Back/Forward buttons are hidden until a move is made.
Back Forward
var map = L.map('map').setView([51.505, -0.09], 13);
var $customBack = $('#custom-back').click(function(){
    //invoke the back manually, has all the same functionality as clicking the standard buttons.
    mapHistory.goBack();
    return false;
});
var $customForward = $('#custom-forward').click(function(){
    //invoke the forward manually, has all the same functionality as clicking the standard buttons.
    mapHistory.goForward();
    return false;
});
//these events can be used to manage your own external buttons
map.on('historybackenabled', function() {
    $customBack.show();
});
map.on('historybackdisabled', function() {
    $customBack.hide();
});
map.on('historyforwardenabled', function() {
    $customForward.show();
});
map.on('historyforwarddisabled', function() {
    $customForward.hide();
});
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
}).addTo(map);
var mapHistory = new L.HistoryControl({
    useExternalControls: true
}).addTo(map);