This package provides a geolocation component based on OpenLayers to locate a user's position.
To add the component to your app, insert the following snippet (with a reference to a map):
<Geolocation
map={map}
/> /* instead of passing the map, the `DefaultMapProvider` can alternatively be used */
If the localization was successful, the map is centered on the user's position and zoomed to the accuracy of the localization. If the position is updated, the map is centered again.
Once a user zooms or moves the map, the map is no longer centered on new positions.
To adjust the maximum zoom level, add the optional property maxZoom.
<Geolocation map={map} maxZoom={20} />
To configure the style of the user's position and accuracy, add the optional properties positionFeatureStyle or accuracyFeatureStyle:
<Geolocation map={map} positionFeatureStyle={...} accuracyFeatureStyle={...} />
Both properties support arbitrary OpenLayers StyleLike values: you can configure either a single Style instance, an array of them or a function computing such values.
import { Circle as CircleStyle, Fill, Stroke, Style } from "ol/style";
import { Geolocation } from "@open-pioneer/geolocation";
const POSITION_STYLE = new Style({
image: new CircleStyle({
radius: 6,
fill: new Fill({
color: "#91CC33"
}),
stroke: new Stroke({
color: "#FFF",
width: 3
})
})
});
const ACCURACY_STYLE = new Style({
stroke: new Stroke({
color: "#91CC33",
width: 3
}),
fill: new Fill({
color: "rgba(0, 0, 255, 0.05)"
})
});
function AppUI() {
return (
// ...
<Geolocation
mad={map}
positionFeatureStyle={POSITION_STYLE}
accuracyFeatureStyle={ACCURACY_STYLE}
/>
);
}
To use custom position options from the Geolocation API, add the optional property trackingOptions.
<Geolocation
map={map}
trackingOptions={{
enableHighAccuracy: true,
timeout: 60000,
maximumAge: 600000
}}
/>
To show user notifications, add the @open-pioneer/notifier to your app.
Apache-2.0 (see LICENSE file)