Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
eb66c26
Define better lng/lat/zoom tests
dtrucs Oct 29, 2024
cf0a459
Define the new optional properties "centerToReset" and "centerToZoom"
dtrucs Oct 29, 2024
8cfb1bc
Use new LatLng leaflet function to define map center on unit test
dtrucs Nov 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 character. |
| 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 |
57 changes: 46 additions & 11 deletions __tests__/ResetViewControl.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,41 +8,76 @@ import { MapContainer, useMapEvents } from "react-leaflet";
import ResetViewControl from "../src/ResetViewControl";

import type { ResetViewControlOptions } from "../src/ResetViewControl";
import { LatLng } from "leaflet";
import type { Map } from "leaflet";

describe("ResetViewControl", () => {
const mockHandleViewReset = jest.fn();
let mapInstance = null as Map | null
const defaultMapCenter = new LatLng(-96.8716348, 32.8205866);
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={5} center={[-96.8716348, 32.8205866]}>
<ControlWrapper title={title} icon={icon} />
<MapContainer zoom={defaultMapZoom} center={defaultMapCenter} ref={map => mapInstance = map}>
<ControlWrapper title={title} icon={icon} centerToReset={centerToReset} zoomToReset={zoomToReset} />
</MapContainer>
);
};

test("can reset map view", () => {
render(<Map />);
expect(mapInstance?.getCenter().lat).toBeCloseTo(defaultMapCenter.lat, 1);
expect(mapInstance?.getCenter().lng).toBeCloseTo(defaultMapCenter.lng, 1);
expect(mapInstance?.getZoom()).toEqual(defaultMapZoom)

mapInstance?.setView(new LatLng(2, 46), 6)

expect(mapInstance?.getCenter().lat).toBeCloseTo(2, 1);
expect(mapInstance?.getCenter().lng).toBeCloseTo(46, 1);
expect(mapInstance?.getZoom()).toEqual(6)

userEvent.click(screen.getByTitle(/zoom out/i));
userEvent.click(screen.getByTitle("Reset view"));

expect(mapInstance?.getCenter().lat).toBeCloseTo(defaultMapCenter.lat, 1);
expect(mapInstance?.getCenter().lng).toBeCloseTo(defaultMapCenter.lng, 1);
expect(mapInstance?.getZoom()).toEqual(defaultMapZoom)

expect(mockHandleViewReset).toHaveBeenCalledTimes(2);
});

test("can reset the map view to a zoom and center different from those mounted by the map", () => {
const centerToReset = new LatLng(44.8, 6.3);
const zoomToReset = 17;
render(<Map centerToReset={centerToReset} zoomToReset={zoomToReset} />);

expect(mapInstance?.getCenter().lat).toBeCloseTo(defaultMapCenter.lat, 1);
expect(mapInstance?.getCenter().lng).toBeCloseTo(defaultMapCenter.lng, 1);
expect(mapInstance?.getZoom()).toEqual(defaultMapZoom)

userEvent.click(screen.getByTitle("Reset view"));

expect(mapInstance?.getCenter().lat).toBeCloseTo(centerToReset.lat, 1);
expect(mapInstance?.getCenter().lng).toBeCloseTo(centerToReset.lng, 1);
expect(mapInstance?.getZoom()).toEqual(zoomToReset)

expect(mockHandleViewReset).toHaveBeenCalledTimes(3);
});

test("can see icon", () => {
render(<Map />);

Expand Down
15 changes: 11 additions & 4 deletions src/ResetViewControl.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = {
/**
Expand All @@ -14,15 +14,22 @@ export type ResetViewControlOptions = {
* It renders a box by default.
*/
icon?: string;

/**
* "zoomToReset" and "centerToReset" 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;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you document these with a comment per property, like title and icon?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What do you think of naming these defaultZoom and defaultCenter?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

At the start of this contribution, I also thought of these names.
But once I saw the whole thing, I wonder if it wouldn't be ambiguous with the mapContainer's center/zoom definition.

<MapContainer zoom={defaultMapZoom} center={defaultMapCenter}>
  <ResetViewControl
    defaultZoom={defaultZoom}
    defaultCenter={defaultCenter}
  />
</MapContainer>

Maybe the couple targetZoom / targetCenter?
But if you think defaultZoom / defaultCenter is better, i'm totally okay to change it!

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Any though about this @valentinogagliardi?

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: null, centerToReset: null },

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;
Expand Down