leaflet useMap

useMap.tsx

import {useEffect, useState, MutableRefObject} from 'react';
import {Map, TileLayer} from 'leaflet';
import {City} from '../types/city';

function useMap(
  mapRef: MutableRefObject<HTMLElement | null>,
  city: City
): Map | null {
  const [map, setMap] = useState<Map | null>(null);

  const { location } = city;

  useEffect(() => {
    if (mapRef.current === null) {
      return;
    }

    const instance = new Map(mapRef.current, {
      center: {
        lat: location.latitude,
        lng: location.longitude
      },
      zoom: location.zoom
    });

    const layer = new TileLayer(
      'https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png',
      {
        attribution:
          '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>'
      }
    );

    instance.addLayer(layer);

    // eslint-disable-next-line no-console
    console.log('create map');

    setMap(instance);

    return () => {
      setMap(null);
      instance.remove();
    };
  }, [mapRef, location]);

  return map;
}

export default useMap;