Professional Documents
Culture Documents
Open
Layer
1. OpenLayer
Dasar
OpenLayer
adalah
sebuah
library
yang
mendukung
cara
cepat
untuk
membuat
aplikasi
pemetaan
dan
menampilkanmnya
pada
sebuah
jendela
web
(browser).
Library
ini
membantu
pengembang
dalam
mengintegrasikan
data
dari
berbagai
sumber
melalui
sebuah
API,
dan
menghasilkan
aplikasi
pemetaan
yang
yang
responsif.
Modul
ini
memperkenalkan
konsep
dasar
OpenLayer
untuk
membuat
dan
menampilkan
peta.
1.1. Membuat
Sebuah
Peta
Dalam
OpenLayer,
sebuah
peta
didefinisikan
sebagai
koleksi/kumpulan
beberapa
layer
dan
berbagai
kontrol
yang
berhubungan
dengan
interaksi
pengguna
dengan
aplikasi.
Sebuah
peta,
terbagi
dalam
3
komponen
dasar,
yakni:
markup,
style
declarations,
dan
initialization
code.
1.1.1. Bekerja
dengan
OpenLayer
Perhatikan
contoh
kode
di
bawah
ini:
<!DOCTYPE
html>
<html>
<head>
<title>My
Map</title>
<link
rel="stylesheet"
href="openlayers/theme/default/style.css"
type="text/css">
<style>
#map-id
{
width:
512px;
height:
256px;
}
</style>
<script
src="openlayers/lib/OpenLayers.js"></script>
</head>
<body>
<h1>My
Map</h1>
<div
id="map-id"></div>
<script>
var
map
=
new
OpenLayers.Map("map-id");
var
imagery
=
new
OpenLayers.Layer.WMS(
"Global Imagery", "http://maps.opengeo.org/geowebcache/service/wms", {layers: "bluemarble"} ); map.addLayer(imagery); map.zoomToMaxExtent(); </script> </body> </html>
1. Kopi kode html di atas, simpan dalam folder kerja, dan berinama map.html. 2. Buka file tersebut menggunakan web browser: http://localhost:8080/[folder_kerja_anda]/map.html
Seperti yang telah disajikan sebelumnya pada bagian 2.1.1, sebuah peta dihasilkan melalui integrasi 3 komponen dasar, yakni: markup, style declarations, dan initialization code. Selanjutnya, kita akan membahas lebih detil ketiga komponen tersebut.
2.1.1. Map
Markup
Markup
untuk
peta
pada
contoh
sebelumnya
terdapat
pada
baris
kode
berikut:
<div
id="map-id"></div>
Elemen
<div>
pada
kode
di
atas
akan
berperan
sebagai
kontainer
atau
tempat
untuk
menampilkan
peta.
Pada
contoh
di
atas,
kita
menggunakan
elemen
<div>
,
namun
dapat
pula
menggunakan
elemen
html
lainnya. Pada
contoh
di
atas,
kontainer
tersebut
diberikan
sebuah
atribut
id,
sebagai
penanda
dan
memudahkan
dalam
merujuknya.
2.1.2. Map
Style
OpenLayer
hadir
dengan
sebuah
stylesheet
baku
yang
berkaitan
dengan
bagaimana
sebuah
map
dan
elemen
di
dalamnya
harus
disajikan/ditampilkan.
Pada
contoh
kode
sebelumnya,
secara
explisit,
stylesheet
tersebut
dipanggil
dalam
baris
kode
sebagai
berikut:
<link rel="stylesheet"
href="openlayers/theme/default/style.css"
type="text/css">
Dalam
stylesheet
baku
tersebut,
belum
ditetapkan
ukuran
dari
peta
yang
harus
dsajikan
dalam
browser,
karenanya
kita
harus
menetapkan
ukuran
peta
dengan
membuat
style
baru
yang
berisi
definisi
dari
ukuran
peta
dan
dituliskan
di
dalam
elemen
style,
sebagai
berikut:
<link
rel="stylesheet"
href="openlayers/theme/default/style.css"
type="text/css">
<style>
#map-id
{
width:
512px;
height:
256px;
}
</style>
Berdasarkan kode style di atas, peta yang akan disajikan melalui kontainer yang diberi atribut map-id, memiliki ukuran lebar 512 piksel dan tinggi 256 piksel. Deklarasi style ini, merupakan bagian dari elemen <head> dari sebuah dokumen/halaman html. Dalam desain aplikasi web, umumnya style disimpan dalam sebuah file css yang kemudian dipanggil secara eksplisit dalam halaman html.
2.1.3. Map Initialization Langkah selanjutnya dalam membuat peta, adalah menyertakan beberapa baris kode inisialisasi. Pada contoh di atas, kode-kode tersebut diletakan di dalam elemen
<script>.
<script>
var
map
=
new
OpenLayers.Map("map-id");
imagery
=
new
OpenLayers.Layer.WMS(
"Global
Imagery",
http://maps.opengeo.org/geowebcache/service/wms",
{layers:
"bluemarble"}
);
map.addLayer(imagery);
map.zoomToMaxExtent();
</script>
Kode
inisialisasi
ini
memerlukan
library
OpenLayer.
Oleh
karena
itu,
library
OpenLayer
harus
dipanggil
terlebih
dahulu
dan
diletakan
dalam
elemen
<head>,
sebagaimana
dapat
dilihat
dalam
contoh
sebelumnya,
tertulis:
<script
src="openlayers/lib/OpenLayers.js"></script>
Mari
kita
lihat
lebih
detil
kode
inisialisasi
tersebut.
Pada
baris
pertama
tertulis,
var
map
=
new
OpenLayers.Map("map-id");
Kode
ini
merupakan
perintah
untuk
membuat
sebuah
objek
peta
baru
dengan
nama
variable
map
dan
mengarahkan
letak/tempat
objek
peta
yang
dihasilkan.
Dalam
contoh
ini,
peta
yang
dihasikan
akan
dikembalikan/ditempatkan
pada
atribut
dengan
nama
map-id.
Baris-baris
kode
berikutnya
berisi
perintah-perintah
untuk
menampilkan
peta,
sebagai
berikut:
var
imagery
=
new
OpenLayers.Layer.WMS(
"Global
Imagery",
"http://maps.opengeo.org/geowebcache/service/wms",
{layers:
"bluemarble"}
);
map.addLayer(imagery);
Hal penting yang harus dipahami, bahwa tampilan peta akan merupakan koleksi atau kumpulan dari beberapa layer. Untuk menampilkan peta, minimal satu layer harus ditetapkan dalam kode di atas. Baris kode berikutnya adalah untuk mengatur nilai pembesaran (zoom).
map.zoomToMaxExtent();
Perintah di atas mendefinisikan pembesaran pada nilai maximum extent dari peta, yang secara default dalam koordinat geografis. 2.2. Sumber dan Referensi OpenLayer OpenLayer kaya adalah library yang kaya akan fungsi-fungsi untuk aplikasi pemetaan berbasis web. Developer telah menyusun dan memberikan contoh-contoh dari setiap fungsi-fungsi yang ada dalam OpenLayer, yang memungkinkan developer lainnya melakukan eksplorasi jauh dan bahkan memulai membuatnya dari awal. Beberapa sumber yang bermanfaat untuk eksplorasi OpenLayer: 1. Contoh-contoh penggunaan OpenLayer: http://openlayers.org/dev/examples/ 2. Dokumentasi OpenLayer: http://docs.openlayers.org/ 3. Dokumen Referensi API: http://dev.openlayers.org/apidocs/files/OpenLayers- js.html 4. Bergabung dalam komunitas OpenLayer: 4.1. Users list http://lists.osgeo.org/mailman/listinfo/openlayers-users 4.2. Developers list http://lists.osgeo.org/mailman/listinfo/openlayers-dev