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 =
'&copy; <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.