Define the new optional properties "centerToReset" and "centerToZoom"

Author: dtrucs

README.md

@@ -35,10 +35,10 @@ const Map = () => {
 
 ## Props
 
-| Name       | Type                                                                 | Default      | Description                        |
-|------------|----------------------------------------------------------------------|--------------|------------------------------------|
-| position?   | [ControlOptions](https://leafletjs.com/reference.html#control-position) | "topleft" | The position of the control        |
-| title?  | string                                                                  | "Reset map view"    | The control title.       |
-| icon?     | string                                                | "\u2610"    | The control icon. Can be either a path for `url()` or a unicode character. |
-
-
+| Name           | Type                                                                    | Default          | Description                                                     |
+|----------------|-------------------------------------------------------------------------|------------------|-----------------------------------------------------------------|
+| position?      | [ControlOptions](https://leafletjs.com/reference.html#control-position) | "topleft"        | The position of the control                                     |
+| title?         | string                                                                  | "Reset map view" | The control title.                                              |
+| icon?          | string                                                                  | "\u2610"         | The control icon. Can be either a path for `url()` or a unicode |
+| centerToReset? | [LatLng](https://leafletjs.com/reference.html#latlng)                   | undefined        | Define a different center than the one mounted by the map       |
+| zoomToReset?   | number                                                                  | undefined        | Define a different zoom than the one mounted by the map         |

__tests__/ResetViewControl.spec.tsx

@@ -16,24 +16,24 @@ describe("ResetViewControl", () => {
   const defaultMapCenter = [-96.8716348, 32.8205866] as LatLngExpression;
   const defaultMapZoom = 5
 
-  const ControlWrapper = ({ title, icon }: ResetViewControlOptions) => {
+  const ControlWrapper = ({ title, icon, centerToReset, zoomToReset }: ResetViewControlOptions) => {
     useMapEvents({
       viewreset: mockHandleViewReset,
     });
 
     return (
-      <>
-        <ResetViewControl
-          title={title ?? "Reset view"}
-          icon={icon ?? "\u2612"}
-        />
-      </>
+      <ResetViewControl
+        title={title ?? "Reset view"}
+        icon={icon ?? "\u2612"}
+        centerToReset={centerToReset}
+        zoomToReset={zoomToReset}
+      />
     );
   };
-  const Map = ({ title, icon }: ResetViewControlOptions) => {
+  const Map = ({ title, icon, centerToReset, zoomToReset }: ResetViewControlOptions) => {
     return (
       <MapContainer zoom={defaultMapZoom} center={defaultMapCenter} ref={map => mapInstance = map}>
-        <ControlWrapper title={title} icon={icon} />
+        <ControlWrapper title={title} icon={icon} centerToReset={centerToReset} zoomToReset={zoomToReset} />
       </MapContainer>
     );
   };
@@ -59,6 +59,24 @@ describe("ResetViewControl", () => {
     expect(mockHandleViewReset).toHaveBeenCalledTimes(2);
   });
 
+  test("can reset the map view to a zoom and center different from those mounted by the map", () => {
+    const centerToReset = [44.8, 6.3] as LatLngExpression;
+    const zoomToReset = 17;
+    render(<Map centerToReset={centerToReset} zoomToReset={zoomToReset} />);
+
+    expect(mapInstance?.getCenter().lat).toBeCloseTo(defaultMapCenter[0], 1);
+    expect(mapInstance?.getCenter().lng).toBeCloseTo(defaultMapCenter[1], 1);
+    expect(mapInstance?.getZoom()).toEqual(defaultMapZoom)
+
+    userEvent.click(screen.getByTitle("Reset view"));
+
+    expect(mapInstance?.getCenter().lat).toBeCloseTo(centerToReset[0], 1);
+    expect(mapInstance?.getCenter().lng).toBeCloseTo(centerToReset[1], 1);
+    expect(mapInstance?.getZoom()).toEqual(zoomToReset)
+
+    expect(mockHandleViewReset).toHaveBeenCalledTimes(3);
+  });
+
   test("can see icon", () => {
     render(<Map />);
 

src/ResetViewControl.ts

@@ -1,7 +1,7 @@
 import { createControlComponent } from "@react-leaflet/core";
 import { Control, DomUtil, DomEvent, Util } from "leaflet";
 
-import type { Map, ControlOptions, LatLng } from "leaflet";
+import type { Map, ControlOptions, LatLng, LatLngExpression } from "leaflet";
 
 export type ResetViewControlOptions = {
   /**
@@ -14,15 +14,22 @@ export type ResetViewControlOptions = {
    * It renders a box by default.
    */
   icon?: string;
+
+  /**
+   * "zoom" and "center" properties are useful when the map is mounted in a particular position 
+   * and you need this button to reset the view to another position.
+  */
+  zoomToReset?: number;
+  centerToReset?: LatLngExpression;
 } & ControlOptions;
 
 const _getControl = Control.extend({
-  options: { position: "topleft", title: "Reset map view", icon: "\u2610" },
+  options: { position: "topleft", title: "Reset map view", icon: "\u2610", zoomToReset: undefined, centerToReset: undefined },
 
   onAdd: function (map: Map) {
     Util.setOptions(this, {
-      zoom: map.getZoom(),
-      center: map.getCenter(),
+      zoom: this.options.zoomToReset ?? map.getZoom(),
+      center: this.options.centerToReset ?? map.getCenter(),
     });
 
     const { title, icon } = this.options;