sparta42 · seongwpa · Jun 9, 2021 · Jun 9, 2021
diff --git a/icon/.DS_Store b/icon/.DS_Store
diff --git a/icon/curr_pos.png b/icon/curr_pos.png
diff --git a/icon/minus.png b/icon/minus.png
diff --git a/icon/plus.png b/icon/plus.png
diff --git a/index.html b/index.html
@@ -1 +1 @@
-<!doctype html><html><head><meta charset="utf-8"><title>Sparta front</title><script defer="defer" src="main.bundle.js"></script></head><body></body></html>
+<!doctype html><html><head><meta charset="utf-8"><title>Sparta front</title><script defer="defer" src="main.bundle.js"></script></head><body><div class="loginField"><div class="login"><h2>Login</h2><div class="loginSocial"><button type="button" class="btn42"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/42_Logo.svg/1024px-42_Logo.svg.png" height="40px," weight="20px" alt="42logo"></button></div></div></div></body></html>
diff --git a/main.bundle.js b/main.bundle.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/public/index.html b/public/index.html
@@ -1,10 +1,13 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta charset="utf-8">
-        <title>Sparta front</title>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
+        <title>간단한 지도 표시하기</title>
     </head>
     <body>
-
+        <div>
+        </div>
     </body>
-</html>
+</html>
diff --git a/public/style.scss b/public/style.scss
@@ -1,5 +1,9 @@
-$body-color: red;
+.btn_img {
+	width: 10px;
+	height: 10px;
+	cursor: pointer;
+}
 
-body {
-  color: $body-color;
-}
+.map_img {
+	cursor: pointer;
+}
diff --git a/srcs/index.js b/srcs/index.js
@@ -1,24 +1,99 @@
-const app = elem => {
-  const state = {text: 1};
+import '../public/style.scss'
+const mapsUrl = 'https://naveropenapi.apigw.ntruss.com/map-static/v2/raster-cors?'
 
-  const $elem = document.querySelector(elem);
+let latitude = undefined
+let longitude = undefined
+let width = 800
+let height = 700
+let centerX = 127.061838
+let centerY = 37.490211
+let levelDist = 16 * 10
+let level = 16
+let apiKeyID = '9cdskm4clv'
 
-  const render = () => {
-    $elem.innerHTML = `
-      <h1>
-        ${state.text}
-      </h1>
-    `;
-  };
+navigator.geolocation.getCurrentPosition((pos) => {
+    latitude = pos.coords.latitude
+    longitude = pos.coords.longitude
+    if (latitude === undefined || longitude === undefined)
+        alert('can\'t load current position!')
+    else console.log(longitude, latitude)
+})
+const elem = document.createElement('div')
+loadMap()
+function loadMap() {
+    elem.innerHTML = `
+    <div>
+        <img id='mapsApi' class='map_img' src=${mapsUrl}w=${width}&h=${height}&center=${centerX},${centerY}&level=${level}&X-NCP-APIGW-API-KEY-ID=${apiKeyID}>
+        <img id='currPos' class='btn_img' src='./../icon/curr_pos.png'>
+        <img id='zoomUp' class='btn_img' src='./../icon/plus.png'>
+        <img id='zoomDown' class='btn_img' src='./../icon/minus.png'>
+    </div>
+    `
 
-  $elem.addEventListener('click', () => {
-    state.text = state.text + 1;
-    render();
-  });
+    document.querySelector('div').appendChild(elem)
+    document.getElementById('mapsApi').addEventListener("wheel", wheelEvent)
+    document.getElementById('currPos').addEventListener('click', currPoint)
+    document.getElementById('zoomUp').addEventListener('click', () => {
+        if (level < 19)
+            level += 1
+        levelDist = level * 10
+        loadMap()
+    })
+    document.getElementById('zoomDown').addEventListener('click', () => {
+        if (level > 5)
+            level -= 1
+        levelDist = level * 10
+        loadMap()
+    })
+    document.getElementById('mapsApi').addEventListener('click', (e) => {
+        let latLng = calLatitudeLongitude(e.offsetX, e.offsetY)
+        centerX = latLng[0]
+        centerY = latLng[1]
+        console.log(latLng[0], latLng[1])
+        loadMap()
+    })
+}
 
-  render();
 
-  return $elem;
-};
+function wheelEvent() {
+    window.onmousewheel = function(e) {
+        if (e.wheelDelta === -120 && levelDist / 10 > 5)
+            levelDist -= 1;
+        else if (e.wheelDelta === 120 && levelDist / 10 < 18)
+            levelDist += 1;
+    }
+    if (level != parseInt(levelDist / 10))
+    {
+        level = parseInt(levelDist / 10)
+        loadMap()
+    }
+}
 
-app('body');
+function currPoint() {
+    if (centerX !== latitude & centerY !== longitude) {
+        navigator.geolocation.getCurrentPosition((pos) => {
+            latitude = pos.coords.latitude
+            longitude = pos.coords.longitude
+        })
+        if (longitude === undefined || latitude === undefined)
+            alert('can\'t load current position!')
+        else {
+            centerX = longitude
+            centerY = latitude
+        }
+        loadMap()
+    }
+}
+
+function calLatitudeLongitude(w, h) {
+    let C = (256 / (2 * Math.PI)) * Math.pow(2, level + 1)
+    let x = C * (centerX * Math.PI / 180 + Math.PI)
+    let y = C * (Math.PI - Math.log(Math.tan((Math.PI / 4) + centerY * Math.PI / 180 / 2)))
+    let xp = x - (width / 2 - w)
+    let yp = y - (height / 2 - h)
+    let M = (xp / C) - Math.PI
+    let N = -(yp / C) + Math.PI
+    let lon_p = M / Math.PI * 180
+    let lat_p = ((Math.atan(Math.exp(N)) - (Math.PI / 4)) * 2) / Math.PI * 180
+    return [lon_p, lat_p]
+}
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!doctype html><html><head><meta charset="utf-8"><title>Sparta front</title><script defer="defer" src="main.bundle.js"></script></head><body></body></html>
		<!doctype html><html><head><meta charset="utf-8"><title>Sparta front</title><script defer="defer" src="main.bundle.js"></script></head><body><div class="loginField"><div class="login"><h2>Login</h2><div class="loginSocial"><button type="button" class="btn42"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/42_Logo.svg/1024px-42_Logo.svg.png" height="40px," weight="20px" alt="42logo"></button></div></div></div></body></html>