Bayilerin Harita Üzerinden Gösterimi
İnteraktif Bayi Lokasyonu Haritası Oluşturma (Leaflet.js Rehberi){ Kodları }
Günümüzün dijital dünyasında, müşterilerinizin size fiziksel olarak ulaşmasını kolaylaştırmak hayati önem taşır. Statik bir adres listesi yerine, etkileşimli, arama yapılabilen ve koordinat bazlı çalışan bir “Bayi Ağı Haritası” kullanıcı deneyimini bir üst seviyeye taşır.
Bu yazıda, açık kaynaklı Leaflet.js kütüphanesini kullanarak Türkiye genelinde çalışan profesyonel bir bayi locator uygulamasını nasıl geliştirebileceğinizi adım adım anlatacağız.
Neden Leaflet.js Kullanmalıyız?
Google Maps API’nin aksine Leaflet.js:
- Ücretsiz ve Açık Kaynaktır: Yüksek trafikli sitelerde sürpriz faturalarla karşılaşmazsınız.
- Hafiftir: Mobil cihazlarda çok hızlı yüklenir.
- Esnektir: Tamamen özelleştirilebilir marker ve modal yapıları sunar.
- Veri Yapısı: Esnek ve Ölçeklenebilir JSON
İyi bir harita uygulaması, düzenli bir veri yapısı gerektirir. Biz burada illeri koordinatlarıyla, bayileri ise bağlı oldukları il ID’leri ile eşleştiriyoruz.
JavaScript
const dealerData = {
“provinces”: [
{ “id”: 6, “name”: “Ankara”, “lat”: 39.9334, “lng”: 32.8597 }, { “id”: 34, “name”: “İstanbul”, “lat”: 41.0082, “lng”: 28.9784 }
],
“dealers”: { “6”: [
{ “name”: “Ulus Şubesi”, “address”: “Ulus Meydanı, No:1”, “phone”: “0312 123 45 67”, “lat”: 39.9422, “lng”: 32.8553
}
]
}
};
- Harita ve Arama Arayüzü (HTML)
Kullanıcıların hem haritayı görebileceği hem de hızlıca arama yapabileceği sade bir yapı kuruyoruz.
HTML
<div class=”search-container”>
<input type=”text” id=”provinceSearch” placeholder=”İl ismi yazın…” onkeyup=”searchProvince()”>
</div>
<div id=”map” style=”height: 500px; width: 100%;”></div>
<div class=”dealer-list”>
<table id=”dealerTable”>
</table>
</div>
- Dinamik Marker Tasarımı (CSS)
Sıradan ikonlar yerine, üzerinde il adı yazan ve içinde bayi sayısını barındıran modern markerlar tasarladık.
CSS
.custom-marker-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
.marker-circle {
width: 32px; height: 32px;
background: #007bff;
border-radius: 50%;
color: white;
line-height: 28px;
text-align: center;
border: 2px solid #fff;
}
- Fonksiyonellik: Akıllı Odaklanma (JS)
Geliştirdiğimiz sistemin en büyük özelliği “Çift Yönlü Odaklanma”dır. Kullanıcı tabloda bir bayiye tıkladığında harita sadece o şehre değil, bayinin bulunduğu sokağa kadar otomatik zoom yapar.
JavaScript
function goToDealerLocation(lat, lng) {
map.flyTo([lat, lng], 16, { // 16 zoom seviyesi sokak detayı sağlar
animate: true,
duration: 2
});
}
Bu rehberdeki kodları kullanarak, firmanızın fiziksel varlığını dijitalde en profesyonel şekilde sergileyebilirsiniz. Kodları geliştirirken kendi kurumsal renklerinizi ve bayi logonuzu ekleyerek tasarımı özelleştirmeyi unutmayın!
Geliştirici Notu: Projenin tam kaynak koduna ve örnek JSON verisine aşağıdaki indirme linkindeki butonları tıklayarak ulaşabilirsiniz.
Demo Sayfaları{ Kodları }
- Harita 1
- Harita 2
- Harita 3
