leaflet 사용 예제

구현지도

소스코드

<!DOCTYPE html>
<html>

<head>
   <title>지오빅데이터 오픈플랫폼 오픈API leaflet 샘플</title>
   <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
     integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
     crossorigin=""/>
   <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
     integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
     crossorigin=""></script>
</head>

<body>
   <div id="map" style="height: 70vh"></div>
   <div id="info"></div>

<script>
   var map = L.map('map').setView([35.95377809315542, 128.17342348527225], 8);
   L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
   maxZoom: 19,
   attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
   }).addTo(map);

  L.tileLayer.wms('https://data.kigam.re.kr/openapi/wms',{
     layers: 'L_250K_Geology_Map',
     key: '인증키',
    FORMAT: 'image/png',
    transparent: true
  }).addTo(map);
   </script>
</body>
</html>