updates to map feature

1 files changed, 107 insertions, 0 deletions

diff --git a/src/client/views/nodes/MapBox/GeocoderControl.tsx b/src/client/views/nodes/MapBox/GeocoderControl.tsx
new file mode 100644
index 000000000..e4ba51316
--- /dev/null
+++ b/src/client/views/nodes/MapBox/GeocoderControl.tsx
@@ -0,0 +1,107 @@
+// 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
+// };
\ No newline at end of file