Skip to content

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

Notifications You must be signed in to change notification settings

elrobis/L.Control.ZoomBar

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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