Şubat 28, 2020
leafletjs-logo

Leaflet – Temel Harita Gösterimi

Leaflet, yaklaşık 38 kilobaytlık boyutunda geliştiriciler için gerekli tüm haritalama işlevlerini barındıran açık kaynaklı bir javascript kütüphanesidir. Leaflet tüm masaüstü ve mobil sistemlerde verimli bir şekilde çalışabildiği gibi çok sayıda eklenti ve geniş döküman desteği ile Openlayers karşısında çok güçlü bir alternatif olarak duruyor.

Şimdi temel bir harita gösterim uygulaması yapacağız, bakalım js kütüphanesinin hafifliği yazılım geliştirme tarafına da yansımış mı?

Önce HTML tarafını hazırlayalım:

<html>
  <head>
    <meta charset="utf-8" />
    <title>Leaflet ile ilk harita</title>  
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
    <style>
      html,
      body,
      #map {
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script src="./index.js"></script>
  </body>
</html>

Görüldüğü üzere önceden bahsettiğim Openlayers mantığından herhangi bir farkı bulunmuyor. Asıl fark Javascript tarafında:

var mymap = L.map('map').setView([39.970806,32.865601], 9);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(mymap);

Evet, siz de şaşırdınız değil mi? En sade hali ile OpenStreetMap haritalarının gösterilmesi iki satır kod. Bu örnekte Leaflet’in JS ve CSS dosyalarını harici olarak kullandık, sizin bu dosyaları indirip o şekilde çalışmanızı tavsiye ederim. Buradan indirebilirsiniz.

Yukarıdaki kod parçasında öncelikle haritamızın gösterileceği div’in id sini, ekrana gelecek merkez noktanın koordinatlarını ve yakınlaştırma düzeyi değerini verdik. Sonra tileLayer fonksiyonu ile birlikte OpenStreetMap’in tile URL’ini vererek harita uygulamamıza altlık olarak eklemiş olduk.

Leaflet OpenStreetMap Haritası

Temel haritamız üzerinden devam ederek ileri seviyeye ulaşana kadar, eğitimlere devam edeceğiz. Takipte kalın!

Ömür Bilgili

Kıdemli Bilgisayar Mühendisi - GIS Geliştirici

View all posts by Ömür Bilgili →

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir