Merge pull request #7 from mappable-world/search-control

add search control
mappable-world · May 31, 2024 · a3a7e9a · a3a7e9a
2 parents 64b3aa1 + f1f4e85
commit a3a7e9a
Show file tree

Hide file tree

Showing 16 changed files with 1,097 additions and 7,132 deletions.
diff --git a/example/search-control/common.css b/example/search-control/common.css
diff --git a/example/search-control/common.ts b/example/search-control/common.ts
@@ -0,0 +1,57 @@
+import type {MMapLocationRequest, LngLatBounds, SearchResponse, Margin, Feature} from '@mappable-world/mappable-types';
+
+mappable.ready.then(() => {
+    mappable.getDefaultConfig().setApikeys({
+        search: '%APIKEY%'
+    });
+});
+
+const BOUNDS: LngLatBounds = [
+    [54.58311, 25.9985],
+    [56.30248, 24.47889]
+];
+export const LOCATION: MMapLocationRequest = {bounds: BOUNDS};
+export const MARGIN: Margin = [30, 30, 30, 30];
+
+export const initialMarkerProps = {
+    properties: {
+        name: 'Dubai',
+        description: 'United Arab Emirates'
+    },
+    geometry: {
+        type: 'Point',
+        coordinates: [55.289311, 25.229762]
+    }
+} as Feature;
+
+export const findSearchResultBoundsRange = (searchResult: SearchResponse) => {
+    let minLng: number | null = null;
+    let maxLng: number | null = null;
+    let minLat: number | null = null;
+    let maxLat: number | null = null;
+
+    searchResult.forEach((searchResultElement) => {
+        const [lng, lat] = searchResultElement.geometry.coordinates;
+
+        if (lng < minLng || minLng === null) {
+            minLng = lng;
+        }
+
+        if (lng > maxLng || maxLng === null) {
+            maxLng = lng;
+        }
+
+        if (lat < minLat || minLat === null) {
+            minLat = lat;
+        }
+
+        if (lat > maxLat || maxLat === null) {
+            maxLat = lat;
+        }
+    });
+
+    return [
+        [minLng, maxLat],
+        [maxLng, minLat]
+    ] as LngLatBounds;
+};
diff --git a/example/search-control/react/index.html b/example/search-control/react/index.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<html>
+    <head>
+        <title>React example mappable-default-ui-theme</title>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
+        <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
+        <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
+        <script crossorigin src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
+        <script src="https://js.api.mappable.world/3.0/?apikey=%APIKEY%&lang=en_US"></script>
+
+        <script
+            data-plugins="transform-modules-umd"
+            data-presets="react, typescript"
+            type="text/babel"
+            src="../../index.ts"
+        ></script>
+        <script
+            data-plugins="transform-modules-umd"
+            data-presets="react, typescript"
+            type="text/babel"
+            src="../common.ts"
+        ></script>
+        <script
+            data-plugins="transform-modules-umd"
+            data-presets="react, typescript"
+            type="text/babel"
+            src="./index.tsx"
+        ></script>
+
+        <link rel="stylesheet" href="../../index.css" />
+        <link rel="stylesheet" href="../common.css" />
+    </head>
+    <body>
+        <div id="app"></div>
+    </body>
+</html>
diff --git a/example/search-control/react/index.tsx b/example/search-control/react/index.tsx
@@ -0,0 +1,85 @@
+import type {SearchResponse, Feature} from '@mappable-world/mappable-types';
+import {LOCATION, MARGIN, initialMarkerProps, findSearchResultBoundsRange} from '../common';
+
+window.map = null;
+
+main();
+async function main() {
+    const [mappableReact] = await Promise.all([mappable.import('@mappable-world/mappable-reactify'), mappable.ready]);
+    const reactify = mappableReact.reactify.bindTo(React, ReactDOM);
+
+    const {useState, useCallback} = React;
+
+    const {MMap, MMapDefaultSchemeLayer, MMapDefaultFeaturesLayer, MMapControls} = reactify.module(mappable);
+
+    const {MMapDefaultMarker} = reactify.module(await mappable.import('@mappable-world/mappable-default-ui-theme'));
+    const {MMapSearchControl} = reactify.module(await mappable.import('@mappable-world/mappable-default-ui-theme'));
+
+    ReactDOM.render(
+        <React.StrictMode>
+            <App />
+        </React.StrictMode>,
+        document.getElementById('app')
+    );
+
+    function App() {
+        const [location, setLocation] = useState(LOCATION);
+        const [searchMarkersProps, setSearchMarkersProps] = useState([initialMarkerProps]);
+
+        const updateMapLocation = useCallback((searchResult: SearchResponse) => {
+            if (searchResult.length !== 0) {
+                let center;
+                let zoom;
+                let bounds;
+
+                if (searchResult.length === 1) {
+                    center = searchResult[0].geometry?.coordinates;
+                    zoom = 12;
+                } else {
+                    bounds = findSearchResultBoundsRange(searchResult);
+                }
+
+                setLocation({
+                    center,
+                    zoom,
+                    bounds,
+                    duration: 400
+                });
+            }
+        }, []);
+
+        const searchResultHandler = useCallback((searchResult: SearchResponse) => {
+            setSearchMarkersProps(searchResult);
+            updateMapLocation(searchResult);
+        }, []);
+
+        const onClickSearchMarkerHandler = useCallback(
+            (clickedMarker: Feature) => {
+                setSearchMarkersProps(searchMarkersProps.filter((marker) => marker !== clickedMarker));
+            },
+            [searchMarkersProps]
+        );
+
+        return (
+            <MMap location={location} margin={MARGIN} ref={(x) => (map = x)}>
+                <MMapDefaultSchemeLayer />
+                <MMapDefaultFeaturesLayer />
+                <MMapControls position="top">
+                    <MMapSearchControl searchResult={searchResultHandler} />
+                </MMapControls>
+
+                {searchMarkersProps.map((marker) => (
+                    <MMapDefaultMarker
+                        key={+marker.geometry.coordinates}
+                        title={marker.properties.name}
+                        subtitle={marker.properties.description}
+                        coordinates={marker.geometry.coordinates}
+                        onClick={() => onClickSearchMarkerHandler(marker)}
+                        size="normal"
+                        iconName="fallback"
+                    />
+                ))}
+            </MMap>
+        );
+    }
+}
diff --git a/example/search-control/vanilla/index.html b/example/search-control/vanilla/index.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<html>
+    <head>
+        <title>Vanilla example mappable-default-ui-theme</title>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
+        <script crossorigin src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
+        <script src="https://js.api.mappable.world/3.0/?apikey=%APIKEY%&lang=en_US"></script>
+
+        <script
+            data-plugins="transform-modules-umd"
+            data-presets="react, typescript"
+            type="text/babel"
+            src="../../index.ts"
+        ></script>
+        <script
+            data-plugins="transform-modules-umd"
+            data-presets="typescript"
+            type="text/babel"
+            src="../common.ts"
+        ></script>
+        <script
+            data-plugins="transform-modules-umd"
+            data-presets="typescript"
+            type="text/babel"
+            src="./index.ts"
+        ></script>
+
+        <link rel="stylesheet" href="../../index.css" />
+        <link rel="stylesheet" href="../common.css" />
+    </head>
+    <body>
+        <div id="app"></div>
+    </body>
+</html>
diff --git a/example/search-control/vanilla/index.ts b/example/search-control/vanilla/index.ts
@@ -0,0 +1,89 @@
+import type {SearchResponse} from '@mappable-world/mappable-types';
+import {LOCATION, MARGIN, initialMarkerProps, findSearchResultBoundsRange} from '../common';
+
+window.map = null;
+
+main();
+async function main() {
+    await mappable.ready;
+    const {MMap, MMapDefaultSchemeLayer, MMapDefaultFeaturesLayer, MMapControls} = mappable;
+
+    const {MMapDefaultMarker} = await mappable.import('@mappable-world/mappable-default-ui-theme');
+    const {MMapSearchControl} = await mappable.import('@mappable-world/mappable-default-ui-theme');
+
+    map = new MMap(document.getElementById('app'), {location: LOCATION, margin: MARGIN});
+
+    map.addChild(new MMapDefaultSchemeLayer({}));
+    map.addChild(new MMapDefaultFeaturesLayer({}));
+
+    const initialMarker = new MMapDefaultMarker({
+        title: initialMarkerProps.properties.name,
+        subtitle: initialMarkerProps.properties.description,
+        coordinates: initialMarkerProps.geometry.coordinates,
+        size: 'normal',
+        iconName: 'fallback',
+        onClick: () => {
+            map.removeChild(initialMarker);
+        }
+    });
+    map.addChild(initialMarker);
+    const searchMarkers = [initialMarker];
+
+    const updateSearchMarkers = (searchResult: SearchResponse) => {
+        searchMarkers.forEach((marker) => {
+            map.removeChild(marker);
+        });
+
+        searchResult.forEach((element) => {
+            const marker = new MMapDefaultMarker({
+                title: element.properties.name,
+                subtitle: element.properties?.description,
+                coordinates: element.geometry.coordinates,
+                size: 'normal',
+                iconName: 'fallback',
+                onClick: () => {
+                    map.removeChild(marker);
+                }
+            });
+            map.addChild(marker);
+            searchMarkers.push(marker);
+        });
+    };
+
+    const updateMapLocation = (searchResult: SearchResponse) => {
+        if (searchResult.length !== 0) {
+            let center;
+            let zoom;
+            let bounds;
+
+            if (searchResult.length === 1) {
+                center = searchResult[0].geometry?.coordinates;
+                zoom = 12;
+            } else {
+                bounds = findSearchResultBoundsRange(searchResult);
+            }
+
+            map.update({
+                location: {
+                    center,
+                    zoom,
+                    bounds,
+                    duration: 400
+                }
+            });
+        }
+    };
+
+    const searchResultHandler = (searchResult: SearchResponse) => {
+        updateSearchMarkers(searchResult);
+        updateMapLocation(searchResult);
+    };
+
+    map.addChild(
+        new MMapControls({position: 'top'}).addChild(
+            new MMapSearchControl({
+                searchResult: searchResultHandler
+            })
+        )
+    );
+}
diff --git a/example/search-control/vue/index.html b/example/search-control/vue/index.html
@@ -0,0 +1,36 @@
+<!doctype html>
+<html>
+    <head>
+        <title>Vue example mappable-default-ui-theme</title>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
+        <script crossorigin src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+        <script crossorigin src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
+        <script src="https://js.api.mappable.world/3.0/?apikey=%APIKEY%&lang=en_US"></script>
+
+        <script
+            data-plugins="transform-modules-umd"
+            data-presets="react, typescript"
+            type="text/babel"
+            src="../../index.ts"
+        ></script>
+        <script
+            data-plugins="transform-modules-umd"
+            data-presets="typescript"
+            type="text/babel"
+            src="../common.ts"
+        ></script>
+        <script
+            data-plugins="transform-modules-umd"
+            data-presets="typescript"
+            type="text/babel"
+            src="./index.ts"
+        ></script>
+
+        <link rel="stylesheet" href="../../index.css" />
+        <link rel="stylesheet" href="../common.css" />
+    </head>
+    <body>
+        <div id="app"></div>
+    </body>
+</html>