Haritalar, bilgiyi görselleştirmek ve kullanıcılarla etkileşim kurmak için güçlü bir araçtır. Leaflet, web tabanlı haritalar oluşturmak için kullanılan ücretsiz, açık kaynaklı bir JavaScript kütüphanesidir. Ancak, “Kodlama bilmiyorum, nasıl harita yapacağım?” diyorsanız, yapay zeka sizin için bu süreci inanılmaz derecede kolaylaştırabilir! Bu makalede, yapay zeka araçlarını kullanarak, kodlama bilgisi olmadan Leaflet tabanlı bir harita nasıl oluşturulur, adım adım anlatacağım. HTML tabanlı bir web sitesi üzerinden basit bir harita oluşturacağız ve Ankara merkezli, etkileşimli özellikler ekleyeceğiz. Hazırsanız, başlayalım!
Yapay Zeka Nedir ve Leaflet Haritaları için Nasıl Kullanılır?
Yapay zeka (AI), insan zekasını taklit eden ve karmaşık görevleri otomatikleştiren teknolojilerdir. Günümüzde, Grok gibi yapay zeka modelleri, doğal dil işleme yetenekleriyle, sizin verdiğiniz talimatları (prompt) anlayarak kod yazabilir, rehber oluşturabilir ve hatta hata ayıklaması yapabilir. Leaflet haritası geliştirmek için yapay zekayı kullanmak, şu şekilde çalışır:
- Talimat Verin (Prompt): Yapay zekaya ne istediğinizi açık ve net bir şekilde anlatın. Örneğin, “HTML ve Leaflet kullanarak Ankara merkezli bir harita oluştur” gibi.
- Kodu Alın: Yapay zeka, talimatınıza uygun çalışan bir kod üretir.
- Kodu Test Edin: Üretilen kodu bir HTML dosyasına yapıştırıp tarayıcıda çalıştırırsınız.
- İyileştirme Yapın: Haritaya yeni özellikler eklemek isterseniz, yapay zekaya “Haritaya bir pin ekle” gibi yeni bir talimat verirsiniz.
Yapay zeka, kodlama bilmeyenler için adeta bir asistan gibi çalışır. Şimdi, bu süreci adım adım uygulayalım ve örneklerle ilerleyelim.
1. Yapay Zeka ile Leaflet Haritası Geliştirme: Basit Örnekler ve Prompt Örnekleri
Yapay zekadan en iyi sonucu almak için, talimatlarınızı (prompt) açık, net ve spesifik yazmalısınız. İşte birkaç örnek prompt:
Basit bir Leaflet haritası oluşturmak için:
HTML ve Leaflet.js kullanarak basit bir web sayfası oluştur. Harita, Ankara merkezli olsun ve OpenStreetMap kullanılsın. Kodun tamamını ver ve açıklayıcı yorumlar ekle.
Haritaya bir pin eklemek için:
Leaflet haritasına, Ankara Kızılay’da bir pin ekle. Pin tıklandığında “Kızılay Meydanı” yazan bir popup açılsın. HTML ve JavaScript kodunu ver.
Haritaya bir polygon eklemek için:
Leaflet haritasına, Ankara çevresinde bir üçgen polygon ekle. Polygon mavi renkli olsun ve HTML kodunu tam olarak ver.
Prompt Yazma İpuçları:
- Ne istediğinizi detaylı tarif edin (örneğin, “Ankara merkezli”, “zoom seviyesi 13”).
- Hangi teknolojileri kullanacağınızı belirtin (HTML, Leaflet, JavaScript).
- Eğer bir özelliği özelleştirmek istiyorsanız, rengi, boyutu veya metni belirtin.
- “Kodun tamamını ver” diyerek eksik kod riskini azaltın.
2. Leaflet Haritasını Oluşturma
İlk olarak, basit bir HTML dosyası içinde Leaflet haritası oluşturacağız. Aşağıdaki promptu yapay zekaya verebilirsiniz:
Prompt:
- HTML ve Leaflet.js kullanarak bir web sayfası oluştur. Harita, OpenStreetMap tabanlı olsun. Kodun tamamını ver ve her adımı açıklayan yorumlar ekle.
Ürettiği Kod:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Leaflet Haritası</title>
<!-- Leaflet CSS dosyasını dahil et -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<style>
/* Harita için div'in boyutlarını belirle */
#map { height: 600px; width: 100%; }
</style>
</head>
<body>
<!-- Haritanın görüneceği div -->
<div id="map"></div>
<!-- Leaflet JS dosyasını dahil et -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
// Haritayı oluştur ve 'map' id'sine bağla
var map = L.map('map').setView([39.9334, 32.8597], 13); // Ankara koordinatları ve zoom seviyesi
// OpenStreetMap katmanını ekle
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
</script>
</body>
</html>Çıktısı:
Nasıl Çalıştırılır?
- Yukarıdaki kodu kopyalayın ve index.html adıyla bir dosyaya kaydedin.
- Dosyayı bir web tarayıcısında açın (örneğin, Chrome).
- OpenStreetMap tabanlı bir harita göreceksiniz.
3. Başlangıçta Ankara’yı Gösterme
Yukarıdaki kodda, harita zaten Ankara merkezli ([39.9334, 32.8597]) olarak ayarlandı. Bu koordinatlar, Ankara’nın yaklaşık merkezini temsil eder. Eğer başka bir şehri göstermek isterseniz, koordinatları değiştirin (örneğin, İstanbul için [41.0082, 28.9784]).
Prompt:
Leaflet haritasını Ankara merkezli olacak şekilde ayarla. Koordinatlar [39.9334, 32.8597] olsun. HTML kodunu ver.
4. Zoom Seviyesini Ayarlama
Zoom seviyesi, haritanın ne kadar yakın veya uzak görüneceğini belirler. Leaflet’ta zoom seviyesi setView fonksiyonunda üçüncü parametre olarak verilir (örneğin, 13).
Prompt:
Leaflet haritasında zoom seviyesini 15 olarak ayarla. Harita Ankara merkezli olsun. HTML kodunu ver.
Kod Değişikliği: Yukarıdaki kodda, setView([39.9334, 32.8597], 13) satırını şu şekilde değiştirin:
var map = L.map('map').setView([39.9334, 32.8597], 15);5. Haritaya Pin Ekleme
Haritaya bir işaretleyici (pin) eklemek için L.marker kullanırız. Aşağıdaki promptu yapay zekaya verebilirsiniz:
Leaflet haritasına, Ankara Kızılay’da ([39.9208, 32.8541]) bir pin ekle. Pin tıklandığında “Kızılay Meydanı” yazan bir popup açılsın. HTML kodunu ver.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Leaflet Haritası - Pin</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<style>
#map { height: 600px; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
// Haritayı oluştur
var map = L.map('map').setView([39.9334, 32.8597], 13);
// OpenStreetMap katmanını ekle
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// Kızılay'a pin ekle
var marker = L.marker([39.9208, 32.8541]).addTo(map);
marker.bindPopup("Kızılay Meydanı").openPopup();
</script>
</body>
</html>ÇIKTISI:
Polyline için Prompt:
- Leaflet haritasına, kırmızı renkli bir polyline ekle. Koordinatlar: [[39.93, 32.85], [39.92, 32.86]]. HTML kodunu ver.
7. Haritaya Tıklayınca Popup ile Veri Gösterme
Haritaya tıklanınca koordinatları gösteren bir popup eklemek için on(‘click’) olayını kullanırız.
Prompt:
Leaflet haritasında, kullanıcı haritaya tıkladığında tıklanan yerin koordinatlarını gösteren bir popup açılsın. HTML kodunu ver.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Leaflet Haritası - Popup</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<style>
#map { height: 600px; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
// Haritayı oluştur
var map = L.map('map').setView([39.9334, 32.8597], 13);
// OpenStreetMap katmanını ekle
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// Tıklama olayını ekle
map.on('click', function(e) {
var popup = L.popup()
.setLatLng(e.latlng)
.setContent("Koordinatlar: " + e.latlng.lat.toFixed(4) + ", " + e.latlng.lng.toFixed(4))
.openOn(map);
});
</script>
</body>
</html>ÇIKTISI:
8. Anlık Konum Gösterme
Kullanıcının anlık konumunu haritada göstermek için tarayıcının geolocation API’sini kullanırız.
Prompt:
Leaflet haritasında, kullanıcının anlık konumunu bir pin ile göster. Konum bulunamazsa hata mesajı göster. HTML kodunu ver.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Leaflet Haritası - Anlık Konum</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<style>
#map { height: 600px; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
// Haritayı oluştur
var map = L.map('map').setView([39.9334, 32.8597], 13);
// OpenStreetMap katmanını ekle
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© .
System: <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// Kullanıcının anlık konumunu al
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
// Konuma pin ekle
var marker = L.marker([lat, lng]).addTo(map);
marker.bindPopup("Buradasınız!").openPopup();
// Haritayı konuma odakla
map.setView([lat, lng], 15);
}, function() {
alert("Konum alınamadı. Lütfen konum servislerini etkinleştirin.");
});
} else {
alert("Tarayıcınız konum servisini desteklemiyor.");
}
</script>
</body>
</html>ÇIKTISI:
Sonuç: Yapay Zeka ile Harita Geliştirme Kolay ve Eğlenceli!
Bu makalede, kodlama bilgisi olmadan, yapay zeka kullanarak Leaflet tabanlı bir harita geliştirmenin temellerini öğrendik. Yapay zeka, size özel kodlar üreterek, Ankara merkezli bir haritadan başlayarak pin ekleme, polygon çizme, popup gösterme ve anlık konum takibi gibi özellikler eklemenizi sağladı. Önemli olan, doğru ve net promptlar yazmak. İşte birkaç son ipucu:
- Deneyin: Farklı promptlar yazarak haritaya yeni özellikler eklemeyi deneyin (örneğin, “Haritaya bir arama çubuğu ekle”).
- Hataları Sorun: Kod çalışmazsa, yapay zekaya “Bu kodu düzelt” diyerek hata ayıklaması yaptırabilirsiniz.
- Paylaşın: Oluşturduğunuz haritaları bir web sitesinde paylaşarak başkalarına ilham verin!
Yapay zeka ile harita geliştirme, hem eğlenceli hem de herkesin yapabileceği bir süreç. Şimdi kendi haritanızı oluşturmaya başlayın ve yaratıcılığınızı konuşturun!
