Readonly titleReadonlyReadonly urlReadonly
Readonly visibleReadonlyOptional sourceOptional
Optional sublayersOptional
Optional visibleOptionalOptional sublayersOptional
Optional visibleOptionalExample: 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)