npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

leaflet.zoomhome

v1.0.0

Published

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

Downloads

630

Readme

Leaflet.zoomhome

This fork is used to add support for AMD/Common JS and publish into npm packages

  • Usage:
    import 'leaflet.zoomhome/dist/leaflet.zoomhome.min.js';
    ...
    L.Control.zoomHome().addTo(map);
    ...

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

Demo

Forked from torfsen/leaflet.zoomhome

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 NPM:

npm install leaflet.zoomhome

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.