Skip to content

elrobis/L.Control.ZoomBar

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 

L.Control.ZoomBar

An extended version of Leaflet's native Zoom control with Home and Zoom-to-Area buttons.

Demo

This control will be most useful in mapping apps with a lot of desktop users who might benefit from a zoom-to-area control. Because the zoom-to-area button isn't useful on mobile due to native pinch zooming, it isn't loaded when small area screens are detected.

The home button is loaded regardless of client device conditions. The home "location" is set to the map's initial view, which is established by a call to map.setView() immediately after the map is instantiated.

Implementation:

Copy the files from the build directory into your application and save them in the same folder as your leaflet library files...don't forget the two button icon PNGs, which can be copied into Leaflet's images directory. Link the CSS and JS files in your html section immediately after the leaflet library files of the same type. For example..

<link rel="stylesheet" type="text/css" href="src/leaflet.css"/>
<link rel="stylesheet" type="text/css" href="src/L.Control.ZoomBar.css"/>

<script type="text/javascript" src="src/leaflet.js"></script>
<script type="text/javascript" src="src/L.Control.ZoomBar.js"></script>

With the control library files linked, instantiate your leaflet map like normal, except make sure to set the zoomControl option to false to disable leaflet's native zoom control. The "home position" will be established by the initial call to setView().

// Instantiate your leaflet map object..
//
var map = L.map('map',{
                        minZoom: 13,
                        maxZoom: 18,
                        zoomControl: false                // set to false !
                      }).setView([34.00, -81.035], 14);   // sets the reusable home position

// Instantiate the ZoomBar control..
//
var zoom_bar = new L.Control.ZoomBar({position: 'topright'}).addTo(map);

About

An extended version of Leaflet's native Zoom control with Home and Zoom-to-Area buttons.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published