Leaflet js kütüphanesi

Leaflet, interaktif web haritaları geliştirmemize olanak sağlayan açık kaynak kodlu bir Javascript kütüphanesidir.   Vladimir Agafonkin tarafından geliştirilmiştir. Resmi sitesinde oldukça fazla örnek, döküman ve eklenti içermekte, Türkçe kaynak bulmada sıkıntı çekenler için leaflet kütüphanesini projeye eklemeyi ve kütüphanelerini örneklendirmeye çalışacağım. Gis(coğrafi bilgi sistemleri) konusunda geliştirme yapmak için faydalı olduğunu düşünüyorum. En basit haliyle temel seviyedeki okurların da anlayacağı  şekilde yazmaya çalışacağım.

https://leafletjs.com/download.html adresinden kütüphaneyi indirmeliyiz, Stable versiyonu indirmeliyiz.

Boş bir klasör oluşturup içine boş bir html sayfası ve js isminde bir klasör oluşturun, Indirdiğiniz sıkıştırılmış leaflet klasörünün içindekileri js klasörüne çıkarın.

Html dosyamızı açıp <head> tag’i içine önce laflet.css dosyasını ardından leaflet.js dosyasını ekliyoruz

Haritamızın gözükeceği bir alan yaratmamız lazım, body tag’I içine bir div elementi oluşturmalıyız, mapid alanine 580px yükseklik verdim. Scripti oluştururken id=”mapid” kısmını manipüle etmiş olacağız.

Mymap değişkenine haritamızın koordinatlarını atayacağız, örnek olarak Ankara’nın koordinatlarını( 39.9334, 32.8597) kullanacağım. Ardından harita katmanını eklemek için leaflet’in sitesinden aldığım aşağıdaki kodu ekliyoruz;

AccessToken şu linkten oluşturabilirsiniz; https://www.mapbox.com/account/access-tokens

Bazı componentleri aşağıdaki gibi kullanabilirsiniz;

Marker;

var marker = L.marker([39.9334, 32.8597]).addTo(mymap);

 

daire,

var circle = L.circle([39.9214, 32.8540], {

        color: 'yellow',

        fillColor: 'blue',

        fillOpacity: 0.5,

        radius: 800

    }).addTo(mymap);

 

Popup,

 

    marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();

    circle.bindPopup("I am a circle.");

    polygon.bindPopup("I am a polygon.");

 

 

 

click özelliği;

 

   function onMapClick(e) {

    alert("You clicked the map at " + e.latlng);

}

 

 

Yorum Yap

Ara
Kategoriler
ASP.NET  (4 )
MSSQL  (5 )
JAVASCRIPT  (8 )
FİNANS  (8 )
C#  (5 )
GEZİ-KÜLTÜR  (3 )
SEO  (2 )
Diğer  (3 )
CSS  (2 )
ANDROID  (2 )