Web ve Mobil Projelerinize Harita Eklemek

Starzz

Moderatör Asistanı
21 Haz 2015
236
55
909px-Leaflet_logo.svg.png

LEAFLET JS ile HARİTA EKLEME

Merhaba dostlar. Sizlere, nasıl projelerimize özelleştirilebilir harita ekleriz onu göstereceğim.

Kullanacağımız kütüphane LeafletJs. Linke tıklayarak sitesine gidebilir ve daha fazla bilgi edinebilirsiniz. Kendisi açık kaynak kodlu, OpenStreetMap'in üstüne yapılmış, JavaScript ile yazılmış bir kütüphane. İçerik olarak çok zengin, hemen bir örnek yaparak inceleyelim.

Yapacağımız örnek, bulunduğumuz konumu marker ile işaretleyip tahmini bir fence çizerek nerede olduğunuzu söylüyor. Başlayalım.
İhtiyacımız olan bir klasör ve içerisine,
index.html ve index.js adında 2 dosya açmamız yeterli olacaktır. (Yaptığımız örneğin canlı LINKI.)

index.html dosyamızı bir editör ile açıyoruz, gerekli paketleri import edip stil kodlarınız yazıyoruz.

HTML:
<!--index.html-->
<!DOCTYPE html>
<html>

<head>

  <title>Leaflet</title>

  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin="" />
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>


  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }

    #map {
      width: 600px;
      height: 400px;
    }
  </style>

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

    #map {
      height: 100%;
      width: 100vw;
    }
  </style>
</head>

<body>

  <div id='map'></div>

  <script src="./index.js"></script>



</body>

</html>

Leaflet js'in kendi js ve css dosyalarınız uzak sunucudan aldık ve kendi index.js dosyamızı da import ettik.

JavaScript:
//index.js

var map = L.map('map').fitWorld();

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

function onLocationFound(e) {
  var radius = e.accuracy / 2;

  L.marker(e.latlng)
    .addTo(map)
    .bindPopup('Belirtilen ' + radius + ' metre içerisindesiniz.')
    .openPopup();

  L.circle(e.latlng, radius).addTo(map);
}

function onLocationError(e) {
  alert(e.message);
}

map.on('locationfound', onLocationFound);
map.on('locationerror', onLocationError);

map.locate({ setView: true, maxZoom: 16 });

Yukarıda yaptığım işlem ise benim lokasyonumu bulmasını istiyorum ve tam ortasına bir marker atmasını belirtiyorum. Ancak burada önemli bir konu var. Js kodlarında üst tarafta "L.tileLayer" fonksiyonunun yanında bulunan url'e bir token veriyorum. Ben bu token'i sadece altta örneğin çalıştığı sitede sadece çalışması için belirledim. Siz farklı bir yerde çalışacak bir harita yapmak istiyorsanız öncellikle benim yaptığım gibi bu siteye gidip bir token oluşturmalısınız, Account | Mapbox. Burada oluşturduktan sonra url'de bulunan "?access_token=" yazısından sonra gelen ifadeyi silip kendi token'inizi yazmanız gerekiyor.

Ben basit bir uygulama yaparak neler yapabileceğimizi gösterdim. Sizde yukarıda linkini verdiğim kütüphanenin sitesine giderek daha fazla örneğe ulaşabilirsiniz.

Yaptığımız örneğin canlı LINKI.

Sorularınız varsa alt tarafta konuşalım.
 
Üst

Turkhackteam.org internet sitesi 5651 sayılı kanun’un 2. maddesinin 1. fıkrasının m) bendi ile aynı kanunun 5. maddesi kapsamında "Yer Sağlayıcı" konumundadır. İçerikler ön onay olmaksızın tamamen kullanıcılar tarafından oluşturulmaktadır. Turkhackteam.org; Yer sağlayıcı olarak, kullanıcılar tarafından oluşturulan içeriği ya da hukuka aykırı paylaşımı kontrol etmekle ya da araştırmakla yükümlü değildir. Türkhackteam saldırı timleri Türk sitelerine hiçbir zararlı faaliyette bulunmaz. Türkhackteam üyelerinin yaptığı bireysel hack faaliyetlerinden Türkhackteam sorumlu değildir. Sitelerinize Türkhackteam ismi kullanılarak hack faaliyetinde bulunulursa, site-sunucu erişim loglarından bu faaliyeti gerçekleştiren ip adresini tespit edip diğer kanıtlarla birlikte savcılığa suç duyurusunda bulununuz.