Deneyim: Harita üzerinde Türkiye Nüfus Yoğunluğu Portalı

Masa üstünüzde çalıştırabileceğiniz ücretsiz bir harita uygulaması ile Tüm İllere göre nüfus yoğunluğunu gösterebilen bir haritadır.

İl seçimi haritada nüfus bilgileri görünü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>

<head>

<title>Türkiye İl Nüfus ve Yoğunluk Haritası</title>

<style>

: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 --- */

.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;

}

.header .left { display: flex; align-items: center; gap: 12px; }

.header .logo img { height: 46px; }

.header .title1 { font-size: 19px; font-weight: 700; color: #000; white-space: nowrap; }

.header .title2 { font-size: 11px; color: #555; font-weight: 600; }

.header .center-search {

flex-grow: 1; display: flex; justify-content: center; align-items: center;

gap: 15px; min-width: 300px; flex-wrap: wrap;

}

.search-label { font-weight: bold; font-size: 15px; color: var(--primary); }

.header .right { font-size: 12px; font-weight: 700; white-space: nowrap; text-align: right; color: #333; line-height: 1.3; }

.select2-results__options { max-height: 400px !important; }

.select2-container { width: 100% !important; max-width: 280px; text-align: left;}

#selected-province-title {

font-size: 16px; font-weight: bold; color: var(--primary);

cursor: pointer; transition: color 0.3s; display: flex; align-items: center;

background: #e8f8f5; padding: 5px 12px; border-radius: 20px; border: 1px solid var(--accent);

}

#selected-province-title:hover { color: #c0392b; border-color: #c0392b; }

#selected-province-title span.hint { font-size: 11px; font-weight: normal; color: #7f8c8d; margin-left: 6px; }

/* --- ANA ÇERÇEVE --- */

.main-container {

display: flex; flex: 1; overflow: hidden;

border: 5px solid var(--primary); border-radius: var(--radius); background: #fff;

}

/* --- SOL MENÜ (NÜFUS BİLGİ PANELİ) --- */

.sidebar {

width: 320px; 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; }

.info-card {

background: rgba(255,255,255,0.08); padding: 15px; border-radius: 6px; margin-bottom: 10px;

border-left: 4px solid var(--accent);

}

.info-card h4 { font-size: 18px; color: #f1c40f; margin-bottom: 8px; }

.info-row { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 4px; }

.info-row span:last-child { font-weight: bold; color: #fff; }

/* --- HARİTA VE İKONLAR --- */

#map { flex: 1; height: 100%; width: 100%; z-index: 1; transition: background-color 0.5s ease; }

.province-label {

background: white; border: 2px solid var(--primary); padding: 4px 8px;

font-weight: bold; font-size: 13px; border-radius: 4px; box-shadow: 0 2px 5px rgba(0,0,0,0.3);

}

.hidden { display: none !important; }

</style>

</head>

<div>

<div class="title1">Türkiye Nüfus Yoğunluğu Portalı</div>

<div class="title2">Muhammed Yusuf OLGUN | Güncelleme: 22 Ağustos 2026</div>

</div>

<span class="search-label">İl Seçin:</span>

<option value="">İl Yükleniyor...</option>

</select>

<span class="hint">(Sıfırla)</span>

</div>

<div class="right">Veri Kaynağı: TÜİK ADNKS<br> Güncel İstatistikler</div>

</div>

<h3>İl Nüfus Detayları</h3>

</div>

</div>

let map;

let infoLayer;

// TÜİK En Son Nüfus Verileri Veritabanı (Örneklem ve Başlıca İller)

const populationData = [

{ id: "34", name: "İstanbul", lat: 41.0082, lon: 28.9784, pop: 15754053, male: 7851344, female: 7902709, density: 3010, share: "%18,30" },

{ id: "06", name: "Ankara", lat: 39.9208, lon: 32.8541, pop: 5910320, male: 2911853, female: 2998467, density: 232, share: "%6,87" },

{ id: "35", name: "İzmir", lat: 38.4192, lon: 27.1287, pop: 4504185, male: 2227738, female: 2276447, density: 371, share: "%5,23" },

{ id: "16", name: "Bursa", lat: 40.1828, lon: 29.0665, pop: 3263011, male: 1628212, female: 1634799, density: 305, share: "%3,79" },

{ id: "07", name: "Antalya", lat: 36.8969, lon: 30.7133, pop: 2777677, male: 1397014, female: 1380663, density: 132, share: "%3,23" },

{ id: "42", name: "Konya", lat: 37.8667, lon: 32.4833, pop: 2343409, male: 1163850, female: 1179559, density: 59, share: "%2,72" },

{ id: "01", name: "Adana", lat: 37.0000, lon: 35.3213, pop: 2283609, male: 1141614, female: 1141995, density: 162, share: "%2,65" },

{ id: "63", name: "Şanlıurfa", lat: 37.1591, lon: 38.7969, pop: 2265800, male: 1142783, female: 1123017, density: 119, share: "%2,63" },

{ id: "27", name: "Gaziantep", lat: 37.0662, lon: 37.3833, pop: 2222415, male: 1119557, female: 1102858, density: 315, share: "%2,58" },

{ id: "41", name: "Kocaeli", lat: 40.7654, lon: 29.9408, pop: 2161171, male: 1088753, female: 1072418, density: 580, share: "%2,51" },

{ id: "33", name: "Mersin", lat: 36.8121, lon: 34.6415, pop: 1956428, male: 977092, female: 979336, density: 125, share: "%2,27" },

{ id: "21", name: "Diyarbakır", lat: 37.9144, lon: 40.2306, pop: 1852356, male: 935763, female: 916593, density: 121, share: "%2,15" },

{ id: "31", name: "Hatay", lat: 36.2023, lon: 36.1604, pop: 1577531, male: 797385, female: 780146, density: 275, share: "%1,83" },

{ id: "45", name: "Manisa", lat: 38.6191, lon: 27.4289, pop: 1477756, male: 741193, female: 736563, density: 113, share: "%1,72" },

{ id: "38", name: "Kayseri", lat: 38.7312, lon: 35.4787, pop: 1458991, male: 728836, female: 730155, density: 87, share: "%1,69" },

{ id: "55", name: "Samsun", lat: 41.2867, lon: 36.33, pop: 1392403, male: 689283, female: 703120, density: 148, share: "%1,62" },

{ id: "10", name: "Balıkesir", lat: 39.6484, lon: 27.8826, pop: 1284517, male: 638871, female: 645646, density: 87, share: "%1,49" },

{ id: "59", name: "Tekirdağ", lat: 40.9781, lon: 27.5119, pop: 1208441, male: 615806, female: 592635, density: 342, share: "%1,40" },

{ id: "09", name: "Aydın", lat: 37.8444, lon: 27.8458, pop: 1172107, male: 580536, female: 591571, density: 148, share: "%1,36" },

{ id: "46", name: "Kahramanmaraş", lat: 37.5858, lon: 36.9371, pop: 1146278, male: 584074, female: 562204, density: 78, share: "%1,33" },

{ id: "54", name: "Sakarya", lat: 40.7569, lon: 30.3783, pop: 1123693, male: 563586, female: 560107, density: 226, share: "%1,31" },

{ id: "65", name: "Van", lat: 38.4891, lon: 43.4089, pop: 1112013, male: 566544, female: 545469, density: 53, share: "%1,29" },

{ id: "48", name: "Muğla", lat: 37.2153, lon: 28.3636, pop: 1099547, male: 558628, female: 540919, density: 86, share: "%1,28" },

{ id: "20", name: "Denizli", lat: 37.7765, lon: 29.0864, pop: 1060975, male: 526573, female: 534402, density: 87, share: "%1,23" },

{ id: "26", name: "Eskişehir", lat: 39.7767, lon: 30.5206, pop: 927956, male: 461180, female: 466776, density: 68, share: "%1,08" },

{ id: "47", name: "Mardin", lat: 37.3212, lon: 40.7245, pop: 903576, male: 453777, female: 449799, density: 105, share: "%1,05" },

{ id: "61", name: "Trabzon", lat: 41.0015, lon: 39.7178, pop: 823323, male: 408242, female: 415081, density: 177, share: "%0,96" },

{ id: "52", name: "Ordu", lat: 40.9839, lon: 37.8764, pop: 768087, male: 382776, female: 385311, density: 131, share: "%0,89" },

{ id: "44", name: "Malatya", lat: 38.3552, lon: 38.3095, pop: 755854, male: 378686, female: 377168, density: 63, share: "%0,88" },

{ id: "03", name: "Afyonkarahisar", lat: 38.7507, lon: 30.5567, pop: 751808, male: 376802, female: 375006, density: 53, share: "%0,87" },

{ id: "25", name: "Erzurum", lat: 39.9043, lon: 41.2679, pop: 736877, male: 366932, female: 369945, density: 29, share: "%0,86" },

{ id: "72", name: "Batman", lat: 37.8812, lon: 41.1351, pop: 662626, male: 335382, female: 327244, density: 142, share: "%0,77" },

{ id: "58", name: "Sivas", lat: 39.7477, lon: 37.0179, pop: 631401, male: 315268, female: 316133, density: 22, share: "%0,73" },

{ id: "02", name: "Adıyaman", lat: 37.7648, lon: 38.2786, pop: 617821, male: 312881, female: 304940, density: 83, share: "%0,72" },

{ id: "60", name: "Tokat", lat: 40.3167, lon: 36.55, pop: 614141, male: 305975, female: 308166, density: 61, share: "%0,71" },

{ id: "23", name: "Elazığ", lat: 38.681, lon: 39.2264, pop: 605678, male: 299091, female: 306587, density: 68, share: "%0,70" },

{ id: "67", name: "Zonguldak", lat: 41.4564, lon: 31.7987, pop: 585203, male: 290246, female: 294957, density: 177, share: "%0,68" },

{ id: "17", name: "Çanakkale", lat: 40.1553, lon: 26.4142, pop: 573976, male: 284409, female: 289567, density: 58, share: "%0,67" },

{ id: "73", name: "Şırnak", lat: 37.5190, lon: 41.9167, pop: 573666, male: 296986, female: 276680, density: 80, share: "%0,67" },

{ id: "43", name: "Kütahya", lat: 39.4167, lon: 29.9833, pop: 570478, male: 281375, female: 289103, density: 47, share: "%0,66" },

{ id: "80", name: "Osmaniye", lat: 37.0742, lon: 36.2472, pop: 564123, male: 283982, female: 280141, density: 175, share: "%0,66" },

{ id: "19", name: "Çorum", lat: 40.5506, lon: 34.9556, pop: 519590, male: 258085, female: 261505, density: 41, share: "%0,60" },

{ id: "04", name: "Ağrı", lat: 39.7191, lon: 43.0503, pop: 491489, male: 254223, female: 237266, density: 43, share: "%0,57" },

{ id: "28", name: "Giresun", lat: 40.9128, lon: 38.3895, pop: 455074, male: 227438, female: 227636, density: 65, share: "%0,53" },

{ id: "32", name: "Isparta", lat: 37.7648, lon: 30.5566, pop: 445303, male: 219724, female: 225579, density: 52, share: "%0,52" },

{ id: "68", name: "Aksaray", lat: 38.3687, lon: 34.037, pop: 441136, male: 220441, female: 220695, density: 57, share: "%0,51" },

{ id: "22", name: "Edirne", lat: 41.6771, lon: 26.5557, pop: 422438, male: 212403, female: 210035, density: 67, share: "%0,49" },

{ id: "81", name: "Düzce", lat: 40.8438, lon: 31.1565, pop: 415622, male: 207675, female: 207947, density: 167, share: "%0,48" },

{ id: "66", name: "Yozgat", lat: 39.8181, lon: 34.8147, pop: 413208, male: 208491, female: 204717, density: 29, share: "%0,48" },

{ id: "49", name: "Muş", lat: 38.9462, lon: 41.4913, pop: 389127, male: 197610, female: 191517, density: 47, share: "%0,45" },

{ id: "37", name: "Kastamonu", lat: 41.3887, lon: 33.7827, pop: 379934, male: 188390, female: 191544, density: 28, share: "%0,44" },

{ id: "39", name: "Kırklareli", lat: 41.7333, lon: 27.2167, pop: 379595, male: 191878, female: 187717, density: 60, share: "%0,44" },

{ id: "51", name: "Niğde", lat: 37.9667, lon: 34.6833, pop: 374492, male: 187502, female: 186990, density: 50, share: "%0,43" },

{ id: "64", name: "Uşak", lat: 38.6823, lon: 29.4082, pop: 374405, male: 185487, female: 188918, density: 72, share: "%0,43" },

{ id: "13", name: "Bitlis", lat: 38.4006, lon: 42.1095, pop: 360423, male: 186601, female: 173822, density: 42, share: "%0,42" },

{ id: "53", name: "Rize", lat: 41.0201, lon: 40.5234, pop: 346947, male: 173549, female: 173398, density: 87, share: "%0,40" },

{ id: "05", name: "Amasya", lat: 40.6499, lon: 35.8353, pop: 342242, male: 172102, female: 170140, density: 60, share: "%0,40" },

{ id: "56", name: "Siirt", lat: 37.9333, lon: 41.95, pop: 332369, male: 169048, female: 163321, density: 61, share: "%0,39" },

{ id: "14", name: "Bolu", lat: 40.7350, lon: 31.6061, pop: 327173, male: 162989, female: 164184, density: 39, share: "%0,38" },

{ id: "50", name: "Nevşehir", lat: 38.6939, lon: 34.7145, pop: 320150, male: 157815, female: 162335, density: 59, share: "%0,37" },

{ id: "77", name: "Yalova", lat: 40.65, lon: 29.2667, pop: 311635, male: 155593, female: 156042, density: 373, share: "%0,36" },

{ id: "71", name: "Kırıkkale", lat: 39.8468, lon: 33.5153, pop: 282830, male: 142104, female: 140726, density: 63, share: "%0,33" },

{ id: "12", name: "Bingöl", lat: 38.8854, lon: 40.498, pop: 282299, male: 141831, female: 140468, density: 34, share: "%0,33" },

{ id: "30", name: "Hakkari", lat: 37.5833, lon: 43.7333, pop: 279681, male: 146241, female: 133440, density: 38, share: "%0,32" },

{ id: "15", name: "Burdur", lat: 37.7262, lon: 30.2893, pop: 277226, male: 139689, female: 137537, density: 40, share: "%0,32" },

{ id: "36", name: "Kars", lat: 40.6167, lon: 43.1, pop: 268991, male: 138282, female: 130709, density: 27, share: "%0,31" },

{ id: "70", name: "Karaman", lat: 37.1759, lon: 33.2287, pop: 262355, male: 130905, female: 131450, density: 29, share: "%0,30" },

{ id: "78", name: "Karabük", lat: 41.2061, lon: 32.6204, pop: 249614, male: 126021, female: 123593, density: 61, share: "%0,29" },

{ id: "40", name: "Kırşehir", lat: 39.1425, lon: 34.1709, pop: 242777, male: 120876, female: 121901, density: 37, share: "%0,28" },

{ id: "24", name: "Erzincan", lat: 39.75, lon: 39.5, pop: 239625, male: 121927, female: 117698, density: 20, share: "%0,28" },

{ id: "11", name: "Bilecik", lat: 40.1451, lon: 29.9796, pop: 228995, male: 116200, female: 112795, density: 53, share: "%0,27" },

{ id: "57", name: "Sinop", lat: 42.0231, lon: 35.1531, pop: 225848, male: 112000, female: 113848, density: 38, share: "%0,26" },

{ id: "74", name: "Bartın", lat: 41.6344, lon: 32.3375, pop: 206663, male: 102500, female: 104163, density: 98, share: "%0,24" },

{ id: "76", name: "Iğdır", lat: 39.9167, lon: 44.0333, pop: 205071, male: 104500, female: 100571, density: 56, share: "%0,24" },

{ id: "18", name: "Çankırı", lat: 40.6013, lon: 33.6134, pop: 200549, male: 101000, female: 99549, density: 26, share: "%0,23" },

{ id: "75", name: "Ardahan", lat: 41.1105, lon: 42.7022, pop: 90392, male: 46500, female: 43892, density: 17, share: "%0,11" },

{ id: "62", name: "Tunceli", lat: 39.3074, lon: 39.5469, pop: 85083, male: 43500, female: 41583, density: 11, share: "%0,11" },

{ id: "69", name: "Bayburt", lat: 40.2552, lon: 40.2249, pop: 82836, male: 42000, female: 40836, density: 22, share: "%0,10" },

{ id: "79", name: "Kilis", lat: 36.7184, lon: 37.1212, pop: 157363, male: 79500, female: 77863, density: 108, share: "%0,18" }

];

function initMap() {

map = L.map('map').setView([39.0, 35.0], 6);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {

}).addTo(map);

infoLayer = L.layerGroup().addTo(map);

}

// Tüm İlleri Haritaya Nüfus Etiketleriyle Yerleştir

function loadProvincesToMap() {

infoLayer.clearLayers();

populationData.forEach(prov => {

const labelIcon = L.divIcon({

html: `<div style="background:#fff; border:1px solid #2c3e50; padding:2px 6px; border-radius:4px; font-size:11px; font-weight:bold; box-shadow:0 1px 3px rgba(0,0,0,0.2);">${prov.name}<br><span style="color:#27ae60; font-weight:normal;">${prov.pop.toLocaleString('tr-TR')}</span></div>`,

className: 'province-label',

iconSize: [80, 40],

iconAnchor: [40, 20]

});

const marker = L.marker([prov.lat, prov.lon], { icon: labelIcon }).addTo(infoLayer);

marker.on('click', () => {

$('#province-select').val(prov.id).trigger('change');

});

}

$(document).ready(function() {

initMap();

loadProvincesToMap();

$('#province-select').select2({ placeholder: "Nüfus Bilgisi İçin İl Seçin...", allowClear: true });

$('#province-select').empty().append(new Option("Nüfus Bilgisi İçin İl Seçin...", ""));

const sortedProvinces = [...populationData].sort((a, b) => a.name.localeCompare(b.name, 'tr'));

sortedProvinces.forEach(prov => {

const option = new Option(prov.name, prov.id);

$('#province-select').append(option);

});

// İL SEÇİldİĞİNDE

$('#province-select').on('change', function() {

const provinceId = $(this).val();

if(provinceId) {

const prov = populationData.find(p => p.id === provinceId);

if(prov) {

$('#province-select').next('.select2-container').addClass('hidden');

$('.search-label').addClass('hidden');

$('#selected-province-title').removeClass('hidden');

$('#p-name').text(prov.name + " Nüfus Analizi");

// Arka planı çok açık yeşile boya ve sınır/odak hissi ver

$('#map').css('background-color', '#d4efdf');

$('#sidebar').removeClass('hidden');

map.flyTo([prov.lat, prov.lon], 9, { duration: 1.5 });

showProvinceInfo(prov);

}

});

// SIFIRLAMA

$('#selected-province-title').on('click', function() {

$('#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');

$('#map').css('background-color', '#fff');

map.flyTo([39.0, 35.0], 6);

});

function showProvinceInfo(prov) {

const content = $('#province-info-content');

content.html(`

<div class="info-row"><span>Toplam Nüfus:</span> <span>${prov.pop.toLocaleString('tr-TR')}</span></div>

<div class="info-row"><span>Erkek Nüfus:</span> <span>${prov.male.toLocaleString('tr-TR')}</span></div>

<div class="info-row"><span>Kadın Nüfus:</span> <span>${prov.female.toLocaleString('tr-TR')}</span></div>

<div class="info-row"><span>Nüfus Yoğunluğu:</span> <span>${prov.density} kişi / km²</span></div>

<div class="info-row"><span>Türkiye Payı:</span> <span>${prov.share}</span></div>

</div>

<p style="font-size:12px; color:#bdc3c7; margin-top:10px; font-style:italic;">* Veriler TÜİK Adrese Dayalı Nüfus Kayıt Sistemi (ADNKS) sonuçlarına dayanmaktadır.</p>

`);

}

</script>

</body>

</html>