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