Anasayfaya geri dön

Leaflet.js ile Harita Oluşturma

25 Eylül 2020 01:04   •   ☕️☕️ 4 dk okuma süresi   •   🖊 yusuf





Leaflet.js nedir?

Leaflet mobil uyumlu ve açık kaynaklı, haritalar oluşturmaya yarayan bir JavaScript kütüphanesidir. Kaynak kodu için buraya, eklentiler için buraya ve ingilizce dökümantasyonu içinde buraya tıklıyabilirsiniz.




Leaflet.js ile Harita Oluşturma


1. Leaflet’in tasarım dosyasını(Css) sayfamızın head kısmına ekliyoruz.

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


2. Leaflet’in JavaScript dosyasını ekliyoruz. (Bu dosya Leaflet Css den sonra eklenilmelidir)

<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"> </script>


3. Haritamızın olmasını istediğimiz yere belirli bir id’ye sahip bir div elemanı yerleştiriyoruz.

<div id="haritaid"></div>


4. Haritanızı kapsayan elemanın tanımlanmış bir yüksekliğe sahip olduğundan emin olun.

#haritaid { 
    height: 200px; 
}


Bunları yaptıktan sonra html sayfamızın şu şekilde gözükmesi gerekiyor.


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Leaflet Haritam</title>

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

    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"> </script>

    <style>

        #haritaid{
            height: 200px;
        }

    </style>

</head>
<body>

    <div id="haritaid"></div>
    
</body>
</html>


Artık haritamızı oluşturmaya ve kullanmaya hazırız.



Haritanın Oluşturulması

Şimdi İstanbul’un bir haritasını oluşturalım. İlk önce haritayı tanımlıyacağız. Ardından çoğrafi kordinatlarını ve yakınlaştırma seviyesini ayarlıyacağız.

var mymap = L.map('haritaid').setView([41.012, 28.884], 13);

setView içerisine birinci parametre olarak çoğrafi korditanları, ikinci parametre olarak da yakınlaştırma seviyesini giriyoruz. Yakınlaştırma seviyesindeki sayı arttıkça harita ölceği büyür, küçüldükçe harita ölçeğide küçülür.

Şimdi ise bir harita katmanı eklememiz gerek. Bunun için benim bildiğim iki tane internet sitesi var. Biri mapbox diğeri ise maptiler.

İlk önce mapbox ile bir harita katmanı oluşturmayı görelim.

  1. Matbox hesabı oluştur
  2. studio.mapbox.com adresi üzerinden bir harita oluştur.
  3. Share > Developer resources > Third party > CARTO
  4. Altta çıkan url’i kopyala ve alttaki koda yapıştır.


L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/512/{z}/{x}/{y}@2x?access_token={accessToken}', 
{
    attributi-on: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    tileSize: 512,
    zoomOffset: -1,
}).addTo(mymap);

Ve bu kadar. Harita oluşturulmuş oluyor.



Maptiler ile harita katmanı oluşturma

  1. cloud.maptiler.com adresine girip kayıt ol.
  2. Haritalar kısmında kendine bir harita katmanı seç. (Ben genellikle Streets’i tercih ediyorum)
  3. Raster Tiels yazan yerden Leaflet.js için uygun olan linki kodumuza ekliyoruz. (Linkin içerisinde {z}/{x}/{y} gibi bişey varsa o link leaflet.js içindir)

L.tileLayer('https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key={accessToken}', 
{
    attribution: '<a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>',
    maxZoom: 18,	
    tileSize: 512,
    zoomOffset: -1,
}).addTo(mymap);


En sonunda site şu şekilde oluyor:

Mapbox ile


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Leaflet Haritam</title>

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

    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"> </script>

    <style>

        * {
            margin: 0;
            padding: 0;
        }

        #haritaid{
            height: 600px;
            max-width: 1200px;
        }

    </style>

</head>
<body>

    <div id="haritaid"></div>
    
    <script>

        var mymap = L.map('haritaid').setView([41.015, 28.971], 11);

        L.tileLayer(
            'https://api.mapbox.com/styles/v1/{id}/tiles/512/{z}/{x}/{y}@2x?access_token={accessToken}', 
        {
            attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
            maxZoom: 18,
            id: 'kullanici id ni giriyorsun',
            tileSize: 512,
            zoomOffset: -1,
            accessToken: 'accessToken'
        }).addTo(mymap);

    </script>

</body>
</html>


Maptiler ile


<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Leaflet Haritam</title>

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

    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"> </script>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #haritaid {
            height: 600px;
            max-width: 1200px;
        }

    </style>

</head>

<body>

    <div id="haritaid"></div>

    <script>
        var mymap = L.map('haritaid').setView([41.015, 28.971], 11);

        L.tileLayer('https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key={accessToken}', {
            attribution: '<a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>',
            maxZoom: 18,
            tileSize: 512,
            zoomOffset: -1,
        }).addTo(mymap);

    </script>

</body>

</html>




Kullandığım kaynaklar

Bu yazıyı hazırlarken kullandığım kaynaklar: