# HTML에 GitHub Contribution Calendar 삽입하는 방법.

<!-- Prepare a container for your calendar. -->
<script src="https://cdn.rawgit.com/IonicaBizau/github-calendar/gh-pages/dist/github-calendar.min.js"></script>

<!-- Optionally, include the theme (if you don't want to struggle to write the CSS) -->
<link rel="stylesheet" href="https://cdn.rawgit.com/IonicaBizau/github-calendar/gh-pages/dist/github-calendar.css"/>

<!-- Prepare a container for your calendar. -->
<div class="calendar">
    <!-- Loading stuff -->
    Loading the data just for you.
</div>

<script>
    new GitHubCalendar(".calendar", "your-username");
</script>

이 소스코드에서 `"your-usernamne"`부분에 github 이름을 넣어준다.

결과는 내 블로그 하단에...

728x90
반응형

OpenLayers를 사용해서 HTML상에 지도를 띄우는 방법.

1. OpenLayers JS 파일과 CSS파일을 Include 한다.

<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/css/ol.css" type="text/css">

선택 사항으로, 만약 지도가 IE나 안드로이드 v4 환경에서 보여지길 원한다면, OpenLayers script를 Include 하기전에 다음 파일을 Include해 준다.

<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>

2. 지도가 들어갈 div를 만들어 준다. 

<div id="map" class="map"></div>

3. 화면에 보여질 지도의 크기를 CSS로 지정해 준다.

  <style>
    .map {
      height: 400px;
      width: 100%;
    }
  </style>

4. javascript로 지도를 띄워준다.

  let map = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM({
          url: 'https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png'
        })
      })
    ],
    view: new ol.View({
      center: ol.proj.fromLonLat([128.4, 35.7]),
      zoom: 7
    })
  });

5. 결과 화면.

 

 

 

 

 

 

6. JS 코드 분석.

 - OpenLayers Map 객체를 불러 온다.

let map = new ol.Map({ ... });

 - 지도 객체를 <div>에 연결 하기 위한 설정이다. target의 인자로 <div>의 id값을 지정해 준다.

    target: 'map'

 - layers : [ ... ] 배열은 지도에 사용하는 레이어의 목록을 정의하는 리스트다. 
기본적으로 Tile 레이어를 사용한다.

    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      })
    ]

OpenLayers에서 레이어는 소스를 포함하는 유형(벡터, 이미지, 타일)으로 정의된다.

 - View는 지도가 보여줄 중심좌표, 축척, 회전을 지정할 수 있다. 
(기본적인 지도는 축척과 중심좌표만 설정한다)

    view: new ol.View({
      center: ol.proj.fromLonLat([128.4, 35.7]),
      zoom: 7
    })

 

전체 코드 보기 :

https://github.com/JeahaOh/OpenLayersStudy/tree/master/05%20Revision%20OL/01%20Map

 

JeahaOh/OpenLayersStudy

Open Layers JS 5.3 버전을 학습해 보자. Contribute to JeahaOh/OpenLayersStudy development by creating an account on GitHub.

github.com

원본 :

https://openlayers.org/en/latest/doc/quickstart.html

728x90
반응형

'ETC > GIS' 카테고리의 다른 글

좌표계 간략 정리  (0) 2019.11.22
[OpenLayers] 마우스 커서 위치에 대한 지도 좌표 보기  (0) 2019.11.15

jeaha.dev

친구 권유로 블로그를 팠음.
일단 파기만 함...
domains.google에서 jeaha.dev 도메인을 사고, 블로그는 티스토리.

일단 티스토리 블로그 만드는건 간단.

domains.google

  1. 구글 계정으로 로그인.
  2. 사용 가능한 도메인 검색.
  3. 사용할 도메인을 장바구니에 추가.
  4. 장바구니 클릭.
  5. 장바구니 결제클릭
  6. 정보 입력.
  7. 카드 정보 입력.
  8. 구매.

블로그 도메인 연결

티스토리 블로그 주소를 도메인 주소로 연결하는 방법.

  1. Tistory 메인페이지.
  2. 계정 - 운영중인 블로그 - 설정. (Page A)
  3. 관리 - 블로그 - 주소 개인 도메인 설정 탭 확장.
  4. 탭 하단에 설명글 notice.tstory.com/1784 접속. (Page B)
  5. A레코드 등록에서 목적지 IP 확인 (2019.10.31 기준 27.0.236.139)
  6. domains.google의 DNS 설정 페이지 접속. (Page C)
  7. Page C 목록에서 맞춤 리소스 레코드에
    • 이름 : @
    • 유형 : A
    • TTL : 서버가 정보를 캐시해야할 기간을 의미. 최대한 길개 설정하는걸 추천, 일단 1w으로 값을 줬음.
    • IPv4 : 여기에 Page B에서 가져온 IP (2019.10.31 기준 27.0.236.139)를 넣어주고 추가 클릭.
  8. Page A로 돌아가서 개인 도메인 등록.
  9. 약간의 시간이 지난 후 도메인으로 접속하면 페이지 연결 됨.
728x90
반응형

+ Recent posts