Leaflet

Leaflet (opens in a new tab) is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 42 KB of JS, it has all the mapping features most developers ever need.

A reusable component has been made at src/shared/components/leaflet/index.tsx

Usage

const LeafletMap = dynamic(() => import('@shared/components/leaflet'), {
  ssr: false,
});
 
const [latitudes, setLatitudes] = useState([
    { value: '40.7128', label: 'New York (40.7128)' },
  ]);
 
const [longitudes, setLongitudes] = useState([
    { value: '-74.0060', label: 'New York (-74.0060)' },
]);
 
const [latitude, setlatitude] = useState<any>(latitudes[0]);
const [longitude, setlongitude] = useState<any>(longitudes[0]);
 
return (
.
.
<LeafletMap
    lat={latitude.value}
    long={longitude.value}
    onChange={handleMapChange}
/>
.
.
 
)

Firebase Overview