14 Ocak 2018

Leaflet Js Nedir ?

Leaflet, interaktif web haritaları geliştirmemize olanak sağlayan açık kaynak kodlu bir Javascript kütüphanesidir. Basit ve esnek yapıya sahip, günümüzün en popüler haritalama kütüphanesi olma konumunda olan Leaflet, Vladimir Agafonkin tarafından geliştirilmiştir. Resmi sitesinde oldukça fazla örnek, döküman ve eklenti içermekte. İlerleyen zamanlarda eklentileri kullanarak birlikte projeler geliştireceğiz. Şimdilik genel hatlarıyla Leaflet proje yapısını inceleyelim. Öncelikle Leaflet i kullanabilmeniz için HTML, CSS ve Javascript bilginizin olması faydanıza olacaktır. Eğer bu konulara yabancıysanız oldukça yaygın içeriğe sahip olan bu konuları kısa vadede öğrenebilirsiniz. Hazırsanız başlayalım !
Şimdi adım adım kütüphanemizi kullanarak haritamızı oluşturalım.

LeafletJS kütüphanesinin adresinde en kararlı versiyonun js ve css adresleri bulunmakta. Projemizde LeafletJs kütüphanesini kullanabilmemiz için bu script ve css dosyalarını head etiketi içerisine eklememiz gerekiyor.

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" /> 

<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js">script>
  • leaflet.js - Leaflet Javascript kodu.
  • leaflet.css - Leaflet Stil kodu.

Kütüphanemizi projemize dahil etttikten sonra haritamızı gösterebileceğimiz bir bölüm tanımlamamız gerekiyor. Bu bölümü id si map olan bir div etiketi ile tanımlıyoruz.

<div id="map">div>

 Haritamız için alan oluşturduk. Bu alanın sayfamızda görüntülenebilmesi için bir yükseklik değeri belirtmemiz gerekiyor. Bunu da style etiketi içerisinde aşağıdaki şekilde tanımlıyoruz.

#map{ height: 100% }

Arayüz kısmını hallettikten sonra şimdi sıra LeafletJs nin fonksiyonlarını kullanarak haritamızın oluşturulmasına geldi.

 var map = L.map('map').setView([42.35, -71.08], 13);

L.tileLayer('http://tiles.mapc.org/basemap/{z}/{x}/{y}.png',

{ attribution: 'Marufoglu', maxZoom: 17, minZoom: 9 }).addTo(map);

Yukarıdaki script etiketi içerisindeki kodumuza biraz odaklanalım. Ne anlama geliyor ?

  1. Harita objesi oluşturuldu.
  2. Tanımlı bölümü map adını verdiğimiz objeye bağlamak için L.map() fonksiyonu kullanıldı.
  3. Haritamızın merkez koordinatlarını ve zoom seviyesini belirlemek için setVieiw() fonksiyonu kullanıldı.
  4. Haritada temek altlık olarak kullanacağımız katmanın yayın adresini L.tileLayer() fonksiyonunu kullanarak tanımladık. Bunun yanında katmana ait nitelik bilgisi, maksimum zoom ve minimum zoom seviyeleri de tanımlandı.
  5. addTo() fonksiyonuyla da katmanı haritamıza eklemiş olduk.

Bu yazımızın böylelikle sonuna gelmiş bulunuyoruz. Faydalanmış olmanızı umuyorum. Aşağıdaki ekranda sonuc olarak üreteceğiniz haritanın nasıl olacağını görebilirsiniz.