Masa üstünüzde çalıştırabileceğiniz ücretsiz bir harita uygulaması ile Tüm il ve ilçeleri listeleyebileceğimiz. İlçelerin haritadaki konumlarını hızlıca gösterebilen bir haritadır.
İl seçimi açılır menüden ve arama penceresinden yapılabilmektedir.
İl seçimi sonrası İlçeler sol tarafta listelenmektedir.
İlçeye tıklama ile, harita görüntüsü ilgili lokasyona zoom yapmaktadır.
Seçim sonrası beliren harita konumuna yaklaşıp uzaklaşabilir, farklı konumlara kaydırma yapabilirsiniz.
Bir not defteri açıp aşağıdaki kodu içine koyduktan sonra farklı kaydedin, bir isim verin. dosya uzantısı. ".html" olması yeterli.
HTML Kod:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>81 İl 973 İlçe Harita Portalı</title>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Select2 (Açılır Listede Arama İçin) -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<!-- Leaflet CSS ve JS (ÜCRETSİZ HARİTA KÜTÜPHANESİ) -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<style>
/* --- TEMEL DEĞİŞKENLER VE SIFIRLAMALAR --- */
:root {
--primary: #2c3e50;
--secondary: #34495e;
--accent: #27ae60;
--light: #ecf0f1;
--bg: #ffffff;
--shadow: 0 3px 10px rgba(0,0,0,.12);
--radius: 8px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body, html {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
height: 100%;
background-color: var(--light);
display: flex;
flex-direction: column;
padding: 12px;
}
/* --- BAŞLIK ALANI STİLLERİ --- */
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 15px;
background: #fff;
border: 2px solid #000;
border-radius: var(--radius);
box-shadow: var(--shadow);
margin-bottom: 15px;
gap: 15px;
flex-shrink: 0;
flex-wrap: wrap; /* Küçük ekranlarda alta geçmesi için */
}
.header .left {
display: flex;
align-items: center;
gap: 12px;
}
.header .logo img {
height: 46px;
}
.header .title1 {
font-size: 20px;
font-weight: 700;
color: #000;
white-space: nowrap;
}
.header .title2 {
font-size: 11px;
color: #555;
font-weight: 600;
}
/* Orta Arama Alanı (Esnek Genişlik) */
.header .center-search {
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
min-width: 300px;
}
.search-label {
font-weight: bold;
font-size: 15px;
color: var(--primary);
}
.header .right {
font-size: 13px;
font-weight: 700;
white-space: nowrap;
text-align: right;
color: #333;
}
/* Select2 Ayarları */
.select2-results__options { max-height: 400px !important; }
.select2-container { width: 100% !important; max-width: 250px; text-align: left;}
/* Seçilen İl Başlığı */
#selected-province-title {
font-size: 18px; font-weight: bold; color: var(--primary);
cursor: pointer; transition: color 0.3s;
display: flex;
align-items: center;
background: var(--light);
padding: 5px 12px;
border-radius: 20px;
border: 1px solid #bdc3c7;
}
#selected-province-title:hover { color: var(--accent); border-color: var(--accent); }
#selected-province-title span.hint { font-size: 12px; font-weight: normal; color: #7f8c8d; margin-left: 8px; }
/* Ana Çerçeve (Ekranı Kaplayan Alan) */
.main-container {
display: flex; flex: 1; overflow: hidden;
border: 5px solid var(--primary);
border-radius: var(--radius); background: #fff;
}
/* Sol Menü (İlçe Listesi) */
.sidebar {
width: 300px; background: var(--secondary); color: white;
display: flex; flex-direction: column; overflow-y: auto;
}
.sidebar-section { padding: 15px; }
.sidebar h3 { margin: 0 0 15px 0; font-size: 18px; border-bottom: 2px solid var(--accent); padding-bottom: 5px; }
.list-item {
padding: 10px; background: rgba(255,255,255,0.05); margin-bottom: 5px;
cursor: pointer; border-radius: 4px; transition: 0.2s; font-size: 15px;
}
.list-item:hover { background: var(--accent); color: white; }
/* Harita Alanı */
#map { flex: 1; height: 100%; width: 100%; z-index: 1; }
.hidden { display: none !important; }
.loading-text { color: #f1c40f; font-style: italic; font-size: 14px;}
</style>
</head>
<body>
<!-- YENİ BAŞLIK ALANI BAŞLANGICI -->
<div class="header">
<div class="left">
<div class="logo"><img src="logo.jpg" alt="Logo" onerror="this.style.display='none'"></div>
<div>
<div class="title1">81 İl 973 İlçe Harita Portalı</div>
<div class="title2">Muhammed Yusuf OLGUN</div>
</div>
</div>
<!-- YENİ ORTA ALAN: Arama ve Seçim Başlığı -->
<div class="center-search">
<span class="search-label">İl Seçiniz:</span>
<select id="province-select">
<option value="">81 İl Yükleniyor...</option>
</select>
<div id="selected-province-title" class="hidden">
<span id="p-name"></span>
<span class="hint">(Başa dönmek ve sıfırlamak için tıklayın)</span>
</div>
</div>
<div class="right">AI Web Designer:<br>Deneyim</div>
</div>
<!-- YENİ BAŞLIK ALANI BİTİŞİ -->
<!-- Alt Çerçeveli Alan (Liste ve Harita) -->
<div class="main-container">
<!-- İlçe Listesi -->
<div id="sidebar" class="sidebar hidden">
<div id="district-section" class="sidebar-section">
<h3>İlçeler (<span id="district-count">0</span>)</h3>
<div id="district-list"></div>
</div>
</div>
<!-- Açık Kaynak Ücretsiz Harita -->
<div id="map"></div>
</div>
<script>
let map;
const apiBaseUrl = "https://api.turkiyeapi.dev/v2"; // 81 İl ve 973 İlçe için açık kaynak API
// Haritayı Başlat (Leaflet & OpenStreetMap)
function initMap() {
// Haritayı Türkiye merkezine ayarla (Enlem, Boylam, Zoom)
map = L.map('map').setView([39.0, 35.0], 6);
// Ücretsiz 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);
}
// Açık kaynak Nominatim API ile adresten koordinat bulma ve haritayı oraya kaydırma
function geocodeAndCenter(query, zoomLevel) {
fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${query}, Türkiye`)
.then(res => res.json())
.then(data => {
if (data && data.length > 0) {
// Leaflet'in harika "flyTo" animasyonu ile noktaya uç
map.flyTo([data[0].lat, data[0].lon], zoomLevel, {
duration: 1.5 // Animasyon süresi
});
}
})
.catch(err => console.log("Koordinat bulunamadı", err));
}
$(document).ready(function() {
initMap();
// Select2'yi başlat (Klavye ile arama filtrelemesi)
$('#province-select').select2({ placeholder: "İl Arayın veya Seçin...", allowClear: true });
// 1. 81 İLİ API'DEN ÇEK
fetch(`${apiBaseUrl}/provinces`)
.then(response => response.json())
.then(res => {
// İlleri harf sırasına göre diz
const provinces = res.data.sort((a, b) => a.name.localeCompare(b.name, 'tr'));
$('#province-select').empty().append(new Option("İl Arayın veya Seçin...", ""));
provinces.forEach(prov => {
const option = new Option(prov.name, prov.id);
option.dataset.name = prov.name;
$('#province-select').append(option);
});
});
// İL SEÇİLDİĞİNDE TETİKLENEN OLAY
$('#province-select').on('change', function() {
const provinceId = $(this).val();
const provinceName = $(this).find(':selected').data('name');
if(provinceId) {
// Seçilen Başlığı Göster, Seçim Kutusunu Gizle (daha temiz görünüm için)
$('#province-select').next('.select2-container').addClass('hidden');
$('.search-label').addClass('hidden');
$('#selected-province-title').removeClass('hidden');
$('#p-name').text(provinceName + " İli Seçildi");
// Listeyi Göster
$('#sidebar').removeClass('hidden');
// Haritayı il merkezine kaydır
geocodeAndCenter(provinceName, 9);
// İlçeleri Yükle
loadDistricts(provinceId, provinceName);
}
});
// BAŞLIĞA TIKLAYINCA SIFIRLAMA (İLK HALİNE DÖNME)
$('#selected-province-title').on('click', function() {
// Seçim kutusunu tekrar göster
$('#province-select').val(null).trigger('change');
$('#province-select').next('.select2-container').removeClass('hidden');
$('.search-label').removeClass('hidden');
$('#selected-province-title').addClass('hidden');
$('#sidebar').addClass('hidden');
// Haritayı Türkiye görünümüne geri döndür
map.flyTo([39.0, 35.0], 6);
});
});
// 2. İLÇELERİ API'DEN ÇEK
function loadDistricts(provinceId, provinceName) {
const districtList = $('#district-list');
districtList.empty().append('<div class="list-item loading-text">İlçeler yükleniyor...</div>');
fetch(`${apiBaseUrl}/provinces/${provinceId}/districts`)
.then(response => response.json())
.then(res => {
districtList.empty();
// İlçeleri harf sırasına göre diz
const districts = res.data.sort((a, b) => a.name.localeCompare(b.name, 'tr'));
$('#district-count').text(districts.length);
// İlçeleri listeye ekle
districts.forEach(dist => {
const div = $(`<div class="list-item">${dist.name}</div>`);
// İlçeye tıklayınca haritayı o ilçeye yaklaştır
div.on('click', () => {
geocodeAndCenter(`${dist.name}, ${provinceName}`, 12);
// Seçili ilçeyi görsel olarak belli et
$('.list-item').css('background', 'rgba(255,255,255,0.05)');
div.css('background', 'var(--accent)');
});
districtList.append(div);
});
})
.catch(err => {
districtList.empty().append('<div class="list-item">İlçe verisi çekilemedi.</div>');
});
}
</script>
</body>
</html>