{
setState({
- ...state,
map: !state.map,
});
}}
@@ -227,15 +109,45 @@ const MapSettings = props => {
@@ -246,7 +158,6 @@ const MapSettings = props => {
icon="search"
onChange={e => {
setState({
- ...state,
searchWmts: e.target.value.toLowerCase(),
});
}}
@@ -260,7 +171,6 @@ const MapSettings = props => {
icon="search"
onChange={e => {
setState({
- ...state,
searchWms: e.target.value.toLowerCase(),
});
}}
@@ -275,8 +185,117 @@ const MapSettings = props => {
border: state.wms === null && state.wmts === null ? null : "thin solid #cecece",
marginTop: state.wms === null && state.wmts === null ? null : "1em",
}}>
- {state.wms && getLayerList(state.wms.Capability.Layer.Layer, state.searchWms, "WMS")}
- {state.wmts && getLayerList(state.wmts.Contents.Layer, state.searchWmts, "WMTS")}
+ {state.wms === null
+ ? null
+ : state.wms.Capability.Layer.Layer.map((layer, idx) =>
+ state.searchWms === "" ||
+ (Object.prototype.hasOwnProperty.call(layer, "Title") &&
+ layer.Title.toLowerCase().search(state.searchWms) >= 0) ||
+ (Object.prototype.hasOwnProperty.call(layer, "Abstract") &&
+ layer.Abstract.toLowerCase().search(state.searchWms) >= 0) ||
+ (Object.prototype.hasOwnProperty.call(layer, "Name") &&
+ layer.Name.toLowerCase().search(state.searchWms) >= 0) ? (
+
+
+
+
+
+
{getIconButton(layer, "WMS")}
+
+
+ {layer.queryable === true ? (
+
+ }
+ />
+ ) : null}
+
+
+
+
+
+
+ ) : null,
+ )}
+ {state.wmts === null
+ ? null
+ : state.wmts.Contents.Layer.map((layer, idx) => {
+ return state.searchWmts === "" ||
+ (Object.prototype.hasOwnProperty.call(layer, "Title") &&
+ layer.Title.toLowerCase().search(state.searchWmts) >= 0) ||
+ (Object.prototype.hasOwnProperty.call(layer, "Abstract") &&
+ layer.Abstract.toLowerCase().search(state.searchWmts) >= 0) ||
+ (Object.prototype.hasOwnProperty.call(layer, "Identifier") &&
+ layer.Identifier.toLowerCase().search(state.searchWmts) >= 0) ? (
+
+
+
+
+
+
{getIconButton(layer, "WMTS")}
+
+
+
+
+
+
+
+
+ ) : null;
+ })}
{
icon="search"
onChange={e => {
setState({
- ...state,
searchWmtsUser: e.target.value.toLowerCase(),
});
}}
@@ -317,21 +335,35 @@ const MapSettings = props => {
flex: "1 1 100%",
border: "thin solid #cecece",
}}>
- {mapSettings &&
- Object.entries(mapSettings).map(([key, layer], index) => {
- return filterBySearchTerm(layer, state.searchWmtsUser) ? (
+ {_.values(setting.data.map.explorer)
+ .sort((a, b) => {
+ if (a.position < b.position) {
+ return 1;
+ } else if (a.position > b.position) {
+ return -1;
+ }
+ return 0;
+ })
+ .map((layer, idx) =>
+ state.searchWmtsUser === "" ||
+ (Object.prototype.hasOwnProperty.call(layer, "Title") &&
+ layer.Title.toLowerCase().search(state.searchWmtsUser) >= 0) ||
+ (Object.prototype.hasOwnProperty.call(layer, "Abstract") &&
+ layer.Abstract.toLowerCase().search(state.searchWmtsUser) >= 0) ||
+ (Object.prototype.hasOwnProperty.call(layer, "Identifier") &&
+ layer.Identifier.toLowerCase().search(state.searchWmtsUser) >= 0) ? (
-
{
{
e.stopPropagation();
- if (_.has(mapSettings, key)) {
- layer.Identifier = key;
+ if (_.has(setting.data.map.explorer, layer.Identifier)) {
rmExplorerMap(layer);
}
}}
@@ -353,7 +383,7 @@ const MapSettings = props => {
-
+
{
+
{
+ this.setState(
+ {
+ wmsFetch: false,
+ wms: null,
+ wmts: null,
+ },
+ () => {
+ this.props.handleAddItem(value);
+ },
+ );
+ }}
+ handleOnChange={value => {
+ this.setState(
+ {
+ wmsFetch: false,
+ wms: null,
+ wmts: null,
+ },
+ () => {
+ this.props.handleOnChange(value);
+ },
+ );
+ }}
+ state={this.state}
+ setState={this.setStateBound}>
+
+ {this.state?.searchList?.map((filter, idx) => (
+
+
{
+ this.setState(prevState => ({
+ ...prevState,
+ // update an array of objects:
+ searchList: prevState.searchList.map(obj =>
+ obj.id === idx ? { ...obj, isSelected: !obj.isSelected } : { ...obj },
+ ),
+ }));
+ }}
+ style={{
+ flexDirection: "row",
+ display: "flex",
+ cursor: "pointer",
+ backgroundColor: filter.isSelected
+ ? theme.palette.background.lightgrey
+ : theme.palette.background.default,
+ padding: 10,
+ }}>
+
+
+
+
+
+
+
+ {filter.isSelected === true && this.handleButtonSelected(filter.name, filter.isSelected) !== null ? (
+
+ ) : (
+
+ )}
+
+ ))}
+
-
{
- setState({ ...state, wmsFetch: false, wms: null, wmts: null });
- handleAddItem(value);
- }}
- handleOnChange={(value: string) => {
- setState({ ...state, wmsFetch: false, wms: null, wmts: null });
- handleOnChange(value);
- }}
- state={state}
- setState={setState}>
-
- {searchList?.map((filter, idx) => (
-
-
{
- setSearchList(
- searchList.map(obj => (obj.id === idx ? { ...obj, isSelected: !obj.isSelected } : { ...obj })),
- );
- }}
- style={{
- flexDirection: "row",
- display: "flex",
- cursor: "pointer",
- backgroundColor: filter.isSelected
- ? theme.palette.background.lightgrey
- : theme.palette.background.default,
- padding: 10,
- }}>
-
-
-
-
-
-
-
- {filter.isSelected && handleButtonSelected(filter.name, filter.isSelected) !== null ? (
-
- ) : (
-
- )}
-
- ))}
-