Closed fapola closed 2 months ago
The implementation looks solid.
I’m considering adding an option to either request all features upfront or dynamically request features based on the current bounding box (bbox) whenever the view changes. @MartinAlzueta and I previously developed something similar for a WFS integration.
useEffect(() => {
if (!mapHook.map) return;
const getDataHandler = () => {
const southWest = mapHook.map.getBounds().getSouthWest();
const northEast = mapHook.map.getBounds().getNorthEast();
fetch(props.url + 'service=WFS&version=2.0.0&request=GetFeature&typeNames=' + props.typeNames + '&outputFormat=application/json'
+ '&bbox='
+ southWest.lat + ','
+ southWest.lng + ','
+ northEast.lat + ','
+ northEast.lng).then(res => {
return res.json()
}).then(data => {
setGeojson(data);
})
};
mapHook.map.on('moveend', getDataHandler)
return () => {
mapHook.map.off('moveend', getDataHandler)
}
}, [mapHook.map])
Additionally, we should introduce a configurable GeoJsonLayer properties option. This would also allow us to limit fetch requests to only trigger when the view is within a specified zoom range (minZoom and maxZoom).
I’m considering adding an option to either request all features upfront or dynamically request features based on the current bounding box (bbox)
I added a reloadFeaturesOnMapMove
prop and set it to true in the point example story. When set to true, the features are dynamically requested on map move based on the bounding box. When it is not set or is false, all features are requested.
we should introduce a configurable GeoJsonLayer properties option
any MlGeoJsonLayerProps (with the exception of geojson
, we need to set this based on the returning json of the ogc api request) can now be set as props for MlOgcApiFeatures
. We already use this in the OgcApiLoader
story:
<MlOgcApiFeatures
ogcApiUrl={new URL(ogcApiUrl)}
mapId={props.mapId}
mlGeoJsonLayerProps={{
defaultPaintOverrides: {
fill: { 'fill-color': color, 'fill-opacity': opacity },
circle: { 'circle-color': color, 'circle-opacity': opacity },
line: { 'line-color': color, 'line-opacity': opacity, 'line-width': lineWidth },
},
type: geomType,
}}
></MlOgcApiFeatures>
Adds new component with two stories to add a OGC Api Feature as Geojson to the maplibre map.
In the
OGC API Feature Loader
story a URL can be passed to a input field to get features from a OGC API Feature Endpoint similar to theMlWmsLoader
story. The Feature can also be styled inside the story component.