1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
|
// import React from 'react';
// import MapboxGeocoder , { GeocoderOptions} from '@mapbox/mapbox-gl-geocoder'
// import { ControlPosition, MarkerProps, useControl } from "react-map-gl";
// import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css'
// export type GeocoderControlProps = Omit<GeocoderOptions, 'accessToken' | 'mapboxgl' | 'marker'> & {
// mapboxAccessToken: string;
// marker?: Omit<MarkerProps, 'longitude' | 'latitude'>;
// position: ControlPosition;
// onLoading: (...args: any[]) => void;
// onResults: (...args: any[]) => void;
// onResult: (...args: any[]) => void;
// onError: (...args: any[]) => void;
// }
// export const GeocoderControl = (props: GeocoderControlProps) => {
// console.log(props);
// const geocoder = useControl<MapboxGeocoder>(
// () => {
// const ctrl = new MapboxGeocoder({
// ...props,
// marker: false,
// accessToken: props.mapboxAccessToken
// });
// ctrl.on('loading', props.onLoading);
// ctrl.on('results', props.onResults);
// ctrl.on('result', evt => {
// props.onResult(evt);
// // const {result} = evt;
// // const location =
// // result &&
// // (result.center || (result.geometry?.type === 'Point' && result.geometry.coordinates));
// // if (location && props.marker) {
// // setMarker(<Marker {...props.marker} longitude={location[0]} latitude={location[1]} />);
// // } else {
// // setMarker(null);
// // }
// });
// ctrl.on('error', props.onError);
// return ctrl;
// },
// {
// position: props.position
// }
// );
// // @ts-ignore (TS2339) private member
// if (geocoder._map) {
// if (geocoder.getProximity() !== props.proximity && props.proximity !== undefined) {
// geocoder.setProximity(props.proximity);
// }
// if (geocoder.getRenderFunction() !== props.render && props.render !== undefined) {
// geocoder.setRenderFunction(props.render);
// }
// if (geocoder.getLanguage() !== props.language && props.language !== undefined) {
// geocoder.setLanguage(props.language);
// }
// if (geocoder.getZoom() !== props.zoom && props.zoom !== undefined) {
// geocoder.setZoom(props.zoom);
// }
// if (geocoder.getFlyTo() !== props.flyTo && props.flyTo !== undefined) {
// geocoder.setFlyTo(props.flyTo);
// }
// if (geocoder.getPlaceholder() !== props.placeholder && props.placeholder !== undefined) {
// geocoder.setPlaceholder(props.placeholder);
// }
// if (geocoder.getCountries() !== props.countries && props.countries !== undefined) {
// geocoder.setCountries(props.countries);
// }
// if (geocoder.getTypes() !== props.types && props.types !== undefined) {
// geocoder.setTypes(props.types);
// }
// if (geocoder.getMinLength() !== props.minLength && props.minLength !== undefined) {
// geocoder.setMinLength(props.minLength);
// }
// if (geocoder.getLimit() !== props.limit && props.limit !== undefined) {
// geocoder.setLimit(props.limit);
// }
// if (geocoder.getFilter() !== props.filter && props.filter !== undefined) {
// geocoder.setFilter(props.filter);
// }
// if (geocoder.getOrigin() !== props.origin && props.origin !== undefined) {
// geocoder.setOrigin(props.origin);
// }
// }
// return (
// <div>
// Geocoder
// </div>
// )
// }
// const noop = () => {};
// GeocoderControl.defaultProps = {
// marker: true,
// onLoading: noop,
// onResults: noop,
// onError: noop
// };
|
