Turbosite sitesine OpenStreetMap (Leaflet) haritası nasıl eklenir

OpenStreetMap (OSM), ücretsiz bir harita veritabanı olup Google Maps ve Yandex Haritalar’a açık bir alternatiftir. Leaflet, OSM’yi bir web sitesinde görüntülemek için kullanılan en popüler JavaScript kütüphanesidir. Tamamen ücretsizdir, API anahtarı gerektirmez ve limitleri yoktur. Ücretli servislerden kaçınmanın önemli olduğu projeler için idealdir. Kurulum 5–10 dakika sürer.

Neler gereklidir

• Göstermek istediğiniz yerin koordinatları (enlem/boylam) — openstreetmap.org üzerinden öğrenebilirsiniz (noktaya sağ tıklayın → «Show address»)
• Turbosite üzerinde yayınlanmış bir site
• 5–10 dakika

Adım 1. Yerinizin koordinatlarını alın

1. openstreetmap.org adresini açın.
2. Arama kısmından istediğiniz adresi veya işletmeyi bulun.
3. İstediğiniz noktaya sağ tıklayın → «Show address».
4. Adres çubuğunda 52.5200,13.4050 (enlem, boylam) şeklinde koordinatlar görünecektir. Bunları not edin.

Adım 2. HTML kodunu hazırlayın

Google Maps ve 2GIS’in aksine, OSM’nin hazır bir iframe oluşturucusu yoktur; harita Leaflet kütüphanesi aracılığıyla eklenir. İşte kullanabileceğiniz hazır kod:

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

<div id="map" style="height: 400px; width: 100%;"></div>

<script>
  var map = L.map('map').setView([52.5200, 13.4050], 15);

  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);

  L.marker([52.5200, 13.4050]).addTo(map)
    .bindPopup('Buradayız')
    .openPopup();
</script>

Kendinize göre değiştirmeniz gerekenler:

• 52.5200, 13.4050 — her iki yeri de kendi koordinatlarınızla (enlem, boylam) değiştirin.
• 15 — harita yakınlaştırma seviyesi (şehir için 13–17 arası; sayı büyüdükçe yakınlaşır).
• Buradayız — işaretçinin üzerindeki açılır pencerede (popup) görünecek metin.
• height: 400px — haritanın yüksekliği.

Adım 3. Kodu Turbosite’a ekleyin

Harita, sayfanın belirli bir yerinde görünür.

1. Turbosite’ta sitenizi açın.
2. Sayfanın istediğiniz yerine (genellikle «İletişim» bloğu) bir «HTML-kod» bloğu ekleyin.
3. Hazırladığınız Leaflet kodunu yapıştırın.
4. Değişiklikleri kaydedin.
5. Sitenizi yayınlayın.

📷 [Turbosite ekran görüntüsü — eklenecek: sayfa gövdesinde Leaflet kodunu içeren HTML-kod bloğu].

Adım 4. Haritanın çalıştığını kontrol edin

1. Yayınlanan sitenizi açın.
2. Harita bloğuna kadar kaydırın; işaretçili OpenStreetMap haritasının yüklenmesi gerekir.
3. İşaretçiye tıklayın; metninizin olduğu bir açılır pencere görünecektir.
4. Yakınlaştırmayı kontrol edin (fare tekerleği veya mobil cihazlarda parmakla kıstırma hareketi).

Sıkça Sorulan Sorular

Neden Google Maps yerine OSM kullanmalıyım? Temel nedenler: Limitler ve API anahtarları olmadan tamamen ücretsizdir, kayıt gerektirmez, devre dışı bırakılma riski yoktur. Dezavantajı ise küçük bölgelerde verilerin daha az güncel olabilmesidir.

Birden fazla işaretçi ekleyebilir miyim? Evet, her işaretçi için L.marker([enlem, boylam]).addTo(map).bindPopup('Metin'); satırını tekrarlayın.

Harita siteyi yavaşlatıyor. Leaflet ve OSM döşemeleri (tiles) istek üzerine yüklenir. Sayfada tek bir harita varsa sorun yaşanmaz.

Haritayı kurumsal renklerime göre özelleştirebilir miyim? Evet, ancak standart OSM döşemeleriyle değil. Üçüncü taraf döşeme sağlayıcılarını (Mapbox, Stadia Maps, Thunderforest) kullanın; bazıları düşük trafik için ücretsiz, bazıları ise ücretlidir.

OpenStreetMap atıfını belirtmem gerekiyor mu? Evet, bu bir lisans gerekliliğidir ve zorunludur. Yukarıdaki hazır kodda attribution satırında zaten mevcuttur.

Daha fazla bilgi için

• Leaflet dokümantasyonu — tam referans kılavuzu
• Leaflet Hızlı Başlangıç Kılavuzu — hızlı giriş
• OpenStreetMap — haritanın kendisi
• Alternatif döşeme sağlayıcıları — harita stilini değiştirmek için