53 lines
1.4 KiB
JavaScript
53 lines
1.4 KiB
JavaScript
import React from "react";
|
|
import Maplibre from "@maplibre/maplibre-react-native";
|
|
import { useTheme } from "~/theme";
|
|
|
|
export default function LayerUserStatic() {
|
|
const { colors, custom } = useTheme();
|
|
const layerStyles = {
|
|
pluse: {
|
|
circleRadius: 15,
|
|
circleColor: mapboxBlue,
|
|
circleOpacity: 0.2,
|
|
circlePitchAlignment: "map",
|
|
},
|
|
background: {
|
|
circleRadius: 9,
|
|
circleColor: colors.surface,
|
|
circlePitchAlignment: "map",
|
|
},
|
|
foreground: {
|
|
circleRadius: 6,
|
|
circleColor: mapboxBlue,
|
|
circlePitchAlignment: "map",
|
|
},
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Maplibre.CircleLayer
|
|
filter={["==", "isUserLocation", true]}
|
|
key="mapboxUserLocationPluseCircle"
|
|
id="mapboxUserLocationPluseCircle"
|
|
style={layerStyles.pluse}
|
|
aboveLayerID="points-red"
|
|
/>
|
|
<Maplibre.CircleLayer
|
|
filter={["==", "isUserLocation", true]}
|
|
key="mapboxUserLocationWhiteCircle"
|
|
id="mapboxUserLocationWhiteCircle"
|
|
style={layerStyles.background}
|
|
aboveLayerID="points-red"
|
|
/>
|
|
<Maplibre.CircleLayer
|
|
filter={["==", "isUserLocation", true]}
|
|
key="mapboxUserLocationBlueCicle"
|
|
id="mapboxUserLocationBlueCicle"
|
|
aboveLayerID="mapboxUserLocationWhiteCircle"
|
|
style={layerStyles.foreground}
|
|
/>
|
|
</>
|
|
);
|
|
}
|
|
|
|
const mapboxBlue = "rgba(51, 181, 229, 100)";
|