leaflet-butter-smooth-zoom 0.1.0

package/Leaflet.ButterSmoothZoom.js

@@ -0,0 +1,303 @@
+L.Map.mergeOptions({
+  butterSmoothZoom: false,
+  butterSmoothScale: 0.0042,
+  butterSmoothEasing: 0.38,
+  butterSmoothEndDelay: 140,
+  butterSmoothHideVectors: false,
+  butterSmoothButtonZoomDelta: 1,
+  butterSmoothZoomAnimationDuration: 0.125,
+});
+
+const clampNumber = function (value, min, max) {
+  return Math.min(Math.max(value, min), max);
+};
+
+L.Map.ButterSmoothZoom = L.Handler.extend({
+  addHooks: function () {
+    const map = this._map;
+    L.DomEvent.on(map._container, 'wheel', this._onWheel, this);
+    this._prevZoomDelta = map.options.zoomDelta;
+    if (typeof map.options.butterSmoothButtonZoomDelta === 'number') {
+      map.options.zoomDelta = map.options.butterSmoothButtonZoomDelta;
+    }
+    this._ensureZoomAnimationStyle();
+    const container = map.getContainer();
+    this._addedZoomAnimClass = !container.classList.contains('butter-smooth-zoom-fast');
+    container.classList.add('butter-smooth-zoom-fast');
+    this._prevZoomAnimDuration = container.style.getPropertyValue(
+      '--butter-smooth-zoom-duration'
+    );
+    const duration = map.options.butterSmoothZoomAnimationDuration;
+    if (typeof duration === 'number') {
+      container.style.setProperty('--butter-smooth-zoom-duration', `${duration}s`);
+    }
+  },
+
+  removeHooks: function () {
+    const map = this._map;
+    L.DomEvent.off(map._container, 'wheel', this._onWheel, this);
+    if (typeof this._prevZoomDelta === 'number') {
+      map.options.zoomDelta = this._prevZoomDelta;
+    }
+    const container = map.getContainer();
+    if (this._addedZoomAnimClass) {
+      container.classList.remove('butter-smooth-zoom-fast');
+    }
+    if (typeof this._prevZoomAnimDuration === 'string') {
+      if (this._prevZoomAnimDuration.length > 0) {
+        container.style.setProperty('--butter-smooth-zoom-duration', this._prevZoomAnimDuration);
+      } else {
+        container.style.removeProperty('--butter-smooth-zoom-duration');
+      }
+    }
+    this._cleanup();
+  },
+
+  _ensureZoomAnimationStyle: function () {
+    if (typeof document === 'undefined') {
+      return;
+    }
+    if (document.getElementById('butter-smooth-zoom-style')) {
+      return;
+    }
+    const style = document.createElement('style');
+    style.id = 'butter-smooth-zoom-style';
+    style.textContent =
+      '.butter-smooth-zoom-fast .leaflet-zoom-anim .leaflet-zoom-animated{' +
+      '-webkit-transition-duration:var(--butter-smooth-zoom-duration)!important;' +
+      '-moz-transition-duration:var(--butter-smooth-zoom-duration)!important;' +
+      'transition-duration:var(--butter-smooth-zoom-duration)!important;' +
+      '}';
+    document.head.appendChild(style);
+  },
+
+  _toggleHide: function (active) {
+    if (!this._map.options.butterSmoothHideVectors) {
+      return;
+    }
+    const container = this._map.getContainer();
+    if (!container) {
+      return;
+    }
+    container.classList.toggle('smooth-wheel-hide', active);
+  },
+
+  _getZoomAroundCenter: function (focus, zoom) {
+    const map = this._map;
+    const scale = map.getZoomScale(zoom);
+    const viewHalf = map.getSize().divideBy(2);
+    const containerPoint = map.latLngToContainerPoint(focus);
+    const centerOffset = containerPoint.subtract(viewHalf).multiplyBy(1 - 1 / scale);
+    return map.containerPointToLatLng(viewHalf.add(centerOffset));
+  },
+
+  _syncRenderers: function () {
+    if (!this._baseCenter || this._baseZoom === null || this._baseZoom === undefined) {
+      return;
+    }
+    this._map.eachLayer((layer) => {
+      if (layer instanceof L.Renderer) {
+        layer._center = this._baseCenter;
+        layer._zoom = this._baseZoom;
+      }
+    });
+  },
+
+  _cacheLineWeights: function () {
+    if (!this._lineBaseWeights) {
+      this._lineBaseWeights = new Map();
+    }
+    this._map.eachLayer((layer) => {
+      if (layer instanceof L.Path && !this._lineBaseWeights.has(layer)) {
+        const baseWeight =
+          layer.options && typeof layer.options.weight === 'number' ? layer.options.weight : 3;
+        this._lineBaseWeights.set(layer, baseWeight);
+      }
+    });
+  },
+
+  _cacheCircleRadii: function () {
+    if (!this._circleBaseRadii) {
+      this._circleBaseRadii = new Map();
+    }
+    this._map.eachLayer((layer) => {
+      if (
+        layer instanceof L.CircleMarker &&
+        !(layer instanceof L.Circle) &&
+        !this._circleBaseRadii.has(layer)
+      ) {
+        this._circleBaseRadii.set(layer, layer.getRadius());
+      }
+    });
+  },
+
+  _setCircleRadius: function (layer, radius) {
+    if (!layer) {
+      return;
+    }
+    layer.options.radius = radius;
+    layer._radius = radius;
+    if (layer._radiusY) {
+      layer._radiusY = radius;
+    }
+    if (layer._renderer && layer._renderer instanceof L.SVG && layer._renderer._updateCircle) {
+      layer._updateBounds();
+      layer._renderer._updateCircle(layer);
+    }
+  },
+
+  _projectCircleBase: function (layer) {
+    if (!layer || !this._baseCenter || this._baseZoom === null || this._baseZoom === undefined) {
+      return;
+    }
+    if (this._map._latLngToNewLayerPoint) {
+      const latlng = layer.getLatLng ? layer.getLatLng() : layer._latlng;
+      layer._point = this._map._latLngToNewLayerPoint(latlng, this._baseZoom, this._baseCenter);
+    }
+  },
+
+  _applyZoomFrame: function (zoom, focus) {
+    const map = this._map;
+    const center = this._getZoomAroundCenter(focus, zoom);
+    map.fire('zoomanim', { center, zoom, noUpdate: true });
+    map._move(center, zoom, undefined, true);
+    this._syncRenderers();
+
+    if (!map.options.butterSmoothHideVectors && this._baseZoom !== null && this._baseZoom !== undefined) {
+      const scale = map.getZoomScale(zoom, this._baseZoom);
+      if (this._lineBaseWeights) {
+        this._lineBaseWeights.forEach((baseWeight, layer) => {
+          if (layer && layer.setStyle) {
+            layer.setStyle({ weight: baseWeight / scale });
+          }
+        });
+      }
+      if (this._circleBaseRadii) {
+        this._circleBaseRadii.forEach((baseRadius, layer) => {
+          this._projectCircleBase(layer);
+          this._setCircleRadius(layer, baseRadius / scale);
+        });
+      }
+    }
+  },
+
+  _finalizeZoom: function () {
+    if (this._targetZoom === null || this._targetZoom === undefined) {
+      return;
+    }
+    const map = this._map;
+    const focus = this._lastFocus || map.getCenter();
+    const center = this._getZoomAroundCenter(focus, this._targetZoom);
+
+    map._animatingZoom = true;
+    map._animateToCenter = center;
+    map._animateToZoom = this._targetZoom;
+    map.fire('zoomanim', { center, zoom: this._targetZoom, noUpdate: false });
+    map._move(center, this._targetZoom, undefined, true);
+    if (map._onZoomTransitionEnd) {
+      map._onZoomTransitionEnd();
+    }
+
+    this._resetLineWeights();
+    this._resetCircleRadii();
+    this._toggleHide(false);
+    this._targetZoom = null;
+    this._lastFocus = null;
+    this._baseCenter = null;
+    this._baseZoom = null;
+  },
+
+  _animate: function () {
+    if (this._targetZoom === null || this._targetZoom === undefined) {
+      this._animationId = null;
+      return;
+    }
+
+    const map = this._map;
+    const current = map.getZoom();
+    const diff = this._targetZoom - current;
+
+    if (Math.abs(diff) < 0.0005) {
+      const focus = this._lastFocus || map.getCenter();
+      this._applyZoomFrame(this._targetZoom, focus);
+      this._animationId = null;
+      return;
+    }
+
+    const next = current + diff * map.options.butterSmoothEasing;
+    const focus = this._lastFocus || map.getCenter();
+    this._applyZoomFrame(next, focus);
+    this._animationId = requestAnimationFrame(this._animate.bind(this));
+  },
+
+  _onWheel: function (event) {
+    event.preventDefault();
+    const map = this._map;
+    const deltaModeFactor = event.deltaMode === 1 ? 20 : event.deltaMode === 2 ? 60 : 1;
+    const scaledDelta = -event.deltaY * deltaModeFactor;
+    const zoomChange = scaledDelta * map.options.butterSmoothScale;
+
+    if (this._baseCenter === null || this._baseCenter === undefined || this._baseZoom === null || this._baseZoom === undefined) {
+      this._baseCenter = map.getCenter();
+      this._baseZoom = map.getZoom();
+      this._syncRenderers();
+      this._cacheLineWeights();
+      this._cacheCircleRadii();
+    }
+
+    const current = this._targetZoom === null || this._targetZoom === undefined ? map.getZoom() : this._targetZoom;
+    this._targetZoom = clampNumber(current + zoomChange, map.getMinZoom(), map.getMaxZoom());
+    this._lastFocus = map.mouseEventToLatLng(event);
+
+    if (this._animationId === null || this._animationId === undefined) {
+      this._animationId = requestAnimationFrame(this._animate.bind(this));
+    }
+
+    this._toggleHide(true);
+
+    if (this._endTimer) {
+      clearTimeout(this._endTimer);
+    }
+    this._endTimer = setTimeout(this._finalizeZoom.bind(this), map.options.butterSmoothEndDelay);
+  },
+
+  _resetLineWeights: function () {
+    if (!this._lineBaseWeights) {
+      return;
+    }
+    this._lineBaseWeights.forEach((baseWeight, layer) => {
+      if (layer && layer.setStyle) {
+        layer.setStyle({ weight: baseWeight });
+      }
+    });
+  },
+
+  _resetCircleRadii: function () {
+    if (!this._circleBaseRadii) {
+      return;
+    }
+    this._circleBaseRadii.forEach((baseRadius, layer) => {
+      this._setCircleRadius(layer, baseRadius);
+    });
+  },
+
+  _cleanup: function () {
+    if (this._animationId !== null && this._animationId !== undefined) {
+      cancelAnimationFrame(this._animationId);
+    }
+    if (this._endTimer) {
+      clearTimeout(this._endTimer);
+    }
+    this._toggleHide(false);
+    this._resetLineWeights();
+    this._resetCircleRadii();
+    this._animationId = null;
+    this._endTimer = null;
+    this._targetZoom = null;
+    this._lastFocus = null;
+    this._baseCenter = null;
+    this._baseZoom = null;
+  },
+});
+
+L.Map.addInitHook('addHandler', 'butterSmoothZoom', L.Map.ButterSmoothZoom);

package/README.md

@@ -0,0 +1,106 @@
+# Leaflet Butter Smooth Zoom
+
+Butter-smooth wheel zoom handler for Leaflet with inertia-style zooming, plus optional vector hiding for silky tiles.
+
+## Demo
+
+Live demo: https://hexadeciman.github.io/leaflet-butter-smooth-zoom/
+Update the username once GitHub Pages is enabled.
+
+## Features
+
+- Inertia-style wheel zoom with configurable easing and end delay.
+- Keeps line weights and circle markers in place while zooming (no marker drifting).
+- Works with Leaflet and React-Leaflet.
+
+## Install
+
+```bash
+npm install leaflet-butter-smooth-zoom
+```
+
+```bash
+yarn add leaflet-butter-smooth-zoom
+```
+
+```bash
+pnpm add leaflet-butter-smooth-zoom
+```
+
+## Usage (Leaflet, ESM)
+
+```ts
+import 'leaflet-butter-smooth-zoom';
+import L from 'leaflet';
+
+const map = L.map('map', {
+  butterSmoothZoom: true,
+  butterSmoothScale: 0.0042,
+  butterSmoothEasing: 0.38,
+  butterSmoothEndDelay: 140,
+  butterSmoothHideVectors: false,
+  butterSmoothButtonZoomDelta: 1,
+  butterSmoothZoomAnimationDuration: 0.125
+});
+```
+
+## Usage (React-Leaflet)
+
+```tsx
+import 'leaflet-butter-smooth-zoom';
+import { MapContainer, TileLayer } from 'react-leaflet';
+
+<MapContainer
+  center={[40.73061, -73.935242]}
+  zoom={13}
+  scrollWheelZoom={false}
+  butterSmoothZoom
+  butterSmoothScale={0.0042}
+  butterSmoothEasing={0.38}
+  butterSmoothEndDelay={140}
+  butterSmoothButtonZoomDelta={1}
+>
+  <TileLayer
+    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+    attribution="&copy; OpenStreetMap contributors"
+  />
+</MapContainer>;
+```
+
+## Usage (script tag)
+
+This repo ships a standalone browser build: `Leaflet.ButterSmoothZoom.js`.
+
+```html
+<link
+  rel="stylesheet"
+  href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+/>
+<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+<script src="https://unpkg.com/leaflet-butter-smooth-zoom@latest/Leaflet.ButterSmoothZoom.js"></script>
+```
+
+Load Leaflet first, then the plugin. It registers `L.Map.ButterSmoothZoom` and the `butterSmoothZoom` handler.
+
+## Options
+
+- `butterSmoothZoom` (boolean): Enable the handler.
+- `butterSmoothScale` (number): Wheel delta multiplier. Higher values zoom faster.
+- `butterSmoothEasing` (number): Interpolation factor per frame. Higher values feel snappier.
+- `butterSmoothEndDelay` (number): Delay before final tile settle after wheel stops (ms).
+- `butterSmoothHideVectors` (boolean): Toggle `.smooth-wheel-hide` class during zoom.
+- `butterSmoothButtonZoomDelta` (number): Zoom step used by the +/- controls while enabled.
+- `butterSmoothZoomAnimationDuration` (number): Zoom button animation duration in seconds (default `0.125`).
+
+## CSS helper (optional)
+
+If you enable `butterSmoothHideVectors`, add this to your app CSS:
+
+```css
+.leaflet-container.smooth-wheel-hide .leaflet-overlay-pane,
+.leaflet-container.smooth-wheel-hide .leaflet-marker-pane,
+.leaflet-container.smooth-wheel-hide .leaflet-shadow-pane {
+  opacity: 0;
+  transition: opacity 120ms ease;
+}
+```

package/dist/index.cjs

@@ -0,0 +1,301 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+module.exports = __toCommonJS(index_exports);
+var import_leaflet = __toESM(require("leaflet"), 1);
+import_leaflet.default.Map.mergeOptions({
+  butterSmoothZoom: false,
+  butterSmoothScale: 42e-4,
+  butterSmoothEasing: 0.38,
+  butterSmoothEndDelay: 140,
+  butterSmoothHideVectors: false,
+  butterSmoothButtonZoomDelta: 1,
+  butterSmoothZoomAnimationDuration: 0.125
+});
+var clampNumber = (value, min, max) => {
+  return Math.min(Math.max(value, min), max);
+};
+var ButterSmoothZoom = import_leaflet.default.Handler.extend({
+  addHooks: function() {
+    const map = this._map;
+    const container = map.getContainer();
+    import_leaflet.default.DomEvent.on(container, "wheel", this._onWheel, this);
+    this._prevZoomDelta = map.options.zoomDelta;
+    if (typeof map.options.butterSmoothButtonZoomDelta === "number") {
+      map.options.zoomDelta = map.options.butterSmoothButtonZoomDelta;
+    }
+    this._ensureZoomAnimationStyle();
+    this._addedZoomAnimClass = !container.classList.contains("butter-smooth-zoom-fast");
+    container.classList.add("butter-smooth-zoom-fast");
+    this._prevZoomAnimDuration = container.style.getPropertyValue(
+      "--butter-smooth-zoom-duration"
+    );
+    const duration = map.options.butterSmoothZoomAnimationDuration;
+    if (typeof duration === "number") {
+      container.style.setProperty("--butter-smooth-zoom-duration", `${duration}s`);
+    }
+  },
+  removeHooks: function() {
+    const map = this._map;
+    const container = map.getContainer();
+    import_leaflet.default.DomEvent.off(container, "wheel", this._onWheel, this);
+    if (typeof this._prevZoomDelta === "number") {
+      map.options.zoomDelta = this._prevZoomDelta;
+    }
+    if (this._addedZoomAnimClass) {
+      container.classList.remove("butter-smooth-zoom-fast");
+    }
+    if (typeof this._prevZoomAnimDuration === "string") {
+      if (this._prevZoomAnimDuration.length > 0) {
+        container.style.setProperty("--butter-smooth-zoom-duration", this._prevZoomAnimDuration);
+      } else {
+        container.style.removeProperty("--butter-smooth-zoom-duration");
+      }
+    }
+    this._cleanup();
+  },
+  _ensureZoomAnimationStyle: function() {
+    if (typeof document === "undefined") {
+      return;
+    }
+    if (document.getElementById("butter-smooth-zoom-style")) {
+      return;
+    }
+    const style = document.createElement("style");
+    style.id = "butter-smooth-zoom-style";
+    style.textContent = ".butter-smooth-zoom-fast .leaflet-zoom-anim .leaflet-zoom-animated{-webkit-transition-duration:var(--butter-smooth-zoom-duration)!important;-moz-transition-duration:var(--butter-smooth-zoom-duration)!important;transition-duration:var(--butter-smooth-zoom-duration)!important;}";
+    document.head.appendChild(style);
+  },
+  _toggleHide: function(active) {
+    if (!this._map.options.butterSmoothHideVectors) {
+      return;
+    }
+    const container = this._map.getContainer();
+    if (!container) {
+      return;
+    }
+    container.classList.toggle("smooth-wheel-hide", active);
+  },
+  _getZoomAroundCenter: function(focus, zoom) {
+    const map = this._map;
+    const scale = map.getZoomScale(zoom);
+    const viewHalf = map.getSize().divideBy(2);
+    const containerPoint = map.latLngToContainerPoint(focus);
+    const centerOffset = containerPoint.subtract(viewHalf).multiplyBy(1 - 1 / scale);
+    return map.containerPointToLatLng(viewHalf.add(centerOffset));
+  },
+  _syncRenderers: function() {
+    if (!this._baseCenter || this._baseZoom === null || this._baseZoom === void 0) {
+      return;
+    }
+    this._map.eachLayer((layer) => {
+      if (layer instanceof import_leaflet.default.Renderer) {
+        const renderer = layer;
+        renderer._center = this._baseCenter;
+        renderer._zoom = this._baseZoom;
+      }
+    });
+  },
+  _cacheLineWeights: function() {
+    if (!this._lineBaseWeights) {
+      this._lineBaseWeights = /* @__PURE__ */ new Map();
+    }
+    this._map.eachLayer((layer) => {
+      if (layer instanceof import_leaflet.default.Path && !this._lineBaseWeights.has(layer)) {
+        const baseWeight = layer.options && typeof layer.options.weight === "number" ? layer.options.weight : 3;
+        this._lineBaseWeights.set(layer, baseWeight);
+      }
+    });
+  },
+  _cacheCircleRadii: function() {
+    if (!this._circleBaseRadii) {
+      this._circleBaseRadii = /* @__PURE__ */ new Map();
+    }
+    this._map.eachLayer((layer) => {
+      if (layer instanceof import_leaflet.default.CircleMarker && !(layer instanceof import_leaflet.default.Circle) && !this._circleBaseRadii.has(layer)) {
+        this._circleBaseRadii.set(layer, layer.getRadius());
+      }
+    });
+  },
+  _setCircleRadius: function(layer, radius) {
+    const circle = layer;
+    if (!circle) {
+      return;
+    }
+    circle.options.radius = radius;
+    circle._radius = radius;
+    if (circle._radiusY) {
+      circle._radiusY = radius;
+    }
+    if (circle._renderer && circle._renderer instanceof import_leaflet.default.SVG && circle._renderer._updateCircle) {
+      circle._updateBounds();
+      circle._renderer._updateCircle(circle);
+    }
+  },
+  _projectCircleBase: function(layer) {
+    const circle = layer;
+    if (!circle || !this._baseCenter || this._baseZoom === null || this._baseZoom === void 0) {
+      return;
+    }
+    const map = this._map;
+    const latlng = circle.getLatLng ? circle.getLatLng() : circle._latlng;
+    if (!latlng) {
+      return;
+    }
+    circle._point = map._latLngToNewLayerPoint(latlng, this._baseZoom, this._baseCenter);
+  },
+  _applyZoomFrame: function(zoom, focus) {
+    const map = this._map;
+    const center = this._getZoomAroundCenter(focus, zoom);
+    map.fire("zoomanim", { center, zoom, noUpdate: true });
+    map._move(center, zoom, void 0, true);
+    this._syncRenderers();
+    if (!map.options.butterSmoothHideVectors && this._baseZoom !== null && this._baseZoom !== void 0) {
+      const scale = map.getZoomScale(zoom, this._baseZoom);
+      if (this._lineBaseWeights) {
+        this._lineBaseWeights.forEach((baseWeight, layer) => {
+          if (layer && layer.setStyle) {
+            layer.setStyle({ weight: baseWeight / scale });
+          }
+        });
+      }
+      if (this._circleBaseRadii) {
+        this._circleBaseRadii.forEach((baseRadius, layer) => {
+          this._projectCircleBase(layer);
+          this._setCircleRadius(layer, baseRadius / scale);
+        });
+      }
+    }
+  },
+  _finalizeZoom: function() {
+    if (this._targetZoom === null || this._targetZoom === void 0) {
+      return;
+    }
+    const map = this._map;
+    const focus = this._lastFocus || map.getCenter();
+    const center = this._getZoomAroundCenter(focus, this._targetZoom);
+    map._animatingZoom = true;
+    map._animateToCenter = center;
+    map._animateToZoom = this._targetZoom;
+    map.fire("zoomanim", { center, zoom: this._targetZoom, noUpdate: false });
+    map._move(center, this._targetZoom, void 0, true);
+    if (map._onZoomTransitionEnd) {
+      map._onZoomTransitionEnd();
+    }
+    this._resetLineWeights();
+    this._resetCircleRadii();
+    this._toggleHide(false);
+    this._targetZoom = null;
+    this._lastFocus = null;
+    this._baseCenter = null;
+    this._baseZoom = null;
+  },
+  _animate: function() {
+    if (this._targetZoom === null || this._targetZoom === void 0) {
+      this._animationId = null;
+      return;
+    }
+    const map = this._map;
+    const current = map.getZoom();
+    const diff = this._targetZoom - current;
+    if (Math.abs(diff) < 5e-4) {
+      const focus2 = this._lastFocus || map.getCenter();
+      this._applyZoomFrame(this._targetZoom, focus2);
+      this._animationId = null;
+      return;
+    }
+    const easing = map.options.butterSmoothEasing ?? 0.38;
+    const next = current + diff * easing;
+    const focus = this._lastFocus || map.getCenter();
+    this._applyZoomFrame(next, focus);
+    this._animationId = requestAnimationFrame(this._animate.bind(this));
+  },
+  _onWheel: function(event) {
+    event.preventDefault();
+    const map = this._map;
+    const deltaModeFactor = event.deltaMode === 1 ? 20 : event.deltaMode === 2 ? 60 : 1;
+    const scaledDelta = -event.deltaY * deltaModeFactor;
+    const zoomScale = map.options.butterSmoothScale ?? 42e-4;
+    const zoomChange = scaledDelta * zoomScale;
+    if (this._baseCenter === null || this._baseCenter === void 0 || this._baseZoom === null || this._baseZoom === void 0) {
+      this._baseCenter = map.getCenter();
+      this._baseZoom = map.getZoom();
+      this._syncRenderers();
+      this._cacheLineWeights();
+      this._cacheCircleRadii();
+    }
+    const current = this._targetZoom === null || this._targetZoom === void 0 ? map.getZoom() : this._targetZoom;
+    this._targetZoom = clampNumber(current + zoomChange, map.getMinZoom(), map.getMaxZoom());
+    this._lastFocus = map.mouseEventToLatLng(event);
+    if (this._animationId === null || this._animationId === void 0) {
+      this._animationId = requestAnimationFrame(this._animate.bind(this));
+    }
+    this._toggleHide(true);
+    if (this._endTimer) {
+      clearTimeout(this._endTimer);
+    }
+    const endDelay = map.options.butterSmoothEndDelay ?? 140;
+    this._endTimer = setTimeout(this._finalizeZoom.bind(this), endDelay);
+  },
+  _resetLineWeights: function() {
+    if (!this._lineBaseWeights) {
+      return;
+    }
+    this._lineBaseWeights.forEach((baseWeight, layer) => {
+      if (layer && layer.setStyle) {
+        layer.setStyle({ weight: baseWeight });
+      }
+    });
+  },
+  _resetCircleRadii: function() {
+    if (!this._circleBaseRadii) {
+      return;
+    }
+    this._circleBaseRadii.forEach((baseRadius, layer) => {
+      this._setCircleRadius(layer, baseRadius);
+    });
+  },
+  _cleanup: function() {
+    if (this._animationId !== null && this._animationId !== void 0) {
+      cancelAnimationFrame(this._animationId);
+    }
+    if (this._endTimer) {
+      clearTimeout(this._endTimer);
+    }
+    this._toggleHide(false);
+    this._resetLineWeights();
+    this._resetCircleRadii();
+    this._animationId = null;
+    this._endTimer = null;
+    this._targetZoom = null;
+    this._lastFocus = null;
+    this._baseCenter = null;
+    this._baseZoom = null;
+  }
+});
+import_leaflet.default.Map.ButterSmoothZoom = ButterSmoothZoom;
+import_leaflet.default.Map.addInitHook("addHandler", "butterSmoothZoom", import_leaflet.default.Map.ButterSmoothZoom);

package/dist/index.d.cts

@@ -0,0 +1,17 @@
+declare module 'leaflet' {
+    interface MapOptions {
+        butterSmoothZoom?: boolean;
+        butterSmoothScale?: number;
+        butterSmoothEasing?: number;
+        butterSmoothEndDelay?: number;
+        butterSmoothHideVectors?: boolean;
+        butterSmoothButtonZoomDelta?: number;
+        butterSmoothZoomAnimationDuration?: number;
+    }
+    interface Map {
+        butterSmoothZoom?: Handler;
+    }
+    namespace Map {
+        let ButterSmoothZoom: typeof Handler;
+    }
+}

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+declare module 'leaflet' {
+    interface MapOptions {
+        butterSmoothZoom?: boolean;
+        butterSmoothScale?: number;
+        butterSmoothEasing?: number;
+        butterSmoothEndDelay?: number;
+        butterSmoothHideVectors?: boolean;
+        butterSmoothButtonZoomDelta?: number;
+        butterSmoothZoomAnimationDuration?: number;
+    }
+    interface Map {
+        butterSmoothZoom?: Handler;
+    }
+    namespace Map {
+        let ButterSmoothZoom: typeof Handler;
+    }
+}

package/dist/index.js

@@ -0,0 +1,274 @@
+// src/index.ts
+import L from "leaflet";
+L.Map.mergeOptions({
+  butterSmoothZoom: false,
+  butterSmoothScale: 42e-4,
+  butterSmoothEasing: 0.38,
+  butterSmoothEndDelay: 140,
+  butterSmoothHideVectors: false,
+  butterSmoothButtonZoomDelta: 1,
+  butterSmoothZoomAnimationDuration: 0.125
+});
+var clampNumber = (value, min, max) => {
+  return Math.min(Math.max(value, min), max);
+};
+var ButterSmoothZoom = L.Handler.extend({
+  addHooks: function() {
+    const map = this._map;
+    const container = map.getContainer();
+    L.DomEvent.on(container, "wheel", this._onWheel, this);
+    this._prevZoomDelta = map.options.zoomDelta;
+    if (typeof map.options.butterSmoothButtonZoomDelta === "number") {
+      map.options.zoomDelta = map.options.butterSmoothButtonZoomDelta;
+    }
+    this._ensureZoomAnimationStyle();
+    this._addedZoomAnimClass = !container.classList.contains("butter-smooth-zoom-fast");
+    container.classList.add("butter-smooth-zoom-fast");
+    this._prevZoomAnimDuration = container.style.getPropertyValue(
+      "--butter-smooth-zoom-duration"
+    );
+    const duration = map.options.butterSmoothZoomAnimationDuration;
+    if (typeof duration === "number") {
+      container.style.setProperty("--butter-smooth-zoom-duration", `${duration}s`);
+    }
+  },
+  removeHooks: function() {
+    const map = this._map;
+    const container = map.getContainer();
+    L.DomEvent.off(container, "wheel", this._onWheel, this);
+    if (typeof this._prevZoomDelta === "number") {
+      map.options.zoomDelta = this._prevZoomDelta;
+    }
+    if (this._addedZoomAnimClass) {
+      container.classList.remove("butter-smooth-zoom-fast");
+    }
+    if (typeof this._prevZoomAnimDuration === "string") {
+      if (this._prevZoomAnimDuration.length > 0) {
+        container.style.setProperty("--butter-smooth-zoom-duration", this._prevZoomAnimDuration);
+      } else {
+        container.style.removeProperty("--butter-smooth-zoom-duration");
+      }
+    }
+    this._cleanup();
+  },
+  _ensureZoomAnimationStyle: function() {
+    if (typeof document === "undefined") {
+      return;
+    }
+    if (document.getElementById("butter-smooth-zoom-style")) {
+      return;
+    }
+    const style = document.createElement("style");
+    style.id = "butter-smooth-zoom-style";
+    style.textContent = ".butter-smooth-zoom-fast .leaflet-zoom-anim .leaflet-zoom-animated{-webkit-transition-duration:var(--butter-smooth-zoom-duration)!important;-moz-transition-duration:var(--butter-smooth-zoom-duration)!important;transition-duration:var(--butter-smooth-zoom-duration)!important;}";
+    document.head.appendChild(style);
+  },
+  _toggleHide: function(active) {
+    if (!this._map.options.butterSmoothHideVectors) {
+      return;
+    }
+    const container = this._map.getContainer();
+    if (!container) {
+      return;
+    }
+    container.classList.toggle("smooth-wheel-hide", active);
+  },
+  _getZoomAroundCenter: function(focus, zoom) {
+    const map = this._map;
+    const scale = map.getZoomScale(zoom);
+    const viewHalf = map.getSize().divideBy(2);
+    const containerPoint = map.latLngToContainerPoint(focus);
+    const centerOffset = containerPoint.subtract(viewHalf).multiplyBy(1 - 1 / scale);
+    return map.containerPointToLatLng(viewHalf.add(centerOffset));
+  },
+  _syncRenderers: function() {
+    if (!this._baseCenter || this._baseZoom === null || this._baseZoom === void 0) {
+      return;
+    }
+    this._map.eachLayer((layer) => {
+      if (layer instanceof L.Renderer) {
+        const renderer = layer;
+        renderer._center = this._baseCenter;
+        renderer._zoom = this._baseZoom;
+      }
+    });
+  },
+  _cacheLineWeights: function() {
+    if (!this._lineBaseWeights) {
+      this._lineBaseWeights = /* @__PURE__ */ new Map();
+    }
+    this._map.eachLayer((layer) => {
+      if (layer instanceof L.Path && !this._lineBaseWeights.has(layer)) {
+        const baseWeight = layer.options && typeof layer.options.weight === "number" ? layer.options.weight : 3;
+        this._lineBaseWeights.set(layer, baseWeight);
+      }
+    });
+  },
+  _cacheCircleRadii: function() {
+    if (!this._circleBaseRadii) {
+      this._circleBaseRadii = /* @__PURE__ */ new Map();
+    }
+    this._map.eachLayer((layer) => {
+      if (layer instanceof L.CircleMarker && !(layer instanceof L.Circle) && !this._circleBaseRadii.has(layer)) {
+        this._circleBaseRadii.set(layer, layer.getRadius());
+      }
+    });
+  },
+  _setCircleRadius: function(layer, radius) {
+    const circle = layer;
+    if (!circle) {
+      return;
+    }
+    circle.options.radius = radius;
+    circle._radius = radius;
+    if (circle._radiusY) {
+      circle._radiusY = radius;
+    }
+    if (circle._renderer && circle._renderer instanceof L.SVG && circle._renderer._updateCircle) {
+      circle._updateBounds();
+      circle._renderer._updateCircle(circle);
+    }
+  },
+  _projectCircleBase: function(layer) {
+    const circle = layer;
+    if (!circle || !this._baseCenter || this._baseZoom === null || this._baseZoom === void 0) {
+      return;
+    }
+    const map = this._map;
+    const latlng = circle.getLatLng ? circle.getLatLng() : circle._latlng;
+    if (!latlng) {
+      return;
+    }
+    circle._point = map._latLngToNewLayerPoint(latlng, this._baseZoom, this._baseCenter);
+  },
+  _applyZoomFrame: function(zoom, focus) {
+    const map = this._map;
+    const center = this._getZoomAroundCenter(focus, zoom);
+    map.fire("zoomanim", { center, zoom, noUpdate: true });
+    map._move(center, zoom, void 0, true);
+    this._syncRenderers();
+    if (!map.options.butterSmoothHideVectors && this._baseZoom !== null && this._baseZoom !== void 0) {
+      const scale = map.getZoomScale(zoom, this._baseZoom);
+      if (this._lineBaseWeights) {
+        this._lineBaseWeights.forEach((baseWeight, layer) => {
+          if (layer && layer.setStyle) {
+            layer.setStyle({ weight: baseWeight / scale });
+          }
+        });
+      }
+      if (this._circleBaseRadii) {
+        this._circleBaseRadii.forEach((baseRadius, layer) => {
+          this._projectCircleBase(layer);
+          this._setCircleRadius(layer, baseRadius / scale);
+        });
+      }
+    }
+  },
+  _finalizeZoom: function() {
+    if (this._targetZoom === null || this._targetZoom === void 0) {
+      return;
+    }
+    const map = this._map;
+    const focus = this._lastFocus || map.getCenter();
+    const center = this._getZoomAroundCenter(focus, this._targetZoom);
+    map._animatingZoom = true;
+    map._animateToCenter = center;
+    map._animateToZoom = this._targetZoom;
+    map.fire("zoomanim", { center, zoom: this._targetZoom, noUpdate: false });
+    map._move(center, this._targetZoom, void 0, true);
+    if (map._onZoomTransitionEnd) {
+      map._onZoomTransitionEnd();
+    }
+    this._resetLineWeights();
+    this._resetCircleRadii();
+    this._toggleHide(false);
+    this._targetZoom = null;
+    this._lastFocus = null;
+    this._baseCenter = null;
+    this._baseZoom = null;
+  },
+  _animate: function() {
+    if (this._targetZoom === null || this._targetZoom === void 0) {
+      this._animationId = null;
+      return;
+    }
+    const map = this._map;
+    const current = map.getZoom();
+    const diff = this._targetZoom - current;
+    if (Math.abs(diff) < 5e-4) {
+      const focus2 = this._lastFocus || map.getCenter();
+      this._applyZoomFrame(this._targetZoom, focus2);
+      this._animationId = null;
+      return;
+    }
+    const easing = map.options.butterSmoothEasing ?? 0.38;
+    const next = current + diff * easing;
+    const focus = this._lastFocus || map.getCenter();
+    this._applyZoomFrame(next, focus);
+    this._animationId = requestAnimationFrame(this._animate.bind(this));
+  },
+  _onWheel: function(event) {
+    event.preventDefault();
+    const map = this._map;
+    const deltaModeFactor = event.deltaMode === 1 ? 20 : event.deltaMode === 2 ? 60 : 1;
+    const scaledDelta = -event.deltaY * deltaModeFactor;
+    const zoomScale = map.options.butterSmoothScale ?? 42e-4;
+    const zoomChange = scaledDelta * zoomScale;
+    if (this._baseCenter === null || this._baseCenter === void 0 || this._baseZoom === null || this._baseZoom === void 0) {
+      this._baseCenter = map.getCenter();
+      this._baseZoom = map.getZoom();
+      this._syncRenderers();
+      this._cacheLineWeights();
+      this._cacheCircleRadii();
+    }
+    const current = this._targetZoom === null || this._targetZoom === void 0 ? map.getZoom() : this._targetZoom;
+    this._targetZoom = clampNumber(current + zoomChange, map.getMinZoom(), map.getMaxZoom());
+    this._lastFocus = map.mouseEventToLatLng(event);
+    if (this._animationId === null || this._animationId === void 0) {
+      this._animationId = requestAnimationFrame(this._animate.bind(this));
+    }
+    this._toggleHide(true);
+    if (this._endTimer) {
+      clearTimeout(this._endTimer);
+    }
+    const endDelay = map.options.butterSmoothEndDelay ?? 140;
+    this._endTimer = setTimeout(this._finalizeZoom.bind(this), endDelay);
+  },
+  _resetLineWeights: function() {
+    if (!this._lineBaseWeights) {
+      return;
+    }
+    this._lineBaseWeights.forEach((baseWeight, layer) => {
+      if (layer && layer.setStyle) {
+        layer.setStyle({ weight: baseWeight });
+      }
+    });
+  },
+  _resetCircleRadii: function() {
+    if (!this._circleBaseRadii) {
+      return;
+    }
+    this._circleBaseRadii.forEach((baseRadius, layer) => {
+      this._setCircleRadius(layer, baseRadius);
+    });
+  },
+  _cleanup: function() {
+    if (this._animationId !== null && this._animationId !== void 0) {
+      cancelAnimationFrame(this._animationId);
+    }
+    if (this._endTimer) {
+      clearTimeout(this._endTimer);
+    }
+    this._toggleHide(false);
+    this._resetLineWeights();
+    this._resetCircleRadii();
+    this._animationId = null;
+    this._endTimer = null;
+    this._targetZoom = null;
+    this._lastFocus = null;
+    this._baseCenter = null;
+    this._baseZoom = null;
+  }
+});
+L.Map.ButterSmoothZoom = ButterSmoothZoom;
+L.Map.addInitHook("addHandler", "butterSmoothZoom", L.Map.ButterSmoothZoom);

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "leaflet-butter-smooth-zoom",
+  "version": "0.1.0",
+  "description": "Butter-smooth wheel zoom handler for Leaflet.",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "sideEffects": true,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "Leaflet.ButterSmoothZoom.js",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts --clean",
+    "dev": "tsup src/index.ts --format esm --dts --watch"
+  },
+  "peerDependencies": {
+    "leaflet": "^1.9.4"
+  },
+  "devDependencies": {
+    "@types/leaflet": "^1.9.12",
+    "tsup": "^8.0.1",
+    "typescript": "^5.5.4"
+  }
+}