barikoi-map-widget
Version:
A customizable map widget built with React, designed for seamless integration with Barikoi's map services.
1 lines • 25.1 kB
Source Map (JSON)
{"version":3,"sources":["../src/components/BarikoiAutocomplete.tsx","../src/contexts/BarikoiMapProvider.tsx","../src/contexts/hooks/useAutocomplete.ts","../src/components/BarikoiMap.tsx","../src/contexts/hooks/useMap.ts"],"sourcesContent":["//@ts-nocheck\nimport React, { useEffect, useRef, useState } from 'react';\n\n// Import Hooks\nimport { useAutocomplete } from '../contexts/hooks/useAutocomplete';\n\n// Import Types\nimport { AutocompletePropsType, PlaceType } from '../types';\n\nconst MarkerSVG = () => {\n return (\n <div style={{ display: 'inline-block' }}>\n <svg width=\"24\" height=\"24\" fill=\"none\" viewBox=\"0 0 36 44\">\n <path\n stroke=\"black\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth=\"2\"\n d=\"M18 42c2-10 16-11.163 16-24 0-8.837-7.163-16-16-16S2 9.163 2 18c0 12.837 14 14 16 24z\"\n />\n <path\n stroke=\"black\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth=\"2\"\n d=\"M18 24a6 6 0 100-12 6 6 0 000 12z\"\n />\n </svg>\n </div>\n );\n};\n\nconst defaultStyles = {\n container: {\n width: '400px',\n position: 'relative' as const,\n fontFamily: 'Arial, sans-serif',\n },\n input: {\n width: '100%',\n padding: '10px 30px 10px 10px',\n fontSize: '14px',\n border: '1px solid #ccc',\n borderRadius: '4px',\n boxSizing: 'border-box' as const,\n position: 'relative' as const,\n },\n dropdown: {\n position: 'absolute' as const,\n top: '100%',\n left: 0,\n overflowY: 'auto' as const,\n border: '1px solid #ccc',\n borderRadius: '4px',\n zIndex: 1000,\n boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',\n\n transform: 'translateY(-10px)',\n transition: 'opacity 0.3s ease-in-out, transform 0.3s ease-in-out',\n display: 'none',\n },\n dropdownVisible: {\n display: 'block', // Show when visible\n transform: 'translateY(0)',\n },\n dropdownItem: {\n padding: '10px',\n cursor: 'pointer',\n borderBottom: '1px solid #f0f0f0',\n transition: 'background-color 0.2s ease-in-out',\n minHeight: '20px',\n },\n dropdownItemHover: {\n backgroundColor: '#f5f5f5',\n },\n dropdownFooter: {\n position: 'sticky',\n bottom: 0,\n left: 0,\n backgroundColor: '#fff',\n padding: '10px',\n fontSize: '10px',\n color: '#adbabd',\n borderTop: '1px solidrgb(128, 128, 128)',\n },\n noResult: {\n padding: '10px',\n color: '#999',\n },\n\n clearButton: {\n position: 'absolute' as const,\n top: '10px',\n right: '10px',\n border: 'none',\n backgroundColor: 'transparent',\n cursor: 'pointer',\n fontSize: '16px',\n color: '#999',\n },\n};\n\nconst BarikoiAutocomplete: React.FC<AutocompletePropsType> = ({\n apiKey,\n className = {},\n}) => {\n const {\n searchedPlace,\n setSearchedPlace,\n selectedPlace,\n setSelectedPlace,\n suggestions,\n setSuggestions,\n isAutocompleteLoading,\n setIsAutocompleteLoading,\n } = useAutocomplete();\n // States\n const debounceRef = useRef<NodeJS.Timeout | null>(null);\n const [isDropdownVisible, setIsDropdownVisible] = useState(false);\n\n // Add focus and blur effects for the input\n useEffect(() => {\n const inputElement = document.querySelector('input[type=\"text\"]');\n\n const handleFocus = () => {\n if (suggestions.length > 0) {\n setIsDropdownVisible(true);\n }\n };\n\n const handleBlur = () => {\n // Optional: Close the dropdown when input loses focus\n // Use a timeout to allow click events on suggestions to register\n setTimeout(() => setIsDropdownVisible(false), 200);\n };\n\n if (inputElement) {\n inputElement.addEventListener('focus', handleFocus);\n inputElement.addEventListener('blur', handleBlur);\n }\n\n return () => {\n if (inputElement) {\n inputElement.removeEventListener('focus', handleFocus);\n inputElement.removeEventListener('blur', handleBlur);\n }\n };\n }, [suggestions]);\n\n // Fetch Suggestions with Debounce\n useEffect(() => {\n if (!searchedPlace.trim()) {\n setSuggestions([]);\n setIsDropdownVisible(false);\n return;\n }\n\n // Prevent fetching suggestions if the searchedPlace matches the selectedPlace\n if (searchedPlace === selectedPlace?.name) {\n setIsDropdownVisible(false);\n return;\n }\n\n setIsAutocompleteLoading(true);\n\n if (debounceRef.current) {\n clearTimeout(debounceRef.current);\n }\n\n debounceRef.current = setTimeout(async () => {\n try {\n const response = await fetch(\n `https://barikoi.xyz/v2/api/search/autocomplete/place?api_key=${apiKey}&q=${searchedPlace}`\n );\n const { places } = await response.json();\n const newSuggestions: PlaceType[] =\n places?.map((place: PlaceType, index: number) => ({\n name: place?.address || 'Unknown',\n ...place,\n })) || [];\n setSuggestions(newSuggestions);\n if (newSuggestions.length > 0) {\n setIsDropdownVisible(true);\n }\n } catch (error) {\n console.error('Error fetching autocomplete data:', error);\n setSuggestions([]);\n } finally {\n setIsAutocompleteLoading(false);\n }\n }, 300); // 300ms debounce time\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [searchedPlace, selectedPlace, apiKey]);\n\n // Handle Input Change\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n setSearchedPlace(e.target.value);\n };\n\n // Handle Item Click\n const handleSelect = (item: any) => {\n setSearchedPlace(item.name);\n setSelectedPlace(item);\n setIsDropdownVisible(false);\n };\n\n // Handle Clear Input\n const handleClear = () => {\n setSearchedPlace('');\n setSelectedPlace(null);\n setSuggestions([]);\n setIsDropdownVisible(false);\n };\n\n // Render Dropdown Items\n const renderSuggestions = () => {\n if (isAutocompleteLoading) {\n return (\n <div\n style={defaultStyles.noResult}\n className={className.noResult || ''}\n >\n Searching...\n </div>\n );\n }\n\n if (suggestions.length === 0) {\n return (\n <div\n style={defaultStyles.noResult}\n className={className.noResult || ''}\n >\n No results found\n </div>\n );\n }\n\n return (\n <>\n <div\n style={{\n // maxHeight: 'calc(600px - 40px)', // Adjust height to account for footer\n overflowY: 'auto',\n }}\n >\n {suggestions.map((item: PlaceType) => (\n <div\n key={item.id}\n style={defaultStyles.dropdownItem}\n className={className.dropdownItem || ''}\n onMouseEnter={(e) =>\n (e.currentTarget.style.backgroundColor =\n defaultStyles.dropdownItemHover.backgroundColor)\n }\n onMouseLeave={(e) =>\n (e.currentTarget.style.backgroundColor = 'transparent')\n }\n onClick={() => handleSelect(item)}\n >\n <div\n style={{\n display: 'grid',\n gridTemplateColumns: 'auto 1fr',\n alignItems: 'center',\n minHeight: '40px',\n }}\n >\n <div\n style={{\n display: 'flex',\n justifyContent: 'center',\n marginRight: 2,\n }}\n >\n <MarkerSVG />\n </div>\n <div>{item.name}</div>\n </div>\n </div>\n ))}\n </div>\n {/* Sticky Footer */}\n <div\n style={defaultStyles.dropdownFooter}\n className={className.dropdownFooter || ''}\n >\n Powered by{' '}\n <a\n href=\"https://barikoi.com\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n style={{ color: '#00A66B', textDecoration: 'none' }}\n >\n Barikoi\n </a>\n </div>\n </>\n );\n };\n\n return (\n <div style={defaultStyles.container} className={className.container || ''}>\n {/* Input Field */}\n <input\n type=\"text\"\n value={searchedPlace}\n onChange={handleChange}\n placeholder=\"Search Address\"\n style={defaultStyles.input}\n className={className.input || ''}\n />\n\n {/* Clear Button */}\n {searchedPlace && (\n <button\n type=\"button\"\n style={defaultStyles.clearButton}\n className={className.clearButton || ''}\n onClick={handleClear}\n >\n X\n </button>\n )}\n\n {/* Dropdown */}\n <div\n style={{\n ...defaultStyles.dropdown,\n ...(isDropdownVisible ? defaultStyles.dropdownVisible : {}),\n }}\n className={className.dropdown || ''}\n >\n {renderSuggestions()}\n </div>\n </div>\n );\n};\n\nexport default BarikoiAutocomplete;\n","import React, { createContext, useState, useContext, ReactNode, useMemo } from 'react'\n\n// Import Types\nimport { BarikoiMapContextType } from '../types'\n\nconst BarikoiMapContext = createContext<BarikoiMapContextType | undefined>(undefined)\n\nexport const BarikoiMapProvider: React.FC<{ children: ReactNode }> = ({ children }) => {\n // Autocomplete States\n const [searchedPlace, setSearchedPlace] = useState('')\n const [selectedPlace, setSelectedPlace] = useState<any>(null)\n const [suggestions, setSuggestions] = useState<any[]>([])\n const [isAutocompleteLoading, setIsAutocompleteLoading] = useState<boolean>(false)\n\n // Map States\n const [zoomLevel, setZoomLevel] = useState<number>(10)\n const [centerPoint, setCenterPoint] = useState({ lat: 23.8103, lng: 90.4125 })\n const [markerData, setMarkerData] = useState<any[]>([])\n const contextValue = useMemo(() => ({\n autocomplete: {\n searchedPlace,\n setSearchedPlace,\n selectedPlace,\n setSelectedPlace,\n suggestions,\n setSuggestions,\n isAutocompleteLoading,\n setIsAutocompleteLoading,\n },\n map: {\n zoomLevel,\n setZoomLevel,\n centerPoint,\n setCenterPoint,\n markerData,\n setMarkerData\n }\n }), [searchedPlace, setSearchedPlace, selectedPlace, setSelectedPlace, suggestions, setSuggestions, isAutocompleteLoading, setIsAutocompleteLoading, zoomLevel, setZoomLevel, centerPoint, setCenterPoint, markerData, setMarkerData])\n\n return (\n <BarikoiMapContext.Provider\n value={ contextValue }\n >\n {children}\n </BarikoiMapContext.Provider>\n )\n}\n\n// Custom hook to use the Barikoi Map context\nexport const useBarikoiMapContext = (): BarikoiMapContextType => {\n const context = useContext(BarikoiMapContext)\n if (!context) {\n throw new Error('useBarikoiMap must be used within a BarikoiMapProvider')\n }\n return context\n}\n","import { useBarikoiMapContext } from '../BarikoiMapProvider'\n\nexport const useAutocomplete = () => {\n return useBarikoiMapContext().autocomplete\n}\n","import { useEffect, useRef } from 'react'\nimport { Map, Marker, FullscreenControl, GeolocateControl, NavigationControl, ScaleControl, MapRef } from 'react-bkoi-gl'\n\n// Import Types\nimport { BarikoiMapPropsType } from '../types'\n\n// Import Hooks\nimport { useMap } from '../contexts/hooks/useMap'\n\n// Import Styles\nimport \"react-bkoi-gl/styles\"\n\nconst defaultStyles = {\n container: {\n minWidth: \"500px\",\n minHeight: \"500px\",\n overflow: \"hidden\",\n }\n}\n\nconst BarikoiMap: React.FC<BarikoiMapPropsType> = ({ apiKey, initialViewState, controls, mapStyle, className = {} }) => {\n const { centerPoint } = useMap()\n\n const mapStyleUrl = `https://map.barikoi.com/styles/${ mapStyle ?? 'osm-liberty' }/style.json?key=${ apiKey }`\n const mapRef = useRef<MapRef>(null)\n const _initialViewState = {\n longitude: 90.36402,\n latitude: 23.823731,\n minZoom: 4,\n maxZoom: 30,\n zoom: 13,\n bearing: 0,\n pitch: 0,\n antialias: true,\n ...initialViewState\n }\n\n // On Change Center Point\n useEffect(() => {\n if (centerPoint?.lng && centerPoint?.lat) {\n mapRef?.current?.flyTo({\n center: [centerPoint.lng, centerPoint.lat],\n essential: true\n })\n }\n }, [centerPoint])\n // console.log('render map')\n return (\n <div\n style={ defaultStyles.container }\n className={ className.container || '' }\n >\n <Map\n ref={ mapRef }\n mapStyle={ mapStyleUrl }\n style={{ width: \"100%\", height: \"100%\" }}\n initialViewState={ _initialViewState }\n doubleClickZoom={ false }\n dragRotate={ false }\n attributionControl={ true }\n >\n {/* Map Controls */}\n {controls?.geolocate?.enabled && <GeolocateControl position={ controls?.geolocate?.position ?? \"top-right\" } />}\n {controls?.fullscreen?.enabled && <FullscreenControl position={ controls?.fullscreen?.position ?? \"top-right\" } />}\n {controls?.navigation?.enabled && <NavigationControl position={ controls?.navigation?.position ?? \"top-right\" } />}\n {controls?.scale?.enabled && <ScaleControl position={ controls?.scale?.position ?? \"bottom-right\" } />}\n\n {/* Map Marker */}\n {centerPoint?.lng && centerPoint?.lat && controls?.marker?.enabled && (\n <Marker\n longitude={ centerPoint.lng }\n latitude={ centerPoint.lat }\n anchor=\"bottom\"\n >\n <img width={ 50 } height={ 50 } src={ controls?.marker?.url ?? \"https://maps.barikoi.com/images/icon.png\" } alt=\"marker\" />\n </Marker>\n )}\n\n {/* Barikoi Logo */}\n <div\n className='barikoi-logo'\n style={{\n width: '90px',\n height: '20px',\n position: 'absolute',\n left: 10,\n bottom: 8,\n backgroundSize: 'contain',\n backgroundRepeat: 'no-repeat',\n zIndex: 99999,\n backgroundImage: `url('data:image/png;base64,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')`\n }}\n />\n </Map>\n </div>\n )\n}\n\nexport default BarikoiMap\n","import { useBarikoiMapContext } from '../BarikoiMapProvider'\n\nexport const useMap = () => {\n return useBarikoiMapContext().map\n}\n"],"mappings":"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","names":["useState","jsx","useState","useEffect","useRef","jsx","jsxs","defaultStyles","useRef","useEffect"]}