routo Developers

커스텀 popup 생성

routogl 지도에 커스텀 팝업을 생성하는 예제입니다.
팝업 태그의 클래스명을 이용하여 직접 CSS를 수정하여 스타일 커스텀을 진행할 수 있습니다.

const map = new routogl.Map({
  container: 'map', // container ID
  style: routogl.RoutoStyle.LIGHT,
  center: [127.0586339, 37.507009], // 초기 위치 [lng, lat]
  zoom: 17, // 초기 줌 레벨
});

const markerHeight = 10;
const markerRadius = 10;
const linearOffset = 25;
const popupOffsets = {
    'top': [0, 0],
    'top-left': [0, 0],
    'top-right': [0, 0],
    'bottom': [0, -markerHeight],
    'bottom-left': [linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
    'bottom-right': [-linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
    'left': [markerRadius, (markerHeight - markerRadius) * -1],
    'right': [-markerRadius, (markerHeight - markerRadius) * -1]
};

// 팝업 생성
const popup = new routogl.Popup({
  offset: popupOffsets,
  className: 'my-class',
  closeButton: true
}).setLngLat([127.0586339, 37.507009])
  .setHTML("<span>커스텀 팝업</span>")
  .setMaxWidth("500px")
  .addTo(map);

// 팝업 컨텐츠 DIV
const contentDiv = document.querySelector('.mapboxgl-popup-content');
contentDiv.style.width = '150px';
contentDiv.style.backgroundColor = 'yellow';

// 말풍선 하단 삼각형 Tip DIV
const tipDiv = document.querySelector('.mapboxgl-popup-tip');
tipDiv.style.borderTopColor = 'yellow';

// 닫기 Button
const closeButton = document.querySelector('.mapboxgl-popup-close-button');
closeButton.style.width = '50px';
closeButton.style.border = '1px solid black';
closeButton.style.backgroundColor = 'white';
closeButton.style.padding = '5px';
closeButton.textContent = '닫기';

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    
    <title>routo Developers - 오버레이 - 커스텀 popup 생성</title>
    <link href="https://api.mapbox.com/mapbox-gl-js/v3.7.0/mapbox-gl.css" rel="stylesheet">
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
    />
    <style>html, body { margin: 0; padding: 0; } div#map { width: 100%; height: 50vh; }</style>
  </head>
  <body>
    <main>
      <div class="container">
        <header
          class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom"
        >
          <a
            href="/"
            class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none"
          >
            <span class="fs-4">routo Map Examples</span>
          </a>

          <nav aria-label="breadcrumb">
            <ol class="breadcrumb p-3 bg-body-tertiary rounded-3"></ol>
          </nav>
        </header>

        <examplecontent>
          
          <h2 id="title" class="mb-5">커스텀 popup 생성</h2>
          <hr/>
          
          <p id="desc" class="text-start text-break fs-5">
            routogl 지도에 커스텀 팝업을 생성하는 예제입니다.
            <br/>
            팝업 태그의 클래스명을 이용하여 직접 CSS를 수정하여 스타일 커스텀을 진행할 수 있습니다.
          </p>

          <!-- 지도 -->
          <div id="map" class="mb-3 map"></div>
        </examplecontent>
      </div>
    </main>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://stg-api.routo.com/v3/maps/map?key=c914fb43-0d44-4fa7-838a-84619e3486c3"></script>
  
  
  <script>
const map = new routogl.Map({
  container: 'map', // container ID
  style: routogl.RoutoStyle.LIGHT,
  center: [127.0586339, 37.507009], // 초기 위치 [lng, lat]
  zoom: 17, // 초기 줌 레벨
});

const markerHeight = 10;
const markerRadius = 10;
const linearOffset = 25;
const popupOffsets = {
    'top': [0, 0],
    'top-left': [0, 0],
    'top-right': [0, 0],
    'bottom': [0, -markerHeight],
    'bottom-left': [linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
    'bottom-right': [-linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
    'left': [markerRadius, (markerHeight - markerRadius) * -1],
    'right': [-markerRadius, (markerHeight - markerRadius) * -1]
};

// 팝업 생성
const popup = new routogl.Popup({
  offset: popupOffsets,
  className: 'my-class',
  closeButton: true
}).setLngLat([127.0586339, 37.507009])
  .setHTML("<span>커스텀 팝업</span>")
  .setMaxWidth("500px")
  .addTo(map);

// 팝업 컨텐츠 DIV
const contentDiv = document.querySelector('.mapboxgl-popup-content');
contentDiv.style.width = '150px';
contentDiv.style.backgroundColor = 'yellow';

// 말풍선 하단 삼각형 Tip DIV
const tipDiv = document.querySelector('.mapboxgl-popup-tip');
tipDiv.style.borderTopColor = 'yellow';

// 닫기 Button
const closeButton = document.querySelector('.mapboxgl-popup-close-button');
closeButton.style.width = '50px';
closeButton.style.border = '1px solid black';
closeButton.style.backgroundColor = 'white';
closeButton.style.padding = '5px';
closeButton.textContent = '닫기';</script>
</html>

WEB GL JS

커스텀 popup 생성