ngode.in: javascript

Belajar Angular JS (Kalkulator Sederhana)

8:15 AM

Membuat WebGIS Tanpa Coding

3:06 PM

Kebanyakan orang berpikir membuat suatu webgis itu rumit karena membutuhkan keahlian pemrograman tertentu yang harus dipelajari dan dihapal selama bertahun tahun :D

Pada tutorial ini akan dijelaskan cara yang cukup mudah untuk membuat suatu webgis sederhana, kita hanya perlu menggunakan software QGIS yang tersedia secara free dan open source. Untuk karena itu terlebih dahulu kita harus menginstal software QGIS pada komputer kita.

Untuk download installer QGIS bisa langsung ke website aslinya di http://www.qgis.org/en/site/

Buat yang belum tau apa itu QGIS, QGIS adalah sebuah software yang berguna untuk membuat, mengedit, memvisualisasi, analisi dan menyajikan informasi geospasial.

Untuk webgis yang akan kita buat nanti menggunakan bantuan plugin QGIS yang bernama qgis2leaf. Qgis2leaf adalah plugin yang berguna untuk melakukan export peta yang dibuat di QGIS menjadi suatu webgis yang berbasis leaflet (Untuk apa itu leaflet bisa dilihat pada tutorial-tutorial saya sebelumnya).

Berikut langkah-langkah dalam membuat webgis nya.

Pertama-tama tentu anda harus menginstall software QGIS yang telah didownload tadi. Setelah itu buka QGIS desktop dan instal plugin qgis2leaf dengan klik pada menu plugin-Manage and install plugin.

Plugin - Manage and install plugin

Search plugin qgis2leaf, lalu install plugin

search qgis2leaf lalu install

Karena saya sudah menginstall plugin ini sebelumnya jadi tidak muncul pilihan install plugin nya.. :D

Jika proses instalasi terkendala karena ada proxy, bisa diatur pada menu Setting-Options-Network.

Setelah itu kita buat peta nya, sekarang kita akan membuat peta sederhana provinsi indonesia. Untuk SHP provinsi nya bisa googling sendiri, banyak sekali yang telah menyediakan secara gratis.

Jika sudah ada SHP nya kita masukkan ke software QGIS kita, lihat pada menu toolbar di sebelah kiri dan pilih add vector layer

add vector layer

Browse file SHP provinsi indonesia yang telah di download

browse shp

Setelah itu lihat menu di bagian atas,pilih web -> qgis2leaf

menggunakan plugin qgis2leaf

Ketika masuk ke window qgis2leaf, kita dapat mengatur properties dari webgis yang akan kita buat.

qgis2leaflet window

Klik Get Layers, untuk mendapatkan layer yang telah kita masukkan sebelumnya pada software QGIS. Untuk frame width/heights kita gunakan full screen terlebih dahulu, atur Output Project Folder, Webmap name, title, dan subtitle sesuai keinginan anda. Klik OK untuk melakukan export peta QGIS ke WebGIS Leaflet. Dan Hasilnya kurang lebih akan seperti berikut

Mudah bukan, peta webgis hasil export tersebut sudah memiliki fungsi show/hide layer dan juga bisa menampilkan informasi yang ada pada polygon (shp yang kita masukkan sebelumnya) ketika provinsi tertentu di klik.

Sekian tutorial kali ini, semoga bermanfaat,

bersambung,..

GBU

credit to : Ujaval Gandhi Website

GIS

Pencarian Lokasi(Geosearch) Menggunakan Leaflet (Part 2)

8:40 AM

GIS

Pencarian Lokasi(Geosearch) Menggunakan Leaflet

3:32 PM

Kali ini saya akan memperkenalkan plugin leaflet yang bernama Geosearch, plugin ini dapat digunakan untuk mencari lokasi berdasarkan alamat tertentu atau lebih dikenal dengan nama geocoding.

Sebelum itu pastikan anda sudah mempunyai file leaflet dan juga plugin geosearch nya

Leaflet dapat di download di http://leafletjs.com

Dan untuk plugin Geosearch bisa langsung download di https://github.com/smeijer/L.GeoSearch

Secara default kita bisa menggunakan beberapa geocoding service yang disediakan oleh plugin ini, antara lain adalah Esri, Google Maps, dan OpenStreetMap. Untuk tutorial kali ini saya akan memberikan contoh dengan menggunakan geocoding service dari Google Maps, untuk yang lain bisa dicoba sendiri.

Untuk menggunakan plugin ini tentunya pertama kita harus include plugin ini di project leaflet kita.

Css:

<link rel="stylesheet" href="geosearch/src/css/l.geosearch.css" />

js:

<script src="geosearch/src/js/l.control.geosearch.js"></script>

<script src="geosearch/src/js/l.geosearch.provider.google.js"></script>

Sesuaikan link dari file css dan js di atas dengan letak dan nama file plugin Leaflet.Geosearch anda. Selain itu bisa kita lihat juga pada baris ke dua script include bahwa kita menggunakan provider dari google, untuk yang lainnya bisa anda coba sendiri.

Untuk menambahkan plugin ini supaya terlihat di dalam peta cukup gunakan script berikut:

new L.Control.GeoSearch({

provider: new L.GeoSearch.Provider.Google(),

position: 'topcenter',

showMarker: true

}).addTo(map);

Untuk kode lengkap sampai dengan menampilkan peta adalah sebagai berikut:

dan untuk hasilnya kurang lebih seperti berikut:

Cukup mudah bukan, next tutorial masih akan membahas plugin ini, yaitu cara mengetahui koordinat dari marker yang ditampilkan oleh plugin geosearch, tujuannya supaya nantinya koordinat yang ada dapat digunakan untuk pengembangan lebih lanjut seperti routing, penyimpanan alamat, dan lain sebagainya.

nb: jika ada kesalahan pada kodingan lengkapnya bisa diperbaiki sendiri untuk belajar. Ganti scrip dengan script

Sekian, GBU

GIS

Leaflet Awesome Marker

8:33 AM

GIS

Membuat Peta Interaktif Jumlah Penduduk Indonesia (E book)

11:38 PM

alpro

Belajar Javascript (if else statements)

2:31 PM

alpro

Belajar Javascript

2:10 PM

GIS

Membuat WebGIS Peta Puskesmas Gunungkidul Menggunakan Leaflet dan Geoserver (Part 2)

10:08 AM

Pada postingan sebelumnya saya membahas tentang bagaimana menampilkan peta dan marker menggunakan data dari Geoserver dan Leaflet Javascript Library.

Part 1-Membuat WebGIS Puskesmas GK Leaflet dan Geoserver

Karena masih ada fitur yang kurang pada part 1 kemarin, maka sekarang saya akan melengkapi kekurangan fitur tersebut.

Membuat WebGIS Peta Puskesmas Gunungkidul Menggunakan Leaflet dan Geoserver (Part 2)

Tentunya ketika kita berhadapan dengan suatu webGIS, biasanya disediakan pilihan peta, apakah itu peta jalan, satelit, dsb.

Nah sekarang akan kita tambahkan pilihan layer tersebut pada peta kita.

Masukkan kode berikut pada fungsi initialize

Kode diatas akan menghasilkan 3 jenis layer, yaitu peta jalan, peta satelit, dan hybrid(campuran jalan dan satelit), silakan test pada browser, jika terdapat pilihan layer di sebelah kanan atas berarti kode diatas berhasil.

Setelah itu kita akan mengganti icon dari puskesmas dengan icon yang lebih merepresentasikan suatu puskesmas. .

Kode diatas digunakan untuk mengganti icon, silakan ganti iconUrl dengan icon milik anda sendiri

Dan pada marker ganti kodenya menjadi seperti berikut, kode ini nanti sekalian digunakan untuk getDirections

Pada WebGIS biasanya juga tersedia fitur routing yang menampilkan rute jalan dari suatu tempat ke tempat lain, tambahkan kode berikut pada fungsi initialize

dan juga tambahkan fungsi berikut untuk getDirections,

fungsi getDirections diatas belum bisa dijalankan karena kita belum tau posisi awal dari start request. Untuk itu kita perlu menambahkan pilihan lokasi user dengan fitur geocoding. Maka tambahkan kode html berikut dibawah map id

Dan tambahkan fungsi geocoding berikut

Dalam geocoding kita menggunakan bantuan dari Google Maps Geocoding service untuk menemukan lokasi dari tempat yang kita input.

Oh iya, jangan lupa juga masukkan API Key untuk akses ke MapQuest Routing Plugin agar getDirection bisa berjalan

Berikut kode javascript lengkap dari aplikasi kita

Jika kode anda benar maka tampilan aplikasi kita akan menjadi seperti berikut

Geoserver Leaflet WebGIS Puskesmas Gunungkidul

Semoga Bermanfaat, GBU ^_^

GIS

Membuat WebGIS Peta Puskesmas Gunungkidul Menggunakan Leaflet dan Geoserver

8:20 AM

alpro

Simple Calculator Javascript

5:43 AM

Aplikasi Javascript

Hehe, iseng-iseng ngerjain soal yang ada di majalah nyankod tentang javascript kalkulator dan akhirnya selesai juga. .

untuk memulainya yang diperlukan hanyalah text editor(notepad) dan browser biasa saja karena javascript bisa berjalan di sisi client. Berikut adalah hasil dari program kalkulator javascript yang telah selesai dibuat.

untuk membuatnya kita hanya membutuhkan kode javascript dan html yang cukup sederhana seperti di bawah ini

<html>
<head>
    <script type="text/javascript">
        function hasil(a,b,x){
            if(x=="plus"){
            c=parseFloat(a)+parseFloat(b);
            document.getElementById("hasil").value=c;
            }
            else if(x=="min"){
            c=parseFloat(a)-parseFloat(b);
            document.getElementById("hasil").value=c;
            }
            else if(x=="kali"){
            c=parseFloat(a)*parseFloat(b);
            document.getElementById("hasil").value=c;
            }
            else if(x=="bagi"){
            c=parseFloat(a)/parseFloat(b);
            document.getElementById("hasil").value=c;
            }
            }
    </script>
</head>
<body>
    <input type="text" id="a" />
    <select id="x">
        <option value="plus">+</option>
        <option value="min">-</option>
        <option value="kali">*</option>
        <option value="bagi">/</option>
    </select>
    <input type="text" id="b" />
    <button id="proses" onclick="hasil(document.getElementById('a').value,document.getElementById('b').value,document.getElementById('x').value) ">
    =
    </button>
    <input type="text" id="hasil" />
</body>
</html>

inti dari kode diatas adalah mengambil nilai yang ada di text box pertama(a) dan text box kedua(b), juga mengambil value dari drop down list(x) lalu melemparnya ke fungsi javascript yang ada (hasil). . proses penghitngan menggunakan if else condition karena penghitungannya berdasarkan nilai dari x(nilai dropdown list yang dipilih). Setelah dilakukan penghitungan maka hasil akan akan ditampilkan di textbox hasil.

Belajar Angular JS (Kalkulator Sederhana)

Membuat WebGIS Tanpa Coding

Pencarian Lokasi(Geosearch) Menggunakan Leaflet (Part 2)

Pencarian Lokasi(Geosearch) Menggunakan Leaflet

Leaflet Awesome Marker

Membuat Peta Interaktif Jumlah Penduduk Indonesia (E book)

Membuat Peta Interaktif Jumlah Penduduk Indonesia (E book)

Belajar Javascript (if else statements)

Belajar Javascript

Belajar Javascript

Hello World Javascript

Membuat WebGIS Peta Puskesmas Gunungkidul Menggunakan Leaflet dan Geoserver (Part 2)

Part 1-Membuat WebGIS Puskesmas GK Leaflet dan Geoserver

Membuat WebGIS Peta Puskesmas Gunungkidul Menggunakan Leaflet dan Geoserver (Part 2)

Membuat WebGIS Peta Puskesmas Gunungkidul Menggunakan Leaflet dan Geoserver

Membuat WebGIS Peta Puskesmas Gunungkidul Menggunakan Leaflet dan Geoserver

Membuat WebGIS Peta Puskesmas Gunungkidul Menggunakan Leaflet dan Geoserver (Part 2)

Simple Calculator Javascript

Aplikasi Javascript

Follow Us

Labels

Popular Posts

recent posts

Recent Comments

Blog Archive

adsense ngode.in

Instagram