Feature/8032 ogc api features

[fapola]

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 the MlWmsLoader story. The Feature can also be styled inside the story component.

[cioddi]

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).

[fapola]

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>