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.
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);