Skip to content

Commit

Permalink
Use DefaultMapProvider in sample app
Browse files Browse the repository at this point in the history
  • Loading branch information
@mbeckem
mbeckem committed Feb 7, 2025
1 parent e5d325d commit c6432a4
Showing 1 changed file with 86 additions and 83 deletions.
169 changes: 86 additions & 83 deletions src/samples/map-sample/ol-app/MapApp.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)
// SPDX-License-Identifier: Apache-2.0
import { Box, Divider, Flex, FormControl, FormLabel, Text } from "@open-pioneer/chakra-integration";
import { MapAnchor, MapContainer } from "@open-pioneer/map";
import { DefaultMapProvider, MapAnchor, MapContainer } from "@open-pioneer/map";
import { ScaleBar } from "@open-pioneer/scale-bar";
import { InitialExtent, ZoomIn, ZoomOut } from "@open-pioneer/map-navigation";
import { useIntl } from "open-pioneer:react-hooks";
Expand Down Expand Up @@ -54,96 +54,99 @@ export function MapApp() {
</Box>
}
>
<Flex flex="1" direction="column" position="relative">
<MapContainer
mapId={MAP_ID}
role="main"
aria-label={intl.formatMessage({ id: "ariaLabel.map" })}
>
<MapAnchor position="top-left" horizontalGap={5} verticalGap={5}>
{measurementIsActive && (
<DefaultMapProvider mapId={MAP_ID}>
<Flex flex="1" direction="column" position="relative">
<MapContainer
role="main"
aria-label={intl.formatMessage({ id: "ariaLabel.map" })}
>
<MapAnchor position="top-left" horizontalGap={5} verticalGap={5}>
{measurementIsActive && (
<Box
backgroundColor="white"
borderWidth="1px"
borderRadius="lg"
padding={2}
boxShadow="lg"
role="top-left"
aria-label={intl.formatMessage({ id: "ariaLabel.topLeft" })}
>
<Box role="dialog" aria-labelledby={measurementTitleId}>
<TitledSection
title={
<SectionHeading
id={measurementTitleId}
size="md"
mb={2}
>
{intl.formatMessage({
id: "measurementTitle"
})}
</SectionHeading>
}
>
<Measurement />
</TitledSection>
</Box>
</Box>
)}
</MapAnchor>
<MapAnchor position="top-right" horizontalGap={5} verticalGap={5}>
<Box
backgroundColor="white"
borderWidth="1px"
borderRadius="lg"
padding={2}
boxShadow="lg"
role="top-left"
aria-label={intl.formatMessage({ id: "ariaLabel.topLeft" })}
role="top-right"
aria-label={intl.formatMessage({ id: "ariaLabel.topRight" })}
>
<Box role="dialog" aria-labelledby={measurementTitleId}>
<TitledSection
title={
<SectionHeading
id={measurementTitleId}
size="md"
mb={2}
>
{intl.formatMessage({ id: "measurementTitle" })}
</SectionHeading>
}
>
<Measurement mapId={MAP_ID} />
</TitledSection>
</Box>
<OverviewMap olLayer={overviewMapLayer} />
<Divider mt={4} />
<FormControl>
<FormLabel mt={2}>
<Text as="b">
{intl.formatMessage({ id: "basemapLabel" })}
</Text>
</FormLabel>
<BasemapSwitcher allowSelectingEmptyBasemap />
</FormControl>
</Box>
)}
</MapAnchor>
<MapAnchor position="top-right" horizontalGap={5} verticalGap={5}>
<Box
backgroundColor="white"
borderWidth="1px"
borderRadius="lg"
padding={2}
boxShadow="lg"
role="top-right"
aria-label={intl.formatMessage({ id: "ariaLabel.topRight" })}
>
<OverviewMap mapId={MAP_ID} olLayer={overviewMapLayer} />
<Divider mt={4} />
<FormControl>
<FormLabel mt={2}>
<Text as="b">
{intl.formatMessage({ id: "basemapLabel" })}
</Text>
</FormLabel>
<BasemapSwitcher mapId={MAP_ID} allowSelectingEmptyBasemap />
</FormControl>
</Box>
</MapAnchor>
<MapAnchor position="bottom-right" horizontalGap={10} verticalGap={30}>
<Flex
role="bottom-right"
aria-label={intl.formatMessage({ id: "ariaLabel.bottomRight" })}
direction="column"
gap={1}
padding={1}
>
<ToolButton
label={intl.formatMessage({ id: "measurementTitle" })}
icon={<PiRulerLight />}
isActive={measurementIsActive}
onClick={toggleMeasurement}
/>
<Geolocation mapId={MAP_ID} />
<InitialExtent mapId={MAP_ID} />
<ZoomIn mapId={MAP_ID} />
<ZoomOut mapId={MAP_ID} />
</Flex>
</MapAnchor>
</MapContainer>
</Flex>
<Flex
role="region"
aria-label={intl.formatMessage({ id: "ariaLabel.footer" })}
gap={3}
alignItems="center"
justifyContent="center"
>
<CoordinateViewer mapId={MAP_ID} precision={2} />
<ScaleBar mapId={MAP_ID} />
<ScaleViewer mapId={MAP_ID} />
</Flex>
</MapAnchor>
<MapAnchor position="bottom-right" horizontalGap={10} verticalGap={30}>
<Flex
role="bottom-right"
aria-label={intl.formatMessage({ id: "ariaLabel.bottomRight" })}
direction="column"
gap={1}
padding={1}
>
<ToolButton
label={intl.formatMessage({ id: "measurementTitle" })}
icon={<PiRulerLight />}
isActive={measurementIsActive}
onClick={toggleMeasurement}
/>
<Geolocation />
<InitialExtent />
<ZoomIn />
<ZoomOut />
</Flex>
</MapAnchor>
</MapContainer>
</Flex>
<Flex
role="region"
aria-label={intl.formatMessage({ id: "ariaLabel.footer" })}
gap={3}
alignItems="center"
justifyContent="center"
>
<CoordinateViewer precision={2} />
<ScaleBar />
<ScaleViewer />
</Flex>
</DefaultMapProvider>
</TitledSection>
</Flex>
);
Expand Down

0 comments on commit c6432a4

Please sign in to comment.