Feature: Provide a new GeoJsonLayer component that allows the defininition of multiple layers for the geojson source created by the component
cioddi opened this issue · 1 comments
The current MlGeoJsonLayer will create exactly on geojson source and one layer using that source.
Sometimes you need to define multiple layers of different type using the same source (as shown in this example https://codesandbox.io/s/mapcomponents-example-setdata-g3tgi)
@mapcomponents/react-maplibre version: 0.1.24
Feature description
Create a new component that offers all functionality (omitting the transition function) the current MlGeoJsonLayer offers including the ability to define more than one layer.
The new component should accept/expect a "layers" attribute containing layer options instead of the "paint" and "layout" attribute. The top level "layerId" attribute should be renamed to "sourceId".
Example
See an example use of the proposed component below (related to the codepen referenced above).
<MlGeoJsonLayerNew
mapId="map_1"
geojson={geojson}
sourceId="parcels"
layers={[
{
id: "parcels_fill",
type:'fill',
paint: {
"fill-color": "#627BC1",
"fill-opacity": [
"case",
["boolean", ["feature-state", "hover"], false],
0,
0.5,
],
},
},
{
id: "parcels_line",
type:'line',
paint: {
"line-color": "#627BC1",
"line-width": 2,
"line-opacity": [
"case",
["boolean", ["feature-state", "hover"], false],
0,
1,
],
},
},
]}
insertBeforeLayer={mapHook.map?.firstSymbolLayer}
/>
It took some time but we now have a useSource hook that allows to create source that can be used by more than one useLayer hook. The useLayer hook also accepts a source referenced by it's Id.
On removal it will remove all layers that where using it from the maplibre-gl instance. useLayer hooks are also monitoring source changes in the maplibre instance and will add layers they describe once the required source becomes available.