Skip to main content

[JavaScript] Map 연동하기(OSM)

· 4 min read

지도 라이브러리를 이용하여 웹 화면에 지도를 출력해보기 많이 사용하는 라이브러리로는 Leaflet과 OpenLayers가 있는 듯.

두 라이브러리의 특징을 간단히 정리하면...

Leaflet​

  • 코드의 크기가 작고(38K), 간단한 지도 프로그램을 만드는 데 적합
  • 사용법이 간단하여 사용하기 쉽고, 코드의 양이 적은편
  • 추가 기능은 플러그인을 적용해 확장 가능 (3rd party)
  • 모바일 친화적

OpenLayers​

  • 코어 라이브러리에 웹기반의 GIS 를 만들기 위한 필수적인 기능을 모두 가지고 있음
  • 높은 유연성과 안정성
  • 다양한 예제 제공
  • 내장된 Proj4 를 사용한 on-the-fly 기능 제공 (다양한 좌표체계를 가진 레이어를 타일지도의 체계로 투영)

Example​

먼저 map 출력을 위해 스타일을 설정한다.

html,
body {
  height: 100%;
}
.map {
  height: 80%;
}

Leaflet​

<!DOCTYPE html>
<html lang="en">
  <head>
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"
    />
  </head>
  <body>
    <div id="leafMap" class="map"></div>

    <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
    <script>
      const zoom = {
        level: 15,
        maxLevel: 19,
      };

      // 현재의 위치 정보를 가져온다.
      function getLocation() {
        return new Promise((resolve) => {
          navigator.geolocation.watchPosition(function (position) {
            return resolve({
              latitude: position.coords.latitude,
              longitude: position.coords.longitude,
            });
          });
        });
      }

      getLocation().then((location) => {
        const { latitude, longitude } = location;

        // 위도, 경도, zoom level을 설정하여 Map을 생성한다.
        let mymap = L.map('leafMap').setView([latitude, longitude], zoom.level);

        // map을 로딩한다
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
          maxZoom: zoom.maxLevel,
          attribution:
            '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
        }).addTo(mymap);
      });
    </script>
  </body>
</html>

leaflet의 다큐먼트에 정의한 아래의 방법은 token이 필요해서 Leaflet-providers preview - Leaflet Provider Demo에 정의된 코드를 참고하여서 맵을 호출하였다

L.tileLayer(
  'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}',
  {
    attribution:
      'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox.streets',
    accessToken: 'your.mapbox.access.token',
  },
).addTo(mymap);

See the Pen javascript-gis-leaflet by gloria (@gloriaJun) on CodePen.

OpenLayers​

<!DOCTYPE html>
<html lang="en">
  <head>
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"
    />
  </head>
  <body>
    <div id="myMap" class="map"></div>

    <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
    <script>
      const zoom = {
        level: 15,
        maxLevel: 19,
      };

      // 현재의 위치 정보를 가져온다.
      function getLocation() {
        return new Promise((resolve) => {
          navigator.geolocation.watchPosition(function (position) {
            return resolve({
              latitude: position.coords.latitude,
              longitude: position.coords.longitude,
            });
          });
        });
      }

      getLocation().then((location) => {
        const { latitude, longitude } = location;

        new ol.Map({
          target: 'myMap',
          view: new ol.View({
            center: ol.proj.fromLonLat([longitude, latitude]),
            zoom: zoom.level,
          }),
          layers: [
            new ol.layer.Tile({
              source: new ol.source.OSM(),
            }),
          ],
        });
      });
    </script>
  </body>
</html>

See the Pen javascript-gis-openLayers by gloria (@gloriaJun) on CodePen.

Reference​