Leaflet.ZoomEx

A Leaflet plugin that displays a zoom control on the map, with a customizable appearance and position using CSS.

Usage

Simply include the JS and CSS in the head.

<head>
    ...
    <script src="dist/leaflet-zoomex.min.js"></script>
    <link rel="stylesheet" href="demo.css" />
    ...
</head>

And add the control to the map.

new L.Control.ZoomEx({
    className: "leaflet-zoomex-rightcenter",
}).addTo(map);

For more details, refer to this demo (code: index.html, demo.css).

Option	Type	Default	Description
className	String	""	the custom CSS class name assigned to the control
afterZoomEnd	Function	null	the callback function after the "zoomend" event
zoomOutHtml	String	refer to zoom_out.svg	the HTML content of the zoom-out button
zoomInHtml	String	refer to zoom_in.svg	the HTML content of the zoom-in button
zoomOutTitle	String	"Map Zoom Out"	the "title" attribute of the zoom-out button
zoomInTitle	String	"Map Zoom In"	the "title" attribute of the zoom-in button
sliderTitle	String	"Map Zoom In / Zoom Out Slider"	the "title" attribute of the zoom slider
zoomOutAriaLabel	String	""	the "aria-label" attribute of the zoom-out button. If it is an empty string, it will be equal to "zoomOutTitle".
zoomInAriaLabel	String	""	the "aria-label" attribute of the zoom-in button. If it is an empty string, it will be equal to "zoomInTitle".
sliderAriaLabel	String	""	the "aria-label" attribute of the zoom slider. If it is an empty string, it will be equal to "sliderTitle".

Name		Name	Last commit message	Last commit date
Latest commit History 60 Commits
dist		dist
examples		examples
images		images
src		src
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
index.html		index.html