torfsen / leaflet.zoomhome

A Leaflet zoom control with a home button for resetting the view.

Leaflet.zoomhome

A Leaflet-plugin that provides a zoom control with a "Home" button to reset the view.

Demo

Usage

Supported Leaflet versions are 0.7.x and later.

This plugin requires Font-Awesome:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>

Copy Leaflet.zoomhome.min.js and Leaflet.zoomhome.css from the dist folder to your project folder and include them in your HTML (you need to include Leaflet before including the plugin):

<link rel="stylesheet" href="leaflet.zoomhome.css"/>
<script src="leaflet.zoomhome.min.js"></script>

Alternatively, you can install the plugin via Bower:

bower install leaflet.zoomhome --save

When you create your map, pass {zoomControl: false} to disable the standard zoom control:

var map = L.map('map', {zoomControl: false});

Then create the zoomhome-control and add it to the map:

var zoomHome = L.Control.zoomHome();
zoomHome.addTo(map);

Options

You can pass additional options when you create the control:

var zoomHome = L.Control.zoomHome({position: 'topright'});

In addition to the options supported by the standard zoom control, the zoomhome-control supports the following options:

zoomHomeIcon: Font-Awesome icon name for the home button (default: 'home').

zoomHomeTitle: Tooltip-text of the home button (default: 'Home').

homeCoordinates: Coordinates on which the map is centered when the home button is pressed (default: the location which the map displayed when the control was added to the map).

homeZoom: The zoom level to which the map zooms when the home button is pressed (default: the zoom level that was active when the control was added to the map).

Changing the Home View

You can change the home view after the control has been created using the following functions.

zoomHome.setHomeCoordinates(coordinates): If coordinates are given then they define the new home coordinates. If no coordinates are given then the current map center becomes the new home location. The home zoom level is not changed.

zoomHome.setHomeZoom(zoom): If zoom is given then it defines the new home zoom. If no zoom is given then the current map zoom becomes the new home zoom. The home coordinates are not changed.

zoomHome.setHomeBounds(bounds): If bounds are given then they define the new home view (both zoom and center). If they are not given, the current map bounds become the new home.

Inspecting the Home View

You can get the home coordinates and zoom using the zoomHome.getHomeCoordinates() and zoomHome.getHomeZoom() functions, respectively.

Change Log

See the file CHANGELOG.md.

License

Based on code by toms and licensed under CC-BY-SA 3.0.

Development

Install all requirements using npm install.

The tests can be run via grunt test (test against the currently installed Leaflet version) or via grunt test-all (test against all supported Leaflet versions).

Linting can be done via grunt jshint, and grunt uglify updates the minified JS file.

grunt on its own is equivalent to running the jshint, test-all and uglify tasks.

leaflet.zoomhome's Issues

Incompatibility with GoogleMutant plugin

Hi Florian,

first thanks for providing this leaflet plugin - we are using it in our WordPress mapping plugin "Maps Marker Pro" (send me an email to get a free dev license ;-)

For the upcoming v3.0 release of our plugin, we also upgraded to GoogleMutant leaflet plugin for displaying Google maps. We now found that there seems to be an issue with leaflet.zoomhome and GoogleMutant: if the zoomhome button is clicked, tiles are missing:

We posted this as a new ticket at https://gitlab.com/IvanSanchez/Leaflet.GridLayer.GoogleMutant/issues/29 and also created a jsfiddle at https://jsfiddle.net/ennv4ckr/2/

As we havent found out why this issue occurs in the first place (especially as only setView() is called which shouldnt lead to an issue in our opinion), it would be great if you could have a short look at the issue too and tell us if you think this needs to be fixed by GoogleMutant only or if the issue could also be fixed within the leaflet.zoomhome repository.

Your reply would be much appreciated!
best,

Robert

Fix package.json with name, version, description

So users can install via npm

Please consider changing your licence to e.g. MIT

https://creativecommons.org/faq/#can-i-apply-a-creative-commons-license-to-software

"We recommend against using Creative Commons licenses for software."

Pass zoom/pan options

Would be great to be able to modify the animation time and easing of the animation back to the home position by being able to pass zoom/pan options to setView.

homeZoom function

What is the proper way of calling this function? I have initialized a zoomHome and call it saying zoomHome.homeZoom() but I keep getting an error that homeZoom() is not a function.

Control doesn't handle browser resize if bounds are set

Users can use setHomeBounds to store a default bounds region for the home button.

In this method the zoom level for that bounds is calculated and stored.

But, if the browser is resized, that zoom level is now invalid.

The issue can be overcome if the bounds object is stored in the options, then the zoom level calculated in the go-home operation.

Zoom home offset if sidebar is open

Hi guys, this is my webmap:

www.mainjoin.eu/map/santiago/

Everything works perfectly: sidebar(v2), autopan, popup content go in sidebar panels fine.

Only a few trouble. At top right I have zoom home button.
When sidebar is close everything go fine: zoom home button center my map.
When sidebar is open the zoom home makes the same thing but the sidebar hide part of my center map.
I'd like a little right-offset on result of zoom home button when sidebar is open.
Something like:

if sidebar.close() = true
zoomhome
else
zoomhome.offset

Any advices are welcome, thanks!
Valerio

Execute custom function on button click?

I'd like to execute a custom function to clear all of the markers on my map when I click the zoomHome button. Is there a way to execute this on click? I don't see any information in the documentation about that.

`title="Home"` may be misinterpreted by blind users

The word "home" (specifically in the context of maps) may be misinterpreted by blind users to mean the individual's home (perhaps indicative of obtaining the user's location through the Geolocation API).

Please consider a different wording for the zoomHomeTitle:

leaflet.zoomhome/dist/leaflet.zoomhome.js

Line 20 in 84a0291

zoomHomeTitle: 'Home',

Examples for another default title: "Reset view", "Reset to initial view", "Reload view", "Reload map".

Reference discussion: Canadian-Geospatial-Platform/geoview#192

Feature request: Ability to mofidy homeCoordinates after init

It would be nice to have a method for setting the home coordinates.

zoomHome.setHomeCoordinates([35.01267, 88.83459])