06장 Leaflet.js을 사용한 지도 시각화

6.1 지도 데이터 시각화

• Dot map(점 지도)
• 빠르고 정확하게 위치를 지정하고 인사이트를 도출할 수 있다. 점의 밀도가 높을수록 정확한 확인이 어려워 확대, 축소가 가능한 인터랙티브 지도를 사용한다.

• Heat Map(히트맵)
• 데이터의 크기에 기초해 색을 달리하여 시각화한 차트. 데이터의 분포를 표현할 수 있다. 전체적인 데이터의 분포 또는 밀집도를 바탕으로 인사이트를 도출한다. ex) 인종 분포, 밀도 및 변동 추세

• Choropleth map(Field map, 단계 구분도)
• 지도 위 지역별(행정구역별) 영역에 따라 색을 달리하며, 수치형 데이터의 크기를 표현한다.

• Connection Map
• 공간과 시간을 모두 표현할 수 있어 다양한 상황에 활용 가치가 높다. ex) 운전 경로, 버스/지하철 노선 분포, 비행기경로 추척

• Flow Map
• 출발지와 목적지 간의 데이터를 선으로 연결한다. 경로(연결) 보다는 흐름에 초점을 두었다. 수치형 데이터의 크기에 따라 흐름을 나타내는 선의 굵기를 다르게 표현한다. ex) 교통 흐름, 인구 이동 경로, 항공 경로 등

• Symbol map(Bubble map, 도형 표현도)
• 데이터의 크기에 따라 도형의 크기를 다르게 표현한다.

• Cartogram(카토그램)
• 지연 실제 크기를 왜곡하여 데이터 크기에 따라 면적을 크고, 작게 표현하기 때문에 직관적으로 지역별 차이를 이해할 수 있다.

• Dorling map(돌링 카토그램)
• 지역의 모양을 도형을 시각화한다. 지역의 모양을 모두 같은 도형으로 바꾸고, 데이터의 수치를 표현하는 데 집중한다. 도형을 기존 지역 위치에 배치한다.

• Tile Grid map(타일 격자 지도)
• 모든 지역을 일정한 크기의 정사각형 모양으로 고정하고, 데이터 수치에 따라 색을 다르게 표현한다. 모든 지역의 크기가 일정해므로 지역의 크기와 관계없이 지역별 데이터를 쉽게 탐색할 수 있다.

6.2 Leaflet.js 소개 및 설치

<link rel="stylesheet" href="<https://unpkg.com/leaflet@1.9.4/dist/leaflet.css>" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />

6.2.1 CDN으로 불러오기

<script src="<https://unpkg.com/leaflet@1.9.4/dist/leaflet.js>" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>

6.2.2 npm으로 설치하기

npm install react-dom leaflet

6.2.3 React Leaflet 라이브러리 사용하기

npm install react-leaflet

npm install -D @types/leaflet

1. 생명주기

2. 주의사항

💡

공식문서

React Leaflet | React Leaflet

React components for Leaflet maps

https://react-leaflet.js.org/

6.3 간단한 지도 생성하기

• <MapContainer />
• 지도 생성 및 Context api 전달.

• <TileLayer />
• 실제 지도 구현. WMTS로 구현된 타일 지도를 가져온다.

6.3.1 MapContainer - 지도 영역 만들기

const center = [0, 0]; //lat, lng 숫자로 이뤄진 배열
const zoomLevel = 13; //숫자가 클수록 확대된 지도를 얻을 수 있다.
const options = {};
const map = L.map("지도를 보여줄 태그의 id"); 
map.setView(center, zoomLevel);
L.tileLayer(url, options).addTo(map)

• map: Context api를 사용하는 이유이다. 자세한 내용은 <TileLayer /> 에서 알아보자.

• center: lat(위도)와 lng(경도)를 차례로 가진 배열을 주면 된다.

• zoom: 숫자값을 주며, 숫자가 클수록 더 확대된 지도를 얻을 수 있다.

//components/MapContainer
const MapContainer = ({ children, ...props }) => {
  return (
    <LeafletContext.Provider value={initValue} {...props}>
      {children}
    </LeafletContext.Provider>
  );
};

export default MapContainer;

//components/MapContainer
import { useReducer } from "react";
import { LeafletContext } from "../../hooks/useMap";

const initValue = {
  map: null,
  center: [0, 0],
  zoom: 13,
};

const reducer = (state, action) => {
	//..생략..
  return state;
};

const MapContainer = ({ children, ...props }) => {
  const [value, dispatch] = useReducer(reducer, initValue);
  return (
    <LeafletContext.Provider value={{ value, dispatch }} {...props}>
      {children}
    </LeafletContext.Provider>
  );
};

export default MapContainer;

6.3.2 TileLayer - 지도 보여주기

import { useEffect } from "react";
import * as L from "leaflet";
import useMap from "../../hooks/useMap";
import useGeoLocation from "../../hooks/useGeoLocation";

const TileLayer = ({ url, attribution, options, ...props }) => {
  const { value, dispatch } = useMap();
  
  useEffect(() => {
    if (!value.map) {
      const map = L.map("map"); //지도를 보여줄 태그의 id
      map.setView(value.center, value.zoom);
      dispatch({ type: "update", value: { center: value.center, map: map } });

      L.tileLayer(url, {
        attribution,
        ...options,
      }).addTo(map);
    }
  }, []);

  return (
    <div
      id="map"
      key={value.toString()}
      style={{ width: `100%`, height: `100%` }}
      {...props}
    ></div>
  );
};

export default TileLayer;

• attribution
• 지도의 캡션을 보여주며, 생략 가능하다.

//components/TileLayer.jsx
import { useEffect } from "react";
import * as L from "leaflet";
import useMap from "../../hooks/useMap";

const TileLayer = ({ url, attribution, options }) => {
  const { value, dispatch } = useMap();
  useEffect(() => {
    if (!value.map) return;

    const tileLayer = L.tileLayer(url, {
      attribution,
      ...options,
    });
    dispatch({
      type: "create",
      value: { ...value, tileLayer },
    });
  }, []);

  return null;
};

export default TileLayer;

6.4 지도 위에 표현하기

• <Marker />
• 지도 마커 구현. id값을 기준으로 기존에 있는 마커의 경우와 새로운 마커인 경우를 구분하여 지도 위에 표시되는 마커를 생성한다. 마커의 역할에 따라 자식 컴포넌트를 Popup으로 할지, Tooltip으로 할지 결정한다.

• <Popup />
• 지도 팝업 구현. 지도의 특정 위치 혹은 마커를 클릭 시 나오는 팝업을 생성한다.

• <Tooltip />
• 지도 툴팁 구현. 특정 위치의 마커에 마우스를 올리면 나오는 툴팁을 생성한다.

6.4.1 Marker

const latlng = L.latLng([lat, lng]); //lat: number, lng: number
const options = {/**마커 옵션들*/};
const marker = L.marker(latlng, options).addTo(map);

//hooks/useMarker.js
import { useEffect, useState } from "react";
import * as L from "leaflet";
import useMap from "./useMap";

const useMarker = () => {
  const { value, dispatch } = useMap();

  const currentMarkers = [...value.marker];
  const [markers, setMarkers] = useState(currentMarkers);
  const [marker, setMarker] = useState(null);
  useEffect(() => {
    dispatch({
      type: "update",
      value: { ...value, marker: markers },
    });
  }, [markers, value]);

  const isIncludeMarker = (markerId) =>
    !currentMarkers.every((marker) => marker.id != markerId);
  const findMarker = (markerId) =>
    currentMarkers.filter((marker) => marker.id === markerId)[0];
  const exceptMarkers = (markerId) =>
    currentMarkers.filter((marker) => marker.id != markerId);

  const createMarker = (markerId, latlng, options) => {
    if (isIncludeMarker(markerId)) {
      console.log("중복된 id의 마커가 있습니다.");
      return findMarker(markerId);
    }
    const newMarker = {
      id: markerId,
      marker: L.marker(latlng, options),
    };
    setMarker(newMarker.marker);
    setMarkers((prev) => [...prev, newMarker]);
    return newMarker;
  };

  const updateMarker = (markerId, latlng, options) => {
    if (!marker) return;

    const targetMarker = findMarker(markerId);
    const { marker: prevMarker, ...rest } = targetMarker;
    // 마커의 위치(latlng)를 업데이트
    prevMarker.setLatLng(latlng);

    // 아이콘 업데이트
    if (options?.icon) {
      prevMarker.setIcon(options.icon);
    }

    const copyMarker = {
      ...rest,
      marker: prevMarker,
    };
    setMarker(copyMarker.marker);

    const otherMarkers = exceptMarkers(markerId);
    setMarkers([...otherMarkers, copyMarker]);
    return copyMarker;
  };

  const deleteMarker = (markerId) => {
    const targetMarker = findMarker(markerId);
    const otherMarkers = exceptMarkers(markerId);
    targetMarker && targetMarker.marker.remove();
    setMarkers([...otherMarkers]);
    setMarker(null);
    return otherMarkers;
  };

  const useMarkerEvent = (event, callback, array) => {
    useEffect(() => {
      if (!marker) return;
      marker.on(event, callback);
      return () => {
        marker.off(event, callback);
      };
    }, [marker, value, ...array]);
  };

  return {
    createMarker,
    updateMarker,
    deleteMarker,
    useMarkerEvent,
    isIncludeMarker,
    findMarker,
    exceptMarkers,
  };
};

export default useMarker;

//components/DefaultMarker.jsx
import { useEffect } from "react";
import * as L from "leaflet";
import useMarker from "../../hooks/useMarker";

const DefaultMarker = ({
	id,
  latlng: [lat, lng],
  options = {},
  children,
  ...props
}) => {
  const { createMarker, updateMarker, deleteMarker, isIncludeMarker } =
    useMarker();
	
	const Latlng = L.latLng([lat, lng]);
	
  useEffect(() => {
    if (isIncludeMarker(id))
      updateMarker(id, Latlng, options);
    else createMarker(id, Latlng, options);

    return () => {
      deleteMarker(id)
    };
  }, []);

  return (
    <b {...props}>
      {children}
    </b>
  );
};

export default DefaultMarker;

6.4.2 Tooltip, Popup

1. 인스턴스를 생성하여 bind하기

const popup = L.popup()
    .setLatLng(latlng)
    .setContent('Hello world!<br />This is a nice tooltip.')
    .addTo(map);
//이때 marker는 이미 지도에 추가되어 있어야 한다.    
marker.bindPopup(popup).openPopup();

2. 바로 bind하기

//이때 marker는 이미 지도에 추가되어 있어야 한다.
marker.bindPopup("content").openPopup();

//components/CustomMarker.jsx
import { useEffect, useRef, useState } from "react";
import * as L from "leaflet";
import useMapEvent from "../../hooks/useMapEvent";
import useMarker from "../../hooks/useMarker";

const CustomMarker = ({
  latlng,
  options,
  children,
  id,
  tooltip, //tooltip을 props로 받으면서 popup과 구분
  openPopup, //마커에 bind된 popup의 초기 상태 결정
   onClick, //별도의 Marker 클릭 이벤트 핸들러 추가
  ...props
}) => {
  const {
    createMarker,
    updateMarker,
    deleteMarker,
    isIncludeMarker,
    useMarkerEvent,
  } = useMarker();

  const markerRef = useRef(null);
  const [currentMarker, setCurrentMarker] = useState(null);
  const [showPopup, setShowPopup] = useState(openPopup);

	//아이콘 커스터마이징
  const { iconUrl, iconSize, ...rest } = options;

  const Icon = L.icon({ iconUrl, iconSize });
  const markerOptions = iconUrl
    ? { ...rest, icon: Icon }
    : rest
    ? { ...rest }
    : undefined;

  const Latlng = L.latLng(latlng);
  useEffect(() => {
    if (isIncludeMarker(id)) 
      updateMarker(id, Latlng, .markerOptions);
    else createMarker(id, Latlng, markerOptions);
 
    return () => {
      deleteMarker(id);
    };
  }, [Latlng]);

  useEffect(() => {
    if (currentMarker && markerRef.current) {
      currentMarker.bindPopup(markerRef.current);
    }
  }, [currentMarker, markerRef]);

  useMarkerEvent(
    "mouseover",
    (e) => {
      tooltip && e.target.bindTooltip(tooltip);
    },
    [tooltip]
  );
  useMarkerEvent(
    "click",
    (e) => {
      setCurrentMarker(e.target);
      setShowPopup(true);
      if (showPopup) e.target.openPopup();
      onClick && onClick(e);
    },
    [Latlng]
  );

  useMapEvent(
    "popupclose",
    (e) => {
      setShowPopup(false);
      e.target._popup.closePopup();
    },
    [Latlng]
  );

  return (
    <dialog {...props} ref={markerRef}>
      {children}
    </dialog>
  );
};

export default CustomMarker;

import { useEffect, useRef } from "react";
import usePopup from "../../hooks/usePopup";

const Popup = ({ id, latlng, children, popupoptions = {}, open, ...props }) => {
  const { createPopup, updatePopup, deletePopup, isIncludePopup } = usePopup();

  const popupRef = useRef(null);

  useEffect(() => {
    if (!popupRef.current) return;
    const content = popupRef.current;
    if (isIncludePopup(id))
      updatePopup(id, latlng, content, popupoptions, open);
    else createPopup(id, latlng, content, popupoptions, open);

    return () => {
      deletePopup(id);
    };
  }, [open, id, popupRef]);

  return (
    <dialog {...props} ref={popupRef}>
      {children}
    </dialog>
  );
};

export default Popup;

6.5 CSV를 사용한 데이터 시각화

//component/FileInput.jsx
import * as XLSX from "xlsx-js-style";

const FileInput = ({ setData }) => {

  const handleFileUpload = (e) => {
    const file = e.target.files[0];
    const reader = new FileReader();

    reader.onload = (event) => {
      const workbook = XLSX.read(event.target.result, { type: "binary" });
      const sheetName = workbook.SheetNames[0];
      const sheet = workbook.Sheets[sheetName];

      setData(sheet);
    };

    reader.readAsBinaryString(file);
  };

  return (
    <form>
      <input type="file" onChange={handleFileUpload} />
    </form>
  );
}

export default FileInput;

//component/FileExport.jsx
import { useState } from "react";
import { saveAs } from "file-saver";
import * as XLSX from "xlsx-js-style";

const FileExport = ({ data }) => {

  const [value, setValue] = useState("map");
  //파일을 내보내는 이벤트
  const exportToExcel = (e) => {
    e.preventDefault();
    //데이터는 json으로 부터 sheet 형식으로 만들기때문에 배열값을 가져와야 한다.
    const worksheet = XLSX.utils.json_to_sheet(data);
    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
    const excelBuffer = XLSX.write(workbook, {
      bookType: "xlsx",
      type: "array",
    });
    const blob = new Blob([excelBuffer], { type: "application/octet-stream" });
    saveAs(blob, `${value}.xlsx`);
  };

  return (
    <form onSubmit={exportToExcel}>
      <input
        type="text"
        name=""
        id=""
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
      <button type="submit">Export to Excel</button>
    </form>
  );
};

export default FileExport;

import { createContext, useContext } from "react";
import * as XLSX from "xlsx-js-style";

//테이블을 구성하는 컴포넌트들은 기능상 큰 관여를 하지 않기 때문에 생략한다.

//기존의 행 위치를 잡아주기 위한 함수
const fitRowNum = (sheetData, newData, maxRows) => {
  const newData = Array(maxRows).fill([]);
  sheetData.forEach((data) => {
    const currentRow = data.__rowNum__;
    newData[currentRow] = data;
  });
  return newData;
};

const XlsxSheet = ({ data, ...props }) => {
  const sheetData = XLSX.utils.sheet_to_json(data);
  const maxRows = sheetData[sheetData.length - 1]
    ? sheetData[sheetData.length - 1]["__rowNum__"]
    : 0;
    
  const maxCols = maxRows
    ? Math.max(
        ...sheetData.map((d) => {
          return Object.values(d).length;
        })
      )
    : 0;

  const value = { maxRows,  maxCols};
  const newData = fitRowNum(sheetData, maxRows);
  const filtedData = newData.filter((d) => isObject(d));

  return (
    <TableContext.Provider value={value}>
      <table {...props}>
        <Head data={filtedData[0]} />
        <tbody>
          {filtedData.map((item, idx) => (
            <Body key={"td" + idx} data={item} />
          ))}
        </tbody>
      </table>
    </TableContext.Provider>
  );
};

export default XlsxSheet;

//사용예시
import { useEffect, useMemo, useState } from "react";
import * as XLSX from "xlsx-js-style";

import MapContainer from "../../../components/map/MapContainer";
import TileLayer from "../../../components/map/TileLayer";
import CustomMarker from "../../../components/map/CustomMarker";
import useGeoLocation from "../../../hooks/useGeoLocation";

import FileInput from "../../../components/spread/FileInput";
import XlsxSheet from "../../../components/spread/XlsxSheet";
import FileExport from "../../../components/spread/FileExport";


const MapWithCSV = () => {
  const { loading, position } = useGeoLocation();

  const [data, setData] = useState([[]]);
  const [markers, setMarkers] = useState([[]]);
  
  useEffect(() => {
    if (loading || !position) return;
		//더미 데이터를 다음과 같이 만들어준다.
    const initData = Array.from({ length: 10 }, (_, idx) => ({
      id: `data-${idx}`,
      latitude: parseFloat(Math.random() / 20) + position[0],
      longitude: parseFloat(Math.random() / 20) + position[1],
    }));

    setMarkers(initData);
  }, [loading, position]);
  
	//더미 데이터의 형태를 바꾸어 엑셀 함수가 잘 읽을 수 있게 한다.
  const refinedData = useMemo(() => {
    const titleKeys = Object.keys(markers[0]);
    const rows = markers.map((item) => Object.values(item));
    return [titleKeys, ...rows];
  }, [markers]);

  useEffect(() => {
    if (!markers.length) return;
		
    const csvContent = refinedData.map((row) => row.join(",")).join("\n");
    const workbook = XLSX.read(csvContent, { type: "string" });
    const sheetName = workbook.SheetNames[0];
    const sheet = workbook.Sheets[sheetName];
    setData(sheet);
  }, [markers]);

  return <main>
          <div style={{ width: `100%`, height: `50vh` }}>
            {!loading && (
              <MapContainer id="map_04" center={position}>
                <TileLayer
                  id="map_1"
                  url={"https://tile.openstreetmap.org/{z}/{x}/{y}.png"}
                  attribution={"04"}
                />
                {markers.length > 0 &&
                  markers.map((d) => (
                    <CustomMarker
                      key={d.id + d}
                      id={d.id}
                      latlng={[d.latitude, d.longitude]}
                    ></CustomMarker>
                  ))}
              </MapContainer>
            )}
          </div>
          <section>
            <XlsxSheet data={data}></XlsxSheet>
            <FileInput setData={setData}></FileInput>
            <FileExport data={markers}></FileExport>
          </section>
        </main>
};

export default MapWithCSV;

6.6 지도 스타일링 및 커스터마이징

6.6.1 좌표계 설정하기

💡

Documentation - Leaflet - a JavaScript library for interactive maps

Documentation - Leaflet - a JavaScript library for interactive maps

This reference reflects Leaflet . Check this list if you are using a different version of Leaflet.

Option	Type	Default	Description
crs	CRS	L.CRS.EPSG3857	The Coordinate Reference System to use. Don't change this if you're not sure what it means.

// 좌표계 정의
const EPSG5181 = new L.Proj.CRS(
    'EPSG:5181',
    '+proj=tmerc +lat_0=38 +lon_0=127 +k=1 +x_0=200000 +y_0=500000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs',
    {
    resolutions: [2048, 1024, 512, 256, 128, 64, 32, 16, 8, 4, 2, 1, 0.5, 0.25],
    origin: [-30000, -60000],
    bounds: L.bounds([-30000-Math.pow(2,19)*4, -60000], [-30000+Math.pow(2,19)*5, -60000+Math.pow(2,19)*5])
    }          
 );
 
 map.options.crs = EPSG5181;

6.6.2 유용한 메서드 소개

• setView: 해당 좌표를 지도의 중심으로 만든다.

• fitBounds: 여러 개의 좌표 데이터를 토대로 화면에 모든 좌표가 보일 수 있게 zoom, center 등을 수정한다.

• flyTo: 현재 지도의 center에서 해당 좌표까지 이동한다. zoom 애니메이션이 기본적으로 동작한다.

• getCenter: 지도의 center를 얻거나, vector 등 여러 좌표의 가운데 지점을 계산하여 반환한다.

• getLatLng: 마커 등 지도에 bind된 좌표를 얻는다.

• openPopup/closePopup: 레이어에 bind된 팝업을 열고 닫는다.

6.7 왜 D3로 하지 않고 Leaflet을 사용하는가?

6.7.1 D3.js와 Leaflet의 차이점

1. 데이터 시각화 vs 지도 생성

2. 일반성 vs 특수성

3. 코드 복잡성

4. 커뮤니티와 문서

5. 상호작용과 애니메이션

6. 지리공간 기능