Leaflet.ResetView

A reset view control for Leaflet.

Design for Drupal Leaflet Module integration.

Requirement

• Leaflet 1.9.4+

Demo

• https://drustack.github.io/Leaflet.ResetView/

Usage

Provide a button for reset view into its original location:

<div id="map"></div>

<script>
    var map = L.map("map").setView([51.505, -0.09], 13);
    
    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
        maxZoom: 19,
        attribution: "&copy; <a href='https://openstreetmap.org/copyright'>OpenStreetMap contributors</a>"
    }).addTo(map);
    
    L.control.resetView({
        position: "topleft",
        title: "Reset view",
        latlng: L.latLng([51.505, -0.09]),
        zoom: 13,
    }).addTo(map);
</script>

Include via CDN

Leaflet.ResetView is available through jsDelivr:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@drustack/leaflet.resetview/dist/L.Control.ResetView.min.css">
<script src="https://cdn.jsdelivr.net/npm/@drustack/leaflet.resetview/dist/L.Control.ResetView.min.js"></script>

Development

Install NPM depedencies:

npm install

Build CSS and JS individually:

npm run eslint
npm run uglifyjs
npm run sass

Or simply build everything once together:

npm run build

Start the simple static HTTP server with http://localhost:8080/ for testing:

npm run http-server

License

• Code released under Apache License 2.0
• Docs released under CC BY 4.0
• SVG released under CC BY 4.0

Author Information

• Wong Hoi Sing Edison
  • https://twitter.com/hswong3i
  • https://github.com/hswong3i