added examples of search control for vanilla, react, vue

mappable-world · May 15, 2024 · 267c212 · 267c212
1 parent 24290ca
commit 267c212
Show file tree

Hide file tree

Showing 5 changed files with 233 additions and 23 deletions.
diff --git a/example/search-control/common.ts b/example/search-control/common.ts
@@ -1,8 +1,57 @@
-import type {MMapLocationRequest, LngLatBounds} from '@mappable-world/mappable-types';
+import type {MMapLocationRequest, LngLatBounds, SearchResponse, Margin, Feature} from '@mappable-world/mappable-types';
+
+mappable.ready.then(() => {
+    mappable
+        .getDefaultConfig()
+        .setApikeys({search: 'pk_ZAROIlpukeMufiKGZFwyulaUQEXIjDySkgduDDiovkifzqXLsJweeFmxeoRwZNNc'});
+});
 
 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.tsx b/example/search-control/react/index.tsx
@@ -1,4 +1,5 @@
-import {LOCATION} from '../common';
+import type {SearchResponse, Feature} from '@mappable-world/mappable-types';
+import {LOCATION, MARGIN, initialMarkerProps, findSearchResultBoundsRange} from '../common';
 
 window.map = null;
 
@@ -7,10 +8,11 @@ async function main() {
     const [mappableReact] = await Promise.all([mappable.import('@mappable-world/mappable-reactify'), mappable.ready]);
     const reactify = mappableReact.reactify.bindTo(React, ReactDOM);
 
-    const {MMap, MMapDefaultSchemeLayer, MMapDefaultFeaturesLayer, MMapControls} = reactify.module(mappable);
+    const {useState, useCallback} = React;
 
-    const {useState} = 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(
@@ -21,15 +23,62 @@ async function main() {
     );
 
     function App() {
-        const [location] = useState(LOCATION);
+        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} ref={(x) => (map = x)}>
+            <MMap location={location} margin={MARGIN} ref={(x) => (map = x)}>
                 <MMapDefaultSchemeLayer />
                 <MMapDefaultFeaturesLayer />
                 <MMapControls position="top">
-                    <MMapSearchControl />
+                    <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.ts b/example/search-control/vanilla/index.ts
@@ -1,27 +1,88 @@
-import {LOCATION} from '../common';
+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;
 
-    mappable
-        .getDefaultConfig()
-        .setApikeys({search: 'pk_ZAROIlpukeMufiKGZFwyulaUQEXIjDySkgduDDiovkifzqXLsJweeFmxeoRwZNNc'});
+    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});
+    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: (result) => {
-                    console.log(result);
-                }
+                searchResult: searchResultHandler
             })
         )
     );

diff --git a/example/search-control/vue/index.ts b/example/search-control/vue/index.ts
@@ -1,4 +1,5 @@
-import {LOCATION} from '../common';
+import type {Feature, SearchResponse} from '@mappable-world/mappable-types';
+import {LOCATION, MARGIN, initialMarkerProps, findSearchResultBoundsRange} from '../common';
 
 window.map = null;
 
@@ -7,32 +8,82 @@ async function main() {
     const [mappableVue] = await Promise.all([mappable.import('@mappable-world/mappable-vuefy'), mappable.ready]);
     const vuefy = mappableVue.vuefy.bindTo(Vue);
 
+    const {createApp, ref} = Vue;
+
     const {MMap, MMapDefaultSchemeLayer, MMapDefaultFeaturesLayer, MMapControls} = vuefy.module(mappable);
 
+    const {MMapDefaultMarker} = vuefy.module(await mappable.import('@mappable-world/mappable-default-ui-theme'));
     const {MMapSearchControl} = vuefy.module(await mappable.import('@mappable-world/mappable-default-ui-theme'));
 
-    const app = Vue.createApp({
+    const app = createApp({
         components: {
             MMap,
             MMapDefaultSchemeLayer,
             MMapDefaultFeaturesLayer,
             MMapControls,
+            MMapDefaultMarker,
             MMapSearchControl
         },
         setup() {
             const refMap = (ref: any) => {
                 window.map = ref?.entity;
             };
-            const onClick = () => alert('Click!');
-            return {LOCATION, refMap, onClick};
+
+            const location = ref(LOCATION);
+
+            const searchMarkersProps = ref([initialMarkerProps]);
+
+            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);
+                    }
+
+                    location.value = {
+                        center,
+                        zoom,
+                        bounds,
+                        duration: 400
+                    };
+                }
+            };
+
+            const searchResultHandler = (searchResult: SearchResponse) => {
+                searchMarkersProps.value = searchResult;
+                updateMapLocation(searchResult);
+            };
+
+            const onClickSearchMarkerHandler = (clickedMarker: Feature) => {
+                searchMarkersProps.value = searchMarkersProps.value.filter((marker) => marker !== clickedMarker);
+            };
+
+            return {location, MARGIN, refMap, searchResultHandler, searchMarkersProps, onClickSearchMarkerHandler};
         },
         template: `
-            <MMap :location="LOCATION" :ref="refMap">
+            <MMap :location="location" :margin="MARGIN" :ref="refMap">
                 <MMapDefaultSchemeLayer />
                 <MMapDefaultFeaturesLayer />
                 <MMapControls position="top">
-                    <MMapSearchControl />
+                    <MMapSearchControl :searchResult="searchResultHandler" />
                 </MMapControls>
+
+                <MMapDefaultMarker
+                    v-for="marker in searchMarkersProps"
+                    :key="marker.geometry.coordinates"
+                    :title="marker.properties.name"
+                    :subtitle="marker.properties.description"
+                    :coordinates="marker.geometry.coordinates"
+                    :onClick="()=>onClickSearchMarkerHandler(marker)"
+                    size="normal"
+                    iconName="fallback"
+                />
             </MMap>`
     });
     app.mount('#app');

diff --git a/src/controls/MMapSearchControl/MMapSuggest/index.ts b/src/controls/MMapSearchControl/MMapSuggest/index.ts
@@ -52,7 +52,7 @@ class MMapSuggest extends mappable.MMapComplexEntity<MMapSuggestProps> {
 
         this._addSuggestItems(suggestResult, this._props.onSuggestClick);
 
-        this._rootElement.classList.toggle(HIDE_CLASS, !this.children.length);
+        this._rootElement?.classList.toggle(HIDE_CLASS, !this.children.length);
     };
 
     private _updateActiveSuggest = (changeActiveSuggest: SuggestNavigationAction) => {