Membuat Sistem Informasi Cuaca Dengan Leaflet Wheater

Dipublikasikan oleh El Cicko pada

cropped blake connally IKUYGCFmfw4 unsplash

leaflet-wheatherHampir 1 minggu ini Kota Bandung diguyur hujan dan pada moment itulah akhirnya jas hujan saya jadi sering dipakai. Ya, cuaca ekstrim yang melanda beberapa kota di Indonesia terutama Bandung dan Jakarta saat ini emang kadang susah banget buat diprediksi. Jadi siap-siap aja ya guys buat mengarungi kolam di jalanan. 😀

Ngomong-ngomong soal cuaca ekstrim, dulu saya pernah menulis artikel tentang bagaimana membuat Sistem Informasi Cuaca dengan menggunakan Google Maps. Nah, sekarang kita akan mencoba membuat sistem yang sama. Ya! kita akan membuat Sistem Informasi Cuaca dengan Leaflet Wheater. API ini saya dapatkan di library http://openweathermap.org . Jadi kamu bisa langsung liat hasil akhirnya disana

Cara penggunaannya pun sangat mudah, kita hanya tinggal memanggil file library dari Open Wheather Map dan juga Leaflet Layer. Buka texteditor kamu dan ketikkan script berikut ini

<script src="https://leaflet.cloudmade.com/dist/leaflet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://openweathermap.org/js/leaflet-layer.js"></script>
<div id="map" style="width: 100%; height: 100%;"></div>
<script>
    var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    osmAttribution = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
    osmLayer = new L.TileLayer(osmUrl, {maxZoom: 18, attribution: osmAttribution});
    
    var map = new L.Map('map');
    
    // koordinat kota bandung dan juga zoom view-nya. kamu bisa rubah disini
    map.setView(new L.LatLng(-6.92202, 107.60645), 11)
    map.addLayer(osmLayer);
    
    var validatorsLayer = new OsmJs.Weather.LeafletLayer({lang: 'ru'});
    
    map.addLayer(validatorsLayer);
</script>

Nah, dari script diatas output yang dihasilkan seharusnya seperti ini

lab-leaflet-wheater

 

Nah, gampang khan? Selamat mencoba dan semoga bermanfaat 😀

 


El Cicko

Nama saya Riky Fahri Hasibuan, Saya yang biasa nulis di blog ini. Blog ini adalah sarana dokumentasi dari apa yang saya kerjakan dan tidak ada salahnya juga saya sebarkan. Jika artikel di blog bermanfaat, kamu bisa memberikan apresiasi pada blog ini dengan memberikan donasi pada blog ini.

0 Komentar

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *