Is there a possibility to have a kind of home button on my Leaflet map which will zoom to my initial map view or a specific defined position, respectively?


The following will add a custom zoom control with a home button to a Leaflet map. The home icon is from font-awesome, so be sure to include that reference.

Working fiddle here.


    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
    <div id="map"></div>
    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">


#map { height: 340px; }
.leaflet-bar a { background-color: #fff; border-bottom: 1px solid #ccc; color: #444; display: block; height: 26px; width: 26px; line-height: 1.45 !important; text-align: center; text-decoration: none; font: bold 18px 'Lucida Console', Monaco, monospace; }


var lat = 51.505;
var lng = -0.09;
var zoom = 12;

// set up the map and remove the default zoomControl
var map = L.map('map', {
    zoomControl: false

map.setView([lat, lng], zoom);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18

// custom zoom bar control that includes a Zoom Home function
L.Control.zoomHome = L.Control.extend({
    options: {
        position: 'topright',
        zoomInText: '+',
        zoomInTitle: 'Zoom in',
        zoomOutText: '-',
        zoomOutTitle: 'Zoom out',
        zoomHomeText: '<i class="fa fa-home" style="line-height:1.65;"></i>',
        zoomHomeTitle: 'Zoom home'

    onAdd: function (map) {
        var controlName = 'gin-control-zoom',
            container = L.DomUtil.create('div', controlName + ' leaflet-bar'),
            options = this.options;

        this._zoomInButton = this._createButton(options.zoomInText, options.zoomInTitle,
        controlName + '-in', container, this._zoomIn);
        this._zoomHomeButton = this._createButton(options.zoomHomeText, options.zoomHomeTitle,
        controlName + '-home', container, this._zoomHome);
        this._zoomOutButton = this._createButton(options.zoomOutText, options.zoomOutTitle,
        controlName + '-out', container, this._zoomOut);

        map.on('zoomend zoomlevelschange', this._updateDisabled, this);

        return container;

    onRemove: function (map) {
        map.off('zoomend zoomlevelschange', this._updateDisabled, this);

    _zoomIn: function (e) {
        this._map.zoomIn(e.shiftKey ? 3 : 1);

    _zoomOut: function (e) {
        this._map.zoomOut(e.shiftKey ? 3 : 1);

    _zoomHome: function (e) {
        map.setView([lat, lng], zoom);

    _createButton: function (html, title, className, container, fn) {
        var link = L.DomUtil.create('a', className, container);
        link.innerHTML = html;
        link.href = '#';
        link.title = title;

        L.DomEvent.on(link, 'mousedown dblclick', L.DomEvent.stopPropagation)
            .on(link, 'click', L.DomEvent.stop)
            .on(link, 'click', fn, this)
            .on(link, 'click', this._refocusOnMap, this);

        return link;

    _updateDisabled: function () {
        var map = this._map,
            className = 'leaflet-disabled';

        L.DomUtil.removeClass(this._zoomInButton, className);
        L.DomUtil.removeClass(this._zoomOutButton, className);

        if (map._zoom === map.getMinZoom()) {
            L.DomUtil.addClass(this._zoomOutButton, className);
        if (map._zoom === map.getMaxZoom()) {
            L.DomUtil.addClass(this._zoomInButton, className);
// add the new control to the map
var zoomHome = new L.Control.zoomHome();

With Leaflet.EasyButton, things stay pretty clean: name your icon and function (hover text if you want):

var home = {
  lat: 70.3,
  lng: 50.5,
  zoom: 8

  map.setView([home.lat, home.lng], home.zoom);
},'Zoom To Home').addTo(map);

(aside) and the zoom example answer by toms with easyButton:

// make a bar with the buttons
var zoomBar = L.easyBar([
  L.easyButton( '<big>+</big>',  function(control, map){map.setZoom(map.getZoom()+1);}),
  L.easyButton( 'fa-home fa-lg', function(control, map){map.setView([home.lat, home.lng], home.zoom);})
  L.easyButton( '<big>-</big>',  function(control, map){map.setZoom(map.getZoom()-1);}),

// add it to the map

Wire up a button that calls map.setView


map.setView(lat, lng, zoom);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.