routo Developers

Animate Marker

routogl 지도에 애니메이션 효과가 적용된 마커를 생성/삭제하는 예제입니다.

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

// 애니메이션 마커 Element 생성
const markerEl = document.createElement('div');
const markerInner = document.createElement('div');
markerInner.className = 'marker';
markerEl.appendChild(markerInner);

// 애니메이션 마커
let marker;
let markerRendered = false;

const btn = document.getElementById('btn');
btn.addEventListener('click', (e) => {  
  if (!markerRendered) {
      // 애니메이션 마커 생성
      marker = new routogl.Marker(markerEl)
          .setLngLat([127.0586339, 37.507009])
          .addTo(map);
      e.target.textContent = '애니메이션 마커 삭제';
      markerRendered = true;
  } else {
      // 애니메이션 마커 삭제
      marker.remove();
      e.target.textContent = '애니메이션 마커 추가';
      markerRendered = false;
  }
});

<!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 - 신규기능 - Animate Marker</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>
  
<style>
@charset "UTF-8";

/* 애니메이션 마커 스타일 */
.marker {
  background-image: url('https://docs.mapbox.com/mapbox-gl-js/assets/coffee-cup-marker.svg');
  background-size: contain;
  background-position-x: 50%;
  background-repeat: no-repeat;
  border-radius: 50%;
  cursor: pointer;
  transition-property: width, height;
  transition-duration: 0.1s;
  transition-timing-function: linear;
  /* Define Marker Animation */
  animation:
    pop-in 0.3s ease-out forwards,
    wobble 1.5s ease-in-out 0.3s forwards;
  transform-origin: bottom center;
}

/* 애니메이션 마커 하단에 삼각형 스타일 */
.marker::before {
  content: '';
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #365874;
  display: block;
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
}

/* Keyframe을 이용한 애니메이션 효과(pop-in) 스타일 */
@keyframes pop-in {
  0% {
    width: 0px;
    height: 0px;
    opacity: 0;
    box-shadow: none;
  }

  70% {
    width: 55px;
    height: 55px;
    opacity: 1;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.4);
    /* Add a subtle shadow */
  }

  85% {
    width: 48px;
    height: 48px;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
    /* Shrink shadow with wobble */
  }

  100% {
    width: 50px;
    height: 50px;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
    /* Final shadow size */
  }
}

/* Keyframe을 이용한 애니메이션 효과(wobble) 스타일 */
@keyframes wobble {
  0% {
    transform: rotate(0deg);
  }

  20% {
    transform: rotate(2.5deg);
  }

  50% {
    transform: rotate(-2deg);
  }

  65% {
    transform: rotate(1deg);
  }

  100% {
    transform: rotate(0deg);
  }
}</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">Animate Marker</h2>
        <hr />
        
        <p id="desc" class="text-start text-break fs-5">
          routogl 지도에 애니메이션 효과가 적용된 마커를 생성/삭제하는 예제입니다.
        </p>

        <!-- 지도 -->
        <div id="map" class="mb-3 map"></div>

        <div id="control" class="mb-3">
          <button id="btn" class="button" style="margin-bottom: 5px;">애니메이션 마커 추가</button>
        </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, // 초기 줌 레벨
});

// 애니메이션 마커 Element 생성
const markerEl = document.createElement('div');
const markerInner = document.createElement('div');
markerInner.className = 'marker';
markerEl.appendChild(markerInner);

// 애니메이션 마커
let marker;
let markerRendered = false;

const btn = document.getElementById('btn');
btn.addEventListener('click', (e) => {  
  if (!markerRendered) {
      // 애니메이션 마커 생성
      marker = new routogl.Marker(markerEl)
          .setLngLat([127.0586339, 37.507009])
          .addTo(map);
      e.target.textContent = '애니메이션 마커 삭제';
      markerRendered = true;
  } else {
      // 애니메이션 마커 삭제
      marker.remove();
      e.target.textContent = '애니메이션 마커 추가';
      markerRendered = false;
  }
});</script>

</html>

WEB GL JS

Animate Marker