LEAFLET 1 : MENAMBAHKAN TILE MENGGUNAKAN LEAFLET

Leaflet adalah open-source JavaScript library untuk peta web interaktif yang pada saat ini merupakan open-source paling populer pada pembuatan peta web. Kita akan membuat peta yang sederhana terlebih dahulu dan bertahap.

Sebelum kita memulai membuat sebuah webGIS melalui Leaflet kita membutuhkan:

Text editor yang tepat untuk mendesain html, kita dapat menggunakan Notepad ++, Sublime Text, Brackets dan lainya.

Kedua, kita membutuhkan server lokal web dan cara paling mudah adalah menggunakan Python SimpleHTTPServer , berikut cara simplenya :

Untik memulai sebuah server HTTP pada port 8000, buka Command Prompt, kemudian atur sehingga menuju folder Python, tutorial ini menggunakan Python33, pada direktori C:\ dan ketik

“python -m SimpleHTTPServer [port]”

Sekarang kita dapat melihat file dan folder dimana kita bekerja, seperti gambar di bawah

Selanjutnya kita akan membuat peta leaflet sederhana, dan yang kita butuhkan adalah :

• Sebuah halaman HTML
• Leaflet CSS styles

<link rel=“stylesheet” href=“https://unpkg.com/leaflet@1.0.3/dist/leaflet.css&#8221; />

• Leaflet JavaScript library

<script src=“https://unpkg.com/leaflet@1.0.3/dist/leaflet.js&#8221;></script>

• Sebuah elemen <div> sebagai bingkai peta

<div id=“map”></div>

• Lebar dan tinggi yang sepesifik untuk peta.

#mapid { height: 180px; }  atau atur sesui kebutuhan

• Script pendek untuk membuat peta pada <div>

Sekarang kita akan fokus pada isi tag <script>

Kita akan membuat peta dengan titik pusat pada wilayah  sekitar Universitas Gadjah Mada, Yogyakarta, dengan peta latar belakang Openstreetmap. Pertama kita akan membuat variabel yang menjelaskan peta, dan mengatur titik pusat dan level perbesaran peta:

var map = L.map(‘map’).setView([-7.77, 110.37], 15);

L.map () adalah metode untuk membuat atau memasukkan petanya, setView ()adalah metode untuk menentukan titik pusat berdasarakan lintang dan bujur, dan tingkat perbesaran misal 11 x. Akhirnya kita akan mengatur map untuk menggunakan tile yang spesifik dengan L.titlelayer (). Kita akan menggunakan tile openstreetmap tapi jika ingin menggunakan yang lain klik di sini.

L.tileLayer(‘http://{s}.tile.osm.org/{z}/{x}/{y}.png’,

Gunakan addTo () untuk menambahkan tile kedalam peta yan kita buat. Berikut adalah codenya

Dan hasilnya akan seperti dibawah ini, atau klik DISINI untuk melihat hasilnya, karena belum paham cara menyimpannya di web sendiri jadi sementara lewat wix.com, silahkan yang ingin menambahi keterbatasan kami.

Sumber :

http://maptimeboston.github.io/leaflet-intro/

http://leafletjs.com

*** SEMOGA BERMANFAAT ***