When using this component as a map location picker, it can be useful to identify a fixed location as a "pin", and move the map around underneath that pin to choose a location. It's a very common pattern for choosing a location.
This feature adds the following props to the component:
// The absolute location on the view of the static pin
staticPinPosition?: {
left: number;
top: number;
};
// A custom pin element is possible
staticPinIcon?: React.ReactElement;
// Fired when the user stops dragging the map (chooses a position)
onStaticPinPositionChange?: (position: Vec2D) => void;
// Fired repeatedly as the user moves the map
onStaticPinPositionMove?: (position: Vec2D) => void;
// Whether to animate the pin, lifting it up while dragging
animatePin: boolean;
// Disable panning momentum on the map (an improved experience when selecting a location)
disableMomentum: boolean;
Lifting and dropping the pin works best with a "pin" style icon (as in the default) - if you are using a crosshairs-style icon, it doesn't make as much sense.
Also included in this PR are the functions in src/helper/coordinateConversion.ts which we have found to be very helpful.
When using this component as a map location picker, it can be useful to identify a fixed location as a "pin", and move the map around underneath that pin to choose a location. It's a very common pattern for choosing a location.
This feature adds the following props to the component:
Lifting and dropping the pin works best with a "pin" style icon (as in the default) - if you are using a crosshairs-style icon, it doesn't make as much sense.
Also included in this PR are the functions in
src/helper/coordinateConversion.ts
which we have found to be very helpful.https://user-images.githubusercontent.com/42827/184237493-c0e862f0-5904-4290-8144-8b978de45b1b.mp4