
Leaflet, javascript ile harita üzerinde işlemler yapmanıza olanak veren bir açık kaynaklı kütüphane. Open Street Map‘ten aldığı harita verileri üzerinde işlem yapmaya olanak veriyor. Nedir ne değildir öğrenmek adına basit bir uygulama geliştirmek istedim. Leaflet ile Haritada Son Depremleri Gösterme uygulaması, basitçe AFAD sistesinden aldığı güncel deprem verilerini leaflet harita üzerinde markerlayarak gösteriyor.
Öncelikle veriye ihtiyacımız var, verileri çekmek için AFAD’ın sitesinde yayınlanan güncel deprem listesini çekmem gerekti. Malesef Json ya da XML tarzı bir kaynak bulunmuyor. Bende basit bir php scripti ile verileri çekip işim olan yerleri json olarak döndürdüm. Şu adres son depremleri verecektir:
https://www.sezercoban.com/api/deprem/
Şimdi harita işlemlerine geçelim. Öncelikle leaflet‘in js ve css dosyası ile jquery’i sayfamıza ekliyoruz.
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" /> <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin="" ></script> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
Haritada kullanılacak marker’ları daha düzgün yapmak adına bir kaç css sınıfı ekleyelim:
#map { height: 400px; } .depremMarker { background-color: transparent; border: none; } .markerTitle{ background-color:white; color: #000; word-wrap: none; text-align: center; }
Haritamızın yer alacağı divi gösterelim;
<div id="map"></div>
Sıra geldi haritayı oluşturup verileri almaya. Önce haritayı initialize edecek ayarlamaları yapıyoruz:
const mymap = L.map('map').setView([0, 0], 1); const attribution = '© <a href="https://www.sezercoban.com">www.sezercoban.com</a> LeafLet Demo'; const tileUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'; const tiles = L.tileLayer(tileUrl, { attribution }); tiles.addTo(mymap); var layerGroup = L.layerGroup().addTo(mymap); mymap.setView([39, 34.90], 6);
Şimdide fetch edip harita üzerine markerları ekleyecek asenkron fonksiyonu yazalım. Fonksiyon açıklamalarını inline olarak yazıyorum:
//verilerin cekilecegi adres const api_url = 'http://localhost:90/depremler.php'; async function getDepremler() { console.log("Depremler listesi getiriliyor.."); const response = await fetch(api_url); //adrese git const data = await response.json();//adresteki content'i json olarak al. deletedepremler(); //harita üzerindeki markerları si for (var i = 0 ; i < 20; i++) {//gelen verilerden 20 tanesini yaz var d = data[i]; var lon = d.lon; var lat = d.lat; var time = d.time; var mag = d.m; var location = d.city + " " + d.district ; var other = d.other; var name = location.trim().length > 3 ? location : other ; //console.log(i + " : " + time + " -- "+ long + " - "+ lat); //yeni marker oluşturmak için ayarları yap const MarkerIcon = L.divIcon({ iconSize: [100, 50], iconAnchor: [50, 50], html : '<div class="markerTitle"><strong>'+mag+'</strong> - '+name+'</div><div style="text-align:center; width:100%;"><img src="pointer.png" /></div>', className: 'depremMarker', }); //marker'i ekle let marker = L.marker([lat, lon], { icon: MarkerIcon ,title: name }).addTo(layerGroup); } console.log("Markerlar oluşturuldu."); }
Birde deleteDepremler adlıı fonksiyonumuz var ; harita üzerindeki marker’ları temizliyor:
function deletedepremler () { layerGroup.clearLayers(); console.log("Markerlar temizlendi."); }
İşlemler bu kadar.
Çalışan halini görmek için buraya tıklayabilirsiniz.
Leaflet ile Haritada Son Depremleri Gösterme konusu bu kadar. Sonraki yazılarımda daha gelişmiş konuları ele alacağım.
Elinize sağlık…
https://www.sezercoban.com/api/deprem/
bu kısmın çalıştığı dosyayı da paylaşmanız mümkün müdür? İlerde sizin siteniz kapanırsa bu script çalışmaz doğru mu?
Mail adresimi paylaştım…