Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Refactor LayerTree to a function component #3772

Merged
merged 2 commits into from
May 2, 2024
Merged

Refactor LayerTree to a function component #3772

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a7f4a44
refactor: class to function component
dnlkoch Apr 30, 2024
bb9f693
fix: fix minors from code review
dnlkoch Apr 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
230 changes: 143 additions & 87 deletions src/LayerTree/LayerTree.example.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ This example demonstrates the LayerTree.

```jsx
import LayerTree from '@terrestris/react-geo/dist/LayerTree/LayerTree';
import MapComponent from '@terrestris/react-util/dist/Components/MapComponent/MapComponent';
import MapContext from '@terrestris/react-util/dist/Context/MapContext/MapContext';
import OlLayerGroup from 'ol/layer/Group';
import OlLayerTile from 'ol/layer/Tile';
import OlMap from 'ol/Map';
Expand All @@ -11,102 +13,156 @@ import OlSourceTileWMS from 'ol/source/TileWMS';
import OlView from 'ol/View';
import * as React from 'react';

class LayerTreeExample extends React.Component {

constructor(props) {

super(props);

this.mapDivId = `map-${Math.random()}`;

this.layerGroup = new OlLayerGroup({
name: 'Layergroup',
layers: [
new OlLayerTile({
name: 'OSM-Overlay-WMS',
minResolution: 0,
maxResolution: 200,
source: new OlSourceTileWMS({
url: 'https://ows.terrestris.de/osm/service',
params: {
LAYERS: 'OSM-Overlay-WMS'
}
})
}),
new OlLayerTile({
name: 'SRTM30-Contour',
minResolution: 0,
maxResolution: 10,
source: new OlSourceTileWMS({
url: 'https://ows.terrestris.de/osm/service',
params: {
LAYERS: 'SRTM30-Contour'
}
})
const LayerTreeExample = () => {

const layerGroup = new OlLayerGroup({
properties: {
name: 'Layergroup'
},
layers: [
new OlLayerTile({
properties: {
name: 'OSM-Overlay-WMS'
},
minResolution: 0,
maxResolution: 200,
source: new OlSourceTileWMS({
url: 'https://ows.terrestris.de/osm/service',
params: {
LAYERS: 'OSM-Overlay-WMS'
}
})
}),
new OlLayerTile({
properties: {
name: 'SRTM30-Contour'
},
minResolution: 0,
maxResolution: 10,
visible: false,
source: new OlSourceTileWMS({
url: 'https://ows.terrestris.de/osm/service',
params: {
LAYERS: 'SRTM30-Contour'
}
})
}),
new OlLayerTile({
properties: {
name: 'SRTM30-Colored-Hillshade'
},
minResolution: 0,
maxResolution: 10,
visible: false,
source: new OlSourceTileWMS({
url: 'https://ows.terrestris.de/osm/service',
params: {
LAYERS: 'SRTM30-Colored-Hillshade'
}
})
]
});

this.map = new OlMap({
layers: [
new OlLayerTile({
name: 'OSM',
source: new OlSourceOSM()
}),
this.layerGroup
],
view: new OlView({
center: fromLonLat([12.924, 47.551]),
zoom: 13
})
});
}

componentDidMount() {
this.map.setTarget(this.mapDivId);
}

render() {
return (
<div>
<div
id={this.mapDivId}
style={{
height: '400px'
}}
]
});

const anotherLayerGroup = new OlLayerGroup({
properties: {
name: 'Layergroup'
},
layers: [
new OlLayerTile({
properties: {
name: 'OSM-Overlay-WMS A'
},
minResolution: 0,
maxResolution: 200,
source: new OlSourceTileWMS({
url: 'https://ows.terrestris.de/osm/service',
params: {
LAYERS: 'OSM-Overlay-WMS'
}
})
}),
new OlLayerTile({
properties: {
name: 'OSM-Overlay-WMS B'
},
minResolution: 0,
maxResolution: 200,
source: new OlSourceTileWMS({
url: 'https://ows.terrestris.de/osm/service',
params: {
LAYERS: 'OSM-Overlay-WMS'
}
})
}),
layerGroup
]
});

const map = new OlMap({
layers: [
new OlLayerTile({
properties: {
name: 'OSM'
},
source: new OlSourceOSM()
}),
anotherLayerGroup,
new OlLayerGroup({
properties: {
name: 'Empty layergroup'
},
visible: true,
layers: []
})
],
view: new OlView({
center: fromLonLat([12.924, 47.551]),
zoom: 13
})
});

return (
<MapContext.Provider value={map}>
<MapComponent
map={map}
style={{
height: '400px'
}}
/>

<span>{'Please note that the layers have resolution restrictions, please ' +
' zoom in and out to see how the trees react to this.'}</span>
<div className="example-block">
<span>{'Autoconfigured with topmost LayerGroup of passed map:'}</span>

<LayerTree
className="top"
toggleOnClick={true}
/>

<span>{'Please note that the layers have resolution restrictions, please ' +
' zoom in and out to see how the trees react to this.'}</span>
<div className="example-block">
<span>{'Autoconfigured with topmost LayerGroup of passed map:'}</span>

<LayerTree
map={this.map}
/>

</div>
</div>

<div className="example-block">
<span>{'A LayerTree configured with concrete layerGroup:'}</span>
<div className="example-block">
<span>{'A LayerTree configured with concrete layerGroup:'}</span>

<LayerTree
layerGroup={this.layerGroup}
map={this.map}
/>
</div>
<LayerTree
layerGroup={layerGroup}
className="middle"
/>
</div>

<div className="example-block">
<span>{'A LayerTree with a filterFunction (The OSM layer is filtered out):'}</span>
<div className="example-block">
<span>{'A LayerTree with a filterFunction (The OSM layer is filtered out):'}</span>

<LayerTree
map={this.map}
filterFunction={(layer) => layer.get('name') !== 'OSM'}
/>
</div>
<LayerTree
filterFunction={layer => layer.get('name') !== 'OSM'}
className="bottom"
toggleOnClick={true}
/>
</div>
);
}
</MapContext.Provider>
);
}

<LayerTreeExample />
Expand Down
9 changes: 9 additions & 0 deletions src/LayerTree/LayerTree.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
.react-geo-layertree {
.out-of-range {
opacity: 0.5;
}

.ant-tree-node-content-wrapper {
pointer-events: none;
}
}