Leaflet Nedir?

Leaflet Nedir, web haritalama uygulamaları oluşturmak için kullanılan açık kaynaklı bir JavaScript kitaplığıdır. İlk olarak 2011’de piyasaya sürüldü, HTML5 ve CSS3’ü destekleyen çoğu mobil ve masaüstü platformu destekliyor. Kullanıcıları arasında FourSquare, Pinterest ve Flickr bulunmaktadır.

Leaflet Nasıl Kullanılır?

Harita için herhangi bir kod yazmadan önce sayfanızda aşağıdaki hazırlık adımlarını yapmanız gerekmektedir:

• Sayfanızın HEAD bölümüne aşağıdaki dosyaları ekleyin

 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
   integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
   crossorigin=""/>

 <!-- Make sure you put this AFTER Leaflet's CSS -->
 <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
   integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
   crossorigin=""></script>

Haritanızın görünmesini istediğiniz yerde bu kodu yazın

 <div id="map"></div>

Harita kapsayıcısının tanımlanmış bir yüksekliğe sahip olduğundan emin olun, örneğin onu CSS’de ayarlayarak:

#map { height: 180px; }

Bundan sonraki işlemler için JS dosyası oluşturup aşağıdaki kodları yerleştirmeniz gerekiyor.

var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox/streets-v11',
    tileSize: 512,
    zoomOffset: -1,
    accessToken: 'your.mapbox.access.token'
}).addTo(map);