#10136: Search for Map CRS coordinates

web/client/components/mapcontrols/search/SearchBar.jsx

@@ -20,6 +20,7 @@ import SearchBarToolbar from '../../search/SearchBarToolbar';
 import { defaultSearchWrapper } from '../../search/SearchBarUtils';
 import BookmarkSelect, {BookmarkOptions} from "../searchbookmarkconfig/BookmarkSelect";
 import CoordinatesSearch, {CoordinateOptions} from "../searchcoordinates/CoordinatesSearch";
+import CurrentMapCRSCoordSearch from '../searchcoordinates/CurrentMapCRSCoordSearch';
 import tooltip from '../../misc/enhancers/tooltip';
 
 const TMenuItem = tooltip(MenuItem);
@@ -101,6 +102,7 @@ export default ({
     onZoomToPoint = () => {},
     onClearBookmarkSearch = () => {},
     onPurgeResults,
+    currentMapCRS = 'EPSG:4326',
     items = [],
     ...props
 }) => {
@@ -112,6 +114,13 @@ export default ({
         }
     }, [searchOptions?.services]);
 
+    useEffect(() => {
+        // Switch back to coordinate search when map CRS is EPSG:4326 and active tool is Map CRS coordinate search
+        if (currentMapCRS === 'EPSG:4326' && activeTool === 'mapCRSCoordinatesSearch') {
+            onChangeActiveSearchTool('coordinatesSearch');
+        }
+    }, [currentMapCRS]);
+
     const selectedServices = searchOptions?.services?.filter((_, index) => selectedSearchService >= 0 ? selectedSearchService === index : true) ?? [];
     const search = defaultSearchWrapper({
         searchText,
@@ -160,6 +169,8 @@ export default ({
                 clearSearch={clearSearch}
                 onChangeActiveSearchTool={onChangeActiveSearchTool}
                 onClearBookmarkSearch={onClearBookmarkSearch}
+                currentMapCRS={currentMapCRS}
+                onChangeFormat={onChangeFormat}
             />);
     }
 
@@ -224,7 +235,10 @@ export default ({
                     onCancelSelectedItem={onCancelSelectedItem}
                     onPurgeResults={onPurgeResults}/>
                 {activeTool === "coordinatesSearch" && showCoordinatesSearchOption &&
-                    <CoordinatesSearch format={format} defaultZoomLevel={defaultZoomLevel} onClearCoordinatesSearch={onClearCoordinatesSearch} />
+                    <CoordinatesSearch currentMapCRS={currentMapCRS} format={format} defaultZoomLevel={defaultZoomLevel} onClearCoordinatesSearch={onClearCoordinatesSearch} />
+                }
+                {activeTool === "mapCRSCoordinatesSearch" && showCoordinatesSearchOption && currentMapCRS &&
+                    <CurrentMapCRSCoordSearch currentMapCRS={currentMapCRS} format={format} defaultZoomLevel={defaultZoomLevel} onClearCoordinatesSearch={onClearCoordinatesSearch} />
                 }
                 {
                     activeTool === "bookmarkSearch" && showBookMarkSearchOption &&
@@ -253,7 +267,7 @@ export default ({
                                     clearSearch();
                                 }
                             },
-                            ...(activeTool === "coordinatesSearch" &&
+                            ...(["coordinatesSearch", "mapCRSCoordinatesSearch"].includes(activeTool)  &&
                                 CoordinateOptions.removeIcon(activeTool, coordinate, onClearCoordinatesSearch, onChangeCoord))
                         }, {
                             glyph: searchIcon,
@@ -265,8 +279,8 @@ export default ({
                             visible: activeTool === "addressSearch" &&
                             (!(searchText !== "" || selectedItems && selectedItems.length > 0) || !splitTools),
                             onClick: () => isSearchClickable && search(),
-                            ...(activeTool === "coordinatesSearch" &&
-                                CoordinateOptions.searchIcon(activeTool, coordinate, onZoomToPoint, defaultZoomLevel)),
+                            ...(["coordinatesSearch", "mapCRSCoordinatesSearch"].includes(activeTool) &&
+                                CoordinateOptions.searchIcon(activeTool, coordinate, onZoomToPoint, defaultZoomLevel, currentMapCRS)),
                             ...(activeTool === "bookmarkSearch" &&
                                     BookmarkOptions.searchIcon(activeTool, props))
                         }, {

web/client/components/mapcontrols/search/__tests__/SearchBar-test.jsx

@@ -296,6 +296,17 @@ describe("test the SearchBar", () => {
         expect(cog.length).toBe(1);
     });
 
+    it('test zoomToPoint, with search, with decimal, with reset if mapCRS different than default 4326', () => {
+        const store = {dispatch: () => {}, subscribe: () => {}, getState: () => ({search: {coordinate: {lat: 0.05, lon: 0.05, yCoord: 2, xCoord: 2}}})};
+        ReactDOM.render(<Provider store={store}><SearchBar format="decimal" coordinate={{"lat": 0.05, "lon": 0.05, "yCoord": 2, "xCoord": 2}} activeSearchTool="mapCRSCoordinatesSearch" showOptions searchText={"va"} currentMapCRS={"EPSG:900913"} delay={0} typeAhead={false} /></Provider>, document.getElementById("container"));
+        let reset = document.getElementsByClassName("glyphicon-1-close");
+        let search = document.getElementsByClassName("glyphicon-search");
+        let cog = document.getElementsByClassName("glyphicon-cog");
+        expect(reset.length).toBe(1);
+        expect(search.length).toBe(1);
+        expect(cog.length).toBe(0);
+    });
+
     it('test zoomToPoint, with search, with aeronautical, with reset', () => {
         const store = {dispatch: () => {}, subscribe: () => {}, getState: () => ({search: {coordinate: {lat: 2, lon: 2}}})};
         ReactDOM.render(<Provider store={store}><SearchBar format="aeronautical" activeSearchTool="coordinatesSearch" showOptions searchText={"va"} delay={0} typeAhead={false} /></Provider>, document.getElementById("container"));
@@ -342,6 +353,41 @@ describe("test the SearchBar", () => {
             }
         });
     });
+    it('test calling zoomToPoint with onKeyDown event if mapCRS different than default 4326', (done) => {
+        const store = {
+            dispatch: () => {},
+            subscribe: () => {},
+            getState: () => ({search: {coordinate: {yCoord: 15, xCoord: 15}}})
+        };
+        ReactDOM.render(
+            <Provider store={store}>
+                <SearchBar
+                    format="decimal"
+                    activeSearchTool="mapCRSCoordinatesSearch"
+                    showOptions
+                    onZoomToPoint={(point, zoom, crs) => {
+                        expect(point).toEqual({x: 15, y: 15});
+                        expect(zoom).toEqual(12);
+                        expect(crs).toEqual("EPSG:4326");
+                        done();
+                    }}
+                    coordinate={{yCoord: 15, xCoord: 15}}
+                    currentMapCRS={"EPSG:900913"}
+                    typeAhead={false} />
+            </Provider>
+            , document.getElementById("container")
+        );
+        const container = document.getElementById('container');
+        const elements = container.querySelectorAll('input');
+        TestUtils.Simulate.keyDown(elements[0], {
+            keyCode: 13,
+            preventDefault: () => {
+                expect(true).toBe(true);
+                done();
+            }
+        });
+    });
+
     it('Test SearchBar with not allowed e char for keyDown event', (done) => {
         const store = {
             dispatch: () => {},
@@ -374,6 +420,40 @@ describe("test the SearchBar", () => {
             }
         });
     });
+    it('Test SearchBar with not allowed e char for keyDown event if mapCRS different than default 4326', (done) => {
+        const store = {
+            dispatch: () => {},
+            subscribe: () => {},
+            getState: () => ({search: {coordinate: {yCoord: 150, xCoord: 150}}})
+        };
+        ReactDOM.render(
+            <Provider store={store}>
+                <SearchBar
+                    format="decimal"
+                    activeSearchTool="mapCRSCoordinatesSearch"
+                    showOptions
+                    onZoomToPoint={() => {
+                        expect(true).toBe(false);
+                    }}
+                    coordinate={{yCoord: 150, xCoord: 150}}
+                    currentMapCRS={"EPSG:900913"}
+                    typeAhead={false} />
+            </Provider>, document.getElementById("container")
+        );
+        const container = document.getElementById('container');
+        const elements = container.querySelectorAll('input');
+        expect(elements.length).toBe(2);
+        expect(elements[0].value).toBe('150');
+
+        TestUtils.Simulate.keyDown(elements[0], {
+            keyCode: 69, // char e
+            preventDefault: () => {
+                expect(true).toBe(true);
+                done();
+            }
+        });
+    });
+
     it('Test SearchBar with valid onKeyDown event by pressing number 8', () => {
         const store = {
             dispatch: () => {},
@@ -405,6 +485,38 @@ describe("test the SearchBar", () => {
             }
         });
     });
+    it('Test SearchBar with valid onKeyDown event by pressing number 8 if mapCRS different than default 4326', () => {
+        const store = {
+            dispatch: () => {},
+            subscribe: () => {},
+            getState: () => ({search: {coordinate: {yCoord: 1, xCoord: 1}}})
+        };
+        ReactDOM.render(
+            <Provider store={store}>
+                <SearchBar
+                    format="decimal"
+                    activeSearchTool="mapCRSCoordinatesSearch"
+                    showOptions
+                    onZoomToPoint={() => {
+                        expect(true).toBe(false);
+                    }}
+                    coordinate={{yCoord: 1, xCoord: 1}}
+                    currentMapCRS={"EPSG:900913"}
+                    typeAhead={false} />
+            </Provider>, document.getElementById("container")
+        );
+        const container = document.getElementById('container');
+        const elements = container.querySelectorAll('input');
+        expect(elements.length).toBe(2);
+        expect(elements[0].value).toBe('1');
+
+        TestUtils.Simulate.keyDown(elements[0], {
+            keyCode: 56,
+            preventDefault: () => {
+                expect(true).toBe(false);
+            }
+        });
+    });
 
     it('test showOptions false, only address tool visible', () => {
         ReactDOM.render(<SearchBar splitTools showOptions={false} searchText={""} delay={0} typeAhead={false} />, document.getElementById("container"));

web/client/components/mapcontrols/searchcoordinates/CoordinatesSearch.js

@@ -26,10 +26,14 @@ import { zoomAndAddPoint, changeCoord } from '../../../actions/search';
 export const CoordinateOptions = ({
     clearCoordinates: (onClearCoordinatesSearch, onChangeCoord) =>{
         onClearCoordinatesSearch({owner: "search"});
-        onChangeCoord("lat", "");
-        onChangeCoord("lon", "");
+        const clearedFields = ["lat", "lon", "xCoord", "yCoord"];
+        const resetVal = '';
+        clearedFields.forEach(field => onChangeCoord(field, resetVal));
+    },
+    areValidCoordinates: (coordinate) => {
+        if (!coordinate) return false;
+        return isNumber(coordinate?.lon) && isNumber(coordinate?.lat);
     },
-    areValidCoordinates: (coordinate) => isNumber(coordinate?.lon) && isNumber(coordinate?.lat),
     zoomToPoint: (onZoomToPoint, coordinate, defaultZoomLevel = 12) => {
         onZoomToPoint({
             x: parseFloat(coordinate.lon),
@@ -63,19 +67,31 @@ export const CoordinateOptions = ({
         coordinate,
         onClearCoordinatesSearch,
         onChangeCoord) =>({
-        visible: activeTool === "coordinatesSearch" && (isNumber(coordinate.lon) || isNumber(coordinate.lat)),
+        visible: (['coordinatesSearch', 'mapCRSCoordinatesSearch'].includes(activeTool)) && (isNumber(coordinate.lon) || isNumber(coordinate.lat) || isNumber(coordinate.xCoord) || isNumber(coordinate.yCoord)),
         onClick: () => CoordinateOptions.clearCoordinates(onClearCoordinatesSearch, onChangeCoord)
     }),
     searchIcon: (activeTool, coordinate, onZoomToPoint, defaultZoomLevel) => ({
-        visible: activeTool === "coordinatesSearch",
+        visible: ["coordinatesSearch", "mapCRSCoordinatesSearch"].includes(activeTool),
         onClick: () => {
-            if (activeTool === "coordinatesSearch" && CoordinateOptions.areValidCoordinates(coordinate)) {
+            if ((['coordinatesSearch', 'mapCRSCoordinatesSearch'].includes(activeTool)) && CoordinateOptions.areValidCoordinates(coordinate)) {
                 CoordinateOptions.zoomToPoint(onZoomToPoint, coordinate, defaultZoomLevel);
             }
         }
     }),
-    coordinatesMenuItem: ({activeTool, searchText, clearSearch, onChangeActiveSearchTool, onClearBookmarkSearch}) =>(
-        <MenuItem active={activeTool === "coordinatesSearch"} onClick={() => {
+    coordinatesMenuItem: ({activeTool, searchText, clearSearch, onChangeActiveSearchTool, onClearBookmarkSearch, currentMapCRS, onChangeFormat}) =>{
+        if (currentMapCRS === 'EPSG:4326') {
+            return (<MenuItem active={activeTool === "coordinatesSearch"} onClick={() => {
+                if (searchText !== undefined && searchText !== "") {
+                    clearSearch();
+                }
+                onClearBookmarkSearch("selected");
+                onChangeActiveSearchTool("coordinatesSearch");
+                document.dispatchEvent(new MouseEvent('click'));
+            }}>
+                <Glyphicon glyph={"search-coords"}/> <Message msgId="search.coordinatesSearch"/>
+            </MenuItem>);
+        }
+        return (<><MenuItem active={activeTool === "coordinatesSearch"} onClick={() => {
             if (searchText !== undefined && searchText !== "") {
                 clearSearch();
             }
@@ -85,7 +101,21 @@ export const CoordinateOptions = ({
         }}>
             <Glyphicon glyph={"search-coords"}/> <Message msgId="search.coordinatesSearch"/>
         </MenuItem>
-    )
+        <MenuItem active={activeTool === "mapCRSCoordinatesSearch"} onClick={() => {
+            if (searchText !== undefined && searchText !== "") {
+                clearSearch();
+            }
+            onClearBookmarkSearch("selected");
+            onChangeActiveSearchTool("mapCRSCoordinatesSearch");
+            onChangeFormat("decimal");
+            document.dispatchEvent(new MouseEvent('click'));
+        }}>
+            <span style={{marginLeft: 20}}>
+                <Glyphicon glyph={"search-coords"}/> <Message msgId="search.currentMapCRS"/>
+            </span>
+        </MenuItem>
+        </>);
+    }
 });
 
 
@@ -147,6 +177,7 @@ const CoordinatesSearch = ({
                     <InputGroup >
                         <InputGroup.Addon style={{minWidth: 45}}><Message msgId="search.latitude"/></InputGroup.Addon>
                         <CoordinateEntry
+                            owner="search"
                             format={format}
                             aeronauticalOptions={aeronauticalOptions}
                             coordinate="lat"
@@ -168,6 +199,7 @@ const CoordinatesSearch = ({
                     <InputGroup>
                         <InputGroup.Addon style={{minWidth: 45}}><Message msgId="search.longitude"/></InputGroup.Addon>
                         <CoordinateEntry
+                            owner="search"
                             format={format}
                             aeronauticalOptions={aeronauticalOptions}
                             coordinate="lon"