Optional Returns Promise<{ Optional
Optional fallbackOptional
Optional renderOptional
Optional expiresOptional
Optional userOptional
Optional
Optional aria-Optional
Optional aria-Optional
Optional classOptionalOptional data-OptionalOptionalOptional data-OptionalOptional precisionOptional
Optional
Optional expandedOptional itemsOptional
Optional sidebarOptional zReadonlyReadonly descriptionReadonlyReadonly idReadonlyReadonly isReadonly
Readonly loadReadonly
Readonly mapReadonlyReadonly olReadonly
Readonly sublayersReadonlyReadonly titleReadonlyReadonly visibleReadonlyReadonly
Readonly descriptionReadonly
Readonly idReadonly
Readonly mapReadonly
Readonly sublayersReadonly
Readonly titleReadonly
Readonly visibleReadonly
Optional
Optional descriptionOptional
Optional idOptional
Optional visibleOptional
Optional Returns Layer<{}>[]
Optional Returns Layer<{}>[]
OptionalOptional descriptionOptionalOptional idOptionalOptional isOptional
Optional visibleOptionalOptional
Optional classOptionalOptional data-OptionalOptional horizontal0
Optional position"top-righ
Optional stopOptional
Optional verticalOptionalDefault0 (If position bottom-*, default verticalGap == 30)
Optional
Optional initialOptional
Optional layersOptional
Optional projectionOptional
Readonly
Optional
Optional aria-Optional
Optional childrenOptional classOptionalOptional data-OptionalOptional roleOptional
Optional viewOptional
Optional view"preserve
Readonly
Readonly idReadonly
Readonly initialReadonly
Readonly layersReadonly
Readonly olReadonly
Optional leftOptional rightOptional topOptionalOptional descriptionOptionalOptional idOptionalOptional isOptionalOptional visibleOptionalReadonlyReadonly descriptionReadonlyReadonly idReadonlyReadonly mapReadonlyReadonly parentReadonly
Readonly parentReadonly sublayersReadonlyReadonly titleReadonlyReadonly visibleReadonlyOptional Returns Sublayer[]
Optional mapOptional mapReadonlyReadonly descriptionReadonlyReadonly idReadonlyReadonly isReadonlyReadonly loadReadonlyReadonly mapReadonlyReadonly olReadonlyReadonly sublayersReadonlyReadonly titleReadonlyReadonly urlReadonly
Readonly visibleReadonlyOptionalOptional descriptionOptionalOptional idOptionalOptional sourceOptional
Optional sublayersOptional
Optional visibleOptionalOptionalOptional descriptionOptionalOptional idOptionalOptional sublayersOptional
Optional visibleOptionalOptionalOptional data-OptionalOptionalOptional data-OptionalOptional centerOptional extentOptional layersOptional noOptional noOptional projectionOptional zoomOptional
Optional classOptionalOptional data-OptionalOptional finishedOptional
Optional
Optional level"info&quo
Optional messageOptional
Optional titleOptional
"top-righ
Optional
Optional attributionsOptional
Optional limitOptional
Optional maxOptional
Optional
Optional data-Optional
Optionalchildren?: ReactNodeOptional
Optional substituteOptional
Optional titleOptional
OptionalOptional data-OptionalA simple example is available in this project's auth-sample.
Apache-2.0 (see LICENSE file)
Example:
<FormControl>
<FormLabel ps={1}>
<Text as="b">{intl.formatMessage({ id: "basemapLabel" })}</Text>
</FormLabel>
<BasemapSwitcher mapId="map_id" allowSelectingEmptyBasemap></BasemapSwitcher>
</FormControl>
Apache-2.0 (see LICENSE file)
To define the number of decimal places shown, set the optional precision property:
<CoordinateViewer mapId="map_id" precision={2} />
Apache-2.0 (see LICENSE file)
Example for an items array:
const items: SidebarItem[] = [
{
id: "sandbox",
icon: <SomeIcon />,
label: "Sandbox",
content: <div>Content goes here...</div>
}
];
Apache-2.0 (see LICENSE file)
Example: Center map to given coordinates using the map model.
import { useMapModel } from "@open-pioneer/map";
import { MAP_ID } from "./MapConfigProviderImpl";
export function AppUI() {
// mapState.map may be undefined initially, if the map is still configuring.
// the object may may also be in an "error" state.
const mapState = useMapModel(MAP_ID);
const centerBerlin = () => {
const olMap = mapState.map?.olMap;
if (olMap) {
olMap?.getView().fit([1489200, 6894026, 1489200, 6894026], { maxZoom: 13 });
}
};
}
Apache-2.0 (see LICENSE file)
You can also use the generic Zoom component:
<Zoom mapId="map_id" zoomDirection="in" />
Apache-2.0 (see LICENSE file)
As an example, the following configuration will render completed features using black color and active ones using red color:
import { Fill, Stroke, Style } from "ol/style";
import { Measurement } from "@open-pioneer/measurement";
const BLACK_STYLE = new Style({
stroke: new Stroke({
color: "black",
width: 5
}),
fill: new Fill({
color: "rgba(0, 0, 0, 0.25)"
})
});
const RED_STYLE = new Style({
stroke: new Stroke({
color: "red",
width: 5
}),
fill: new Fill({
color: "rgba(255, 0, 0, 0.25)"
})
});
function AppUI() {
return (
// ...
<Measurement
mapId={MAP_ID}
activeFeatureStyle={RED_STYLE}
finishedFeatureStyle={BLACK_STYLE}
/>
);
}
Apache-2.0 (see LICENSE file)
All currently displayed notifications can be closed by calling the closeAll method on the NotificationService:
const notificationService = ...; // injected
notificationService.closeAll();
Apache-2.0 (see LICENSE file)
maxConcurrentRequests.
Additional options of the VectorSource (see OpenLayers documentation) can be given by the property
additionalOptions.
Apache-2.0 (see LICENSE file)
A helper hook that automatically computes containerProps: common properties to set on the topmost container element of a public component.
For the time being, these properties are className (combined component class and optional additional class names) and data-testid (for tests).
Example:
-// SPDX-FileCopyrightText: con terra GmbH and contributors
// SPDX-License-Identifier: Apache-2.0
import { CommonComponentProps, useCommonComponentProps } from "@open-pioneer/react-utils";
// ...
// Inherit from CommonComponentProps
export interface InitialExtentProps extends CommonComponentProps {
mapId: string;
}
export const InitialExtent: FC<InitialExtentProps> = forwardRef(function InitialExtent(
props: InitialExtentProps,
ref: ForwardedRef<HTMLDivElement>
) {
const { mapId } = props;
// Use the hook to compute container props (classNames, data-testid, maybe more in the future)
const { containerProps } = useCommonComponentProps("initial-extent", props);
// Pass containerProps directly to the container
return <Box {...containerProps}>{/* ... */}</Box>;
});
+// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)
// SPDX-License-Identifier: Apache-2.0
import { CommonComponentProps, useCommonComponentProps } from "@open-pioneer/react-utils";
// ...
// Inherit from CommonComponentProps
export interface InitialExtentProps extends CommonComponentProps {
mapId: string;
}
export const InitialExtent: FC<InitialExtentProps> = forwardRef(function InitialExtent(
props: InitialExtentProps,
ref: ForwardedRef<HTMLDivElement>
) {
const { mapId } = props;
// Use the hook to compute container props (classNames, data-testid, maybe more in the future)
const { containerProps } = useCommonComponentProps("initial-extent", props);
// Pass containerProps directly to the container
return <Box {...containerProps}>{/* ... */}</Box>;
});
useEvent()
The useEvent can be used to obtain a stable event handler function with changing implementation.
This is useful to avoid re-triggering useEffect-hooks when only the event handler changed.
@@ -39,7 +39,7 @@ Module @open-pioneer/react-utils - v0.0.1
import { useEvent } from "@open-pioneer/react-utils";
function someReactComponent(props) {
// NOTE: logMessage() must not be called during rendering!
const logMessage = useEvent((message: string) => {
console.log(message, props.someProperty);
});
const someService = ...; // injected
// Changes of prop.someProperty will not cause the effect to re-fire, because the function identity
// of `logMessage` remains stable.
useEffect(() => {
const handle = someService.registerHandler(logMessage);
return () => handle.destroy();
}, [someService, logMessage]);
}
For more details, see the API docs of useEvent or https://github.com/reactjs/rfcs/blob/useevent/text/0000-useevent.md.
-License
+License
Apache-2.0 (see LICENSE file)
To integrate the scale viewer in your app, insert the following snippet and reference a map ID:
<ScaleViewer mapId="map_id" />
Apache-2.0 (see LICENSE file)