소개

webGIS 프로그래밍을 배우는 여정을 시작하는 것은 어려울 수 있습니다. 특히 HTML, CSS, JavaScript의 세계를 처음 접하는 경우에는 더욱 그렇습니다. 다행히 Replit과 같은 도구를 사용하면 간단하고 직접적인 방법으로 학습을 시작할 수 있습니다. 이 문서에서는 MapTiler를 사용하여 간단한 WebGIS 애플리케이션을 생성하는 기본 단계를 안내합니다. 이 튜토리얼에서는 브라우저를 사용하여 어디서나 액세스할 수 있는 대화형 지도를 만드는 방법을 배웁니다.

1단계. Replit에서 계정 및 프로젝트 생성

1. Replit에 가입하세요:

• Relplit 열기
• 오른쪽 상단에 있는 "회원가입" 버튼을 클릭하세요.
• 원하는 등록 방법(Google, GitHub, 이메일)을 선택하세요.
• 등록이 성공적으로 완료되면 Replit 대시보드로 이동됩니다.

2. 새 프로젝트 만들기:

• Replit 대시보드에서 "Create Repl" 버튼을 클릭하세요.
• 템플릿 섹션에서 'HTML, CSS, JS'를 선택하세요.
• 프로젝트 이름을 "WebGIS-Simple"과 같이 지정합니다.
• 프로젝트를 생성하려면 "Create Repl"을 클릭하세요. 프로젝트가 생성되면 index.html, style.css 및 script.js라는 세 가지 주요 파일이 표시됩니다. 이 파일은 웹페이지를 구축하는 데 사용됩니다.

2단계: HTML 구조 설정

1. 기본 HTML 구조 이해:

• Replit에서 index.html 파일을 엽니다.
• index.html은 웹페이지의 구조와 기본 콘텐츠를 결정하는 파일입니다.

2. 지도에 요소 추가:

• index.html의 내용을 다음 코드로 바꿉니다.

    
    
    
    
    
    


    
WebGIS Sederhana Menggunakan MapTiler
    

    

설명:

• : 페이지 제목을 표시합니다.

• : 지도가 표시될 위치입니다.
• Maplibre GL: MapTiler에서 지도를 표시하는 데 사용됩니다.



3단계: CSS로 스타일 추가

1. 지도 보기용 CSS 추가:

• style.css 파일을 엽니다.
• style.css 파일의 내용을 다음 코드로 바꿉니다.

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: Arial, sans-serif;
}

#map {
  width: 100%;
  height: 500px;
  margin-top: 20px;
}

h1 {
  text-align: center;
  color: #333;
}

설명:

• body, html: 지도가 전체 화면을 사용할 수 있도록 여백과 패딩을 설정합니다.
• #map: 지도 크기를 전체 너비와 500픽셀 높이로 설정합니다.
• h1: 페이지 중앙에 제목 표시를 설정합니다.



참고: 이 스타일 섹션은 여기에서 스타일 코드를 확인하여 자신의 디자인과 필요에 따라 조정할 수 있습니다. W3 학교

4단계: MapTiler와 JavaScript 통합

1. MapTiler에서 API 키 가져오기

• MapTiler를 엽니다.
• 오른쪽 상단에 있는 "회원가입"을 클릭하세요.
• 이메일로 등록 양식을 작성하거나 Google 계정을 사용하여 등록하세요.
• 등록 후 MapTiler 대시보드로 이동됩니다.



2. API 키 받기:

• MapTiler 대시보드에서 'API 키' 탭을 클릭하세요.
• MapTiler에서 제공하는 기본 API 키가 표시됩니다.
• 새 API 키를 생성하려면 '새 키 생성' 버튼을 클릭하세요.
• 새 API 키에 "WebGIS-Simple"과 같은 이름을 지정하고 "만들기"를 클릭하세요.
• 방금 생성한 API 키를 복사하세요. 이 API 키는 프로젝트의 지도에 액세스하는 데 사용됩니다.

3. 대화형 지도 만들기:

• script.js 파일을 엽니다.
• script.js에 다음 코드를 추가하세요.

const map = new maplibregl.Map({
  container: 'map', // ID dari elemen div tempat peta akan dirender
  style: 'https://api.maptiler.com/maps/basic/style.json?key=YOUR_MAPTILER_API_KEY', // URL ke gaya peta dari MapTiler dan bagian API KEY masukan API KEY anda
  center: [106.8272, -6.1751], // Koordinat pusat peta (Jakarta)
  zoom: 10 // Level zoom peta
});

설명:

• 컨테이너: index.html에서 ID 맵이 있는 요소를 나타냅니다.
• 스타일: MapTiler의 지도 스타일에 대한 URL입니다. YOUR_MAPTILER_API_KEY를 API 키로 바꾸세요.
• center: 지도 중심(자카르타)의 지리적 좌표입니다.
• 줌: 지도의 초기 확대/축소 수준입니다.



4. 지도에 마커 추가(선택 사항):

• 지도에 마커를 추가하려면 지도 초기화 아래에 다음 코드를 추가하세요.
• 지정된 좌표에 마커가 표시됩니다.

const marker = new maplibregl.Marker()
  .setLngLat([106.8272, -6.1751]) // Koordinat Jakarta
  .addTo(map);



5단계: 프로젝트 실행 및 테스트

1. 실행 중인 프로젝트:

• 코드 작성이 완료되면 Replit에서 "실행" 버튼을 클릭하세요. Replit은 우리가 만든 지도가 포함된 웹 페이지를 엽니다. 결과 관찰:



• MapTiler의 대화형 지도가 웹페이지에 표시됩니다.
• 지도를 확대, 축소하고 이동하여 다양한 부분을 볼 수 있습니다.



다음은 우리가 작성한 Replit의 결과입니다:

우리는 이 간단한 WebGIS 프로젝트를 완료했으며 다음 링크 Simple WebGIS Source에서 결과를 볼 수 있습니다.

이 프로젝트는 HTML, CSS, JavaScript 및 MapTiler API를 사용하여 간단한 WebGIS 애플리케이션을 구축하는 방법을 보여줍니다. 직접 시도해 보거나 이를 기반으로 보다 복잡한 프로젝트를 진행할 수 있습니다.

이 단계를 수행하여 Replit 및 MapTiler를 사용하여 간단한 WebGIS 애플리케이션을 성공적으로 만들었습니다. 이 가이드는 초보자가 대화형 지도를 만드는 방법을 배우면서 HTML, CSS, JavaScript를 사용한 웹 개발의 기본을 이해할 수 있도록 제작되었습니다.

격려와 감사합니다. 도움이 되었기를 바랍니다!