diff --git a/example/search-control/common.ts b/example/search-control/common.ts index ca06e2f..5a9eeba 100644 --- 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 index c7ed984..f6d2aa3 100644 --- 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 ( - (map = x)}> + (map = x)}> - + + + {searchMarkersProps.map((marker) => ( + onClickSearchMarkerHandler(marker)} + size="normal" + iconName="fallback" + /> + ))} ); } diff --git a/example/search-control/vanilla/index.ts b/example/search-control/vanilla/index.ts index ed682bc..5e77941 100644 --- a/example/search-control/vanilla/index.ts +++ b/example/search-control/vanilla/index.ts @@ -1,4 +1,6 @@ -import {LOCATION} from '../common'; +import type {SearchResponse} from '@mappable-world/mappable-types'; +import {LOCATION, MARGIN, initialMarkerProps, findSearchResultBoundsRange} from '../common'; + window.map = null; main(); @@ -6,22 +8,81 @@ 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 index 0903498..d30095d 100644 --- 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: ` - + - + + + ` }); app.mount('#app'); diff --git a/src/controls/MMapSearchControl/MMapSuggest/index.ts b/src/controls/MMapSearchControl/MMapSuggest/index.ts index bd0a1a9..fbfbe89 100644 --- a/src/controls/MMapSearchControl/MMapSuggest/index.ts +++ b/src/controls/MMapSearchControl/MMapSuggest/index.ts @@ -52,7 +52,7 @@ class MMapSuggest extends mappable.MMapComplexEntity { 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) => {