Created
March 16, 2017 03:34
-
-
Save swcho/b0e0efa21c26013f2832e52be41345ff to your computer and use it in GitHub Desktop.
Location
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Location</title> | |
| <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"> | |
| <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css"> | |
| <link rel="stylesheet" href="//cdn.jsdelivr.net/xeicon/2/xeicon.min.css"> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script> | |
| <script src="//unpkg.com/vue"></script> | |
| <script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script> | |
| <style type='text/less'> | |
| </style> | |
| <script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?clientId=ohUrf5J3iFn22dtuKIJ6&submodules=panorama"></script> | |
| <link href='https://fonts.googleapis.com/css?family=Dosis' rel='stylesheet' type='text/css'> | |
| <style type='text/less'> | |
| @color_base: #2c3e50; | |
| @import url(https://fonts.googleapis.com/css?family=Dosis); | |
| * { | |
| color: @color_base; | |
| font-family: 'Dosis', sans-serif; | |
| font-weight: bold; | |
| } | |
| body { | |
| position: relative; | |
| } | |
| #map { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: @width; | |
| height: @height; | |
| } | |
| #overlay { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: @width; | |
| height: @height; | |
| // background-image: radial-gradient(ellipse farthest-corner at 45px 45px , #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%); | |
| background-image: radial-gradient(ellipse farthest-corner at 50% 50%, rgba(0, 0, 255, 0) 20%, #29FF0D 95%); | |
| } | |
| @color_shadow: #628AB2; | |
| h1 { | |
| text-align: center; | |
| font-size: 84px; | |
| margin-top: 30px; | |
| } | |
| h2 { | |
| text-align: center; | |
| font-size: 20px; | |
| text-shadow: -1px 0 @color_shadow, 0 1px @color_shadow, 1px 0 @color_shadow, 0 -1px @color_shadow; | |
| } | |
| .error { | |
| display: none; | |
| text-align: center; | |
| margin-top: 40px; | |
| .title { | |
| font-size: 20px; | |
| color: #E82C0C; | |
| } | |
| .text { | |
| font-size: 18px; | |
| margin-top: 8px; | |
| color: #E82C0C; | |
| } | |
| } | |
| // ref: https://codepen.io/jonitrythall/pen/dNJRRK | |
| @colors: #F1725D, #38BDAB, #9D30A5, #B779E2, #683893; | |
| @left: 25px; | |
| @count: 40px; | |
| @timing: 600ms infinite ease-in-out; | |
| @delay: 75ms; | |
| .jelly(@num1, @num2) { | |
| stroke: extract(@colors, @num1); | |
| cx: @left + (@count * @num2); | |
| stroke-width: 3px; | |
| animation: jump @timing; | |
| opacity: .7; | |
| animation-delay: @delay * @num2; | |
| } | |
| .floor(@num2) { | |
| fill: #333333; | |
| opacity: .05; | |
| rx: 0; | |
| ry: 0; | |
| cx: @left + (@count * @num2); | |
| cy: 48px; | |
| animation: shadow @timing; | |
| animation-delay: @delay * @num2; | |
| } | |
| .contain { | |
| position: relative; | |
| margin: 155px auto; | |
| width: 200px; | |
| } | |
| svg { | |
| position: absolute; | |
| ellipse { | |
| transform-origin: center; | |
| } | |
| &:nth-of-type(1) ellipse { | |
| .jelly(1, 0); | |
| } | |
| &:nth-of-type(2) ellipse { | |
| .jelly(2, 1); | |
| } | |
| &:nth-of-type(3) ellipse { | |
| .jelly(3, 2) | |
| } | |
| &:nth-of-type(4) ellipse { | |
| .jelly(4, 3) | |
| } | |
| &:nth-of-type(5) ellipse { | |
| .jelly(5, 4) | |
| } | |
| &:nth-of-type(6) ellipse { | |
| .floor(0) | |
| } | |
| &:nth-of-type(7) ellipse { | |
| .floor(1) | |
| } | |
| &:nth-of-type(8) ellipse { | |
| .floor(2) | |
| } | |
| &:nth-of-type(9) ellipse { | |
| .floor(3) | |
| } | |
| &:nth-of-type(10) ellipse { | |
| .floor(4) | |
| } | |
| } | |
| @stroke-reg: 3px; | |
| @dist: 10px; | |
| @keyframes jump { | |
| 40% { | |
| transform: translateY(@dist * 2) scale(1.3); | |
| opacity: .9; | |
| } | |
| 40% { | |
| rx: @dist; | |
| ry: @dist; | |
| stroke-width: @stroke-reg; | |
| } | |
| 45% { | |
| rx: @dist + 5; | |
| ry: @dist - 3; | |
| stroke-width: @stroke-reg + 1; | |
| } | |
| 55% { | |
| rx: @dist; | |
| ry: @dist; | |
| } | |
| } | |
| @keyframes shadow { | |
| 45% { | |
| opacity: .15; | |
| rx: @dist; | |
| ry: @dist - 7; | |
| transform: translateY(@dist - 5) scale(1.3); | |
| } | |
| } | |
| .wait { | |
| padding-top: 90px; | |
| margin: auto; | |
| width: 210px; | |
| height: 80px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| <div id="overlay"> | |
| <h1><i class='xi-pin-drop'></i></h1> | |
| <h2>Location</h2> | |
| <div class='error'> | |
| <p class='title'>Sorry,</p> | |
| <p class='text'>your browser doesn't support<br/>geolocation API.</p> | |
| </div> | |
| <div class='wait'> | |
| <svg width='210' height='80'> | |
| <ellipse cx='25' cy='20' fill='#1D0333' rx='10' ry='10' fill='none'></ellipse> | |
| </svg> | |
| <svg width='210' height='80'> | |
| <ellipse cx='25' cy='20' fill='#1D0333' rx='10' ry='10' fill='none'></ellipse> | |
| </svg> | |
| <svg width='210' height='80'> | |
| <ellipse cx='25' cy='20' fill='#1D0333' rx='10' ry='10' fill='none'></ellipse> | |
| </svg> | |
| <svg width='210' height='80'> | |
| <ellipse cx='25' cy='20' fill='#1D0333' rx='10' ry='10' fill='none'></ellipse> | |
| </svg> | |
| <svg width='210' height='80'> | |
| <ellipse cx='25' cy='20' fill='#1D0333' rx='10' ry='10' fill='none'></ellipse> | |
| </svg> | |
| <svg width='210' height='80'> | |
| <ellipse cx='25' cy='20' fill='#1D0333' rx='10' ry='10' fill='none'></ellipse> | |
| </svg> | |
| <svg width='210' height='80'> | |
| <ellipse cx='25' cy='20' fill='#1D0333' rx='10' ry='10' fill='none'></ellipse> | |
| </svg> | |
| <svg width='210' height='80'> | |
| <ellipse cx='25' cy='20' fill='#1D0333' rx='10' ry='10' fill='none'></ellipse> | |
| </svg> | |
| <svg width='210' height='80'> | |
| <ellipse cx='25' cy='20' fill='#1D0333' rx='10' ry='10' fill='none'></ellipse> | |
| </svg> | |
| <svg width='210' height='80'> | |
| <ellipse cx='25' cy='20' fill='#1D0333' rx='10' ry='10' fill='none'></ellipse> | |
| </svg> | |
| </div> | |
| </div> | |
| </body> | |
| <script> | |
| less.modifyVars({ 'width': window.innerWidth + 'px', 'height': window.innerHeight + 'px' }); | |
| less.refresh(); | |
| var map = null; | |
| naver.maps.onJSContentLoaded = function() { | |
| if ("geolocation" in navigator) { | |
| navigator.geolocation.getCurrentPosition(function(position) { | |
| console.log(position.coords.latitude, position.coords.longitude); | |
| const lat = position.coords.latitude; | |
| const lng = position.coords.longitude; | |
| map = new naver.maps.Map("map", { | |
| center: new naver.maps.LatLng(lat, lng), | |
| draggable: false, | |
| pinchZoom: false, | |
| scrollWheel: false, | |
| keyboardShortcuts: false, | |
| disableDoubleTapZoom: true, | |
| disableDoubleClickZoom: true, | |
| disableTwoFingerTapZoom: true | |
| }); | |
| var marker = new naver.maps.Marker({ | |
| position: new naver.maps.LatLng(lat, lng), | |
| map: map | |
| }); | |
| $('.wait').hide(); | |
| }); | |
| } else { | |
| $('.error').show(); | |
| } | |
| // 아이디 혹은 지도좌표로 파노라마를 표시할 수 있습니다. | |
| }; | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment