Scribd Logo
Upload

Welcome to Scribd!

  • Tutorial Dasar Menggunakan Open Layer Dalam Bahasa Indonesia

    Uploaded by

    hanjuang2004
    2K views5 pages
    OpenLayer adalah library yang mendukung pembuatan aplikasi pemetaan interaktif yang ditampilkan di browser web. Library ini memungkinkan pengembang mengintegrasikan data dari berbagai sumber melalui API dan menghasilkan aplikasi pemetaan yang responsif. Dokumen ini menjelaskan konsep dasar pembuatan peta di OpenLayer, termasuk markup, deklarasi gaya, dan kode inisialisasi yang dibutuhkan.

    Original Description:

    Tutorial dasar menggunakan Open Layer dalam Bahasa Indonesia.

    Original Title

    Tutorial Dasar Menggunakan Open Layer dalam Bahasa Indonesia

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    OpenLayer adalah library yang mendukung pembuatan aplikasi pemetaan interaktif yang ditampilkan di browser web. Library ini memungkinkan pengembang mengintegrasikan data dari berbagai sumber melalui API dan menghasilkan aplikasi pemetaan yang responsif. Dokumen ini menjelaskan konsep dasar pembuatan peta di OpenLayer, termasuk markup, deklarasi gaya, dan kode inisialisasi yang dibutuhkan.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    2K views5 pages

    Tutorial Dasar Menggunakan Open Layer Dalam Bahasa Indonesia

    Uploaded by

    hanjuang2004
    OpenLayer adalah library yang mendukung pembuatan aplikasi pemetaan interaktif yang ditampilkan di browser web. Library ini memungkinkan pengembang mengintegrasikan data dari berbagai sumber melalui API dan menghasilkan aplikasi pemetaan yang responsif. Dokumen ini menjelaskan konsep dasar pembuatan peta di OpenLayer, termasuk markup, deklarasi gaya, dan kode inisialisasi yang dibutuhkan.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 5

    Pengenalan

    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

    2.1. Bagian dari Peta

    Tampilan dalam jendela web browser.

    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

    You might also like