This package provides a UI component which allow users to search for coordinates in the map and provides component that is an input field for coordinates.
To integrate the coordinate search in your app, insert the following snippet:
<CoordinateSearch
map={map}
/> /* instead of passing the map, the `DefaultMapProvider` can alternatively be used */
To define the selectable projections, set the optional projections property:
<CoordinateSearch
map={map}
projections={[
{
label: "EPSG:25832",
value: "EPSG:25832",
precision: 2
},
{
label: "WGS 84",
value: "EPSG:4326"
},
{
label: "Web Mercator",
value: "EPSG:3857"
}
]}
/>
The optional property precision allows to specify the number of display digits (default: 3).
If no projections are specified, Web Mercator (EPSG:3857) and WGS 84 (EPSG:4326) are the default options.
To listen to the events onSelect and onClear, provide optional callback functions to the component.
In case of the onSelect event, you can access the entered coordinate from the parameter CoordinatesEvent. The onSelect event gets called if a valid input is entered or if the selected projection is changed after entering an input.
With the onClear option, you can set a callback function that gets called if the clear button is clicked.
<CoordinateSearch
map={map}
onSelect={(event: CoordinatesEvent) => {
// do something
}}
onClear={() => {
// do something
}}
/>
To integrate the coordinate input component in your app, insert the following snippet:
<CoordinateInput map={map} />
To define the selectable projections, set the optional projections property:
<CoordinateInput
map={map}
projections={[
{
label: "EPSG:25832",
value: "EPSG:25832",
precision: 2
},
{
label: "WGS 84",
value: "EPSG:4326"
},
{
label: "Web Mercator",
value: "EPSG:3857"
}
]}
/>
The optional property precision allows to specify the number of display digits (default: 3).
If no projections are specified, Web Mercator (EPSG:3857) and WGS 84 (EPSG:4326) are the default options.
To set the value of the input field from outside the component, set the optional input property of type Coordinate.
The coordinates have to be in the projection of the map.
If the value changes, the onSelect function is triggered (see below).
<CoordinateInput map={map} input={[761166, 6692084]} />
To set the placeholder of the input field from outside the component, use the optional placeholder property of type Coordinate or string.
Common usage for a string input is a supportive text like "Enter coordinates here".
A Coordinate input can be used for example for showing the coordinates of a selected geometry or the current mouse position.
The Coordinates have to be in the projection of the map.
<CoordinateInput map={map} placeholder={[700000, 6000000]} />
<CoordinateInput map={map} placeholder={"Enter coordinates here"} />
To listen to the events onSelect and onClear, provide optional callback functions to the component.
In case of the onSelect event, you can access the entered coordinate from the parameter CoordinatesEvent. The onSelect event gets called if you enter the input, if value of the input property changes or if the selected projection is changed after entering an input.
With the onClear option, you can set a callback function that gets called if the clear button is clicked.
<CoordinateInput
onSelect={(event: CoordinatesEvent) => {
// do something
}}
onClear={() => {
// do something
}}
/>
Apache-2.0 (see LICENSE file)