Türkiye İl İlçe Seçici Harita: tr-geo-picker

İlçe seçimi (form, required)

mode="ilce", value-type="id". Gönder'e bastığınızda formun POST edeceği veri aşağıda görünür.

—

Kod

<form method="post" action="/kayit">
  <tr-geo-picker name="ilce" required></tr-geo-picker>
  <button>Gönder</button>
</form>
<script type="module" src="tr-geo-picker.min.js"></script>

Sadece il, değer olarak isim

mode="il" value-type="name". İl seçilince akış biter.

—

Kod

<tr-geo-picker name="il" mode="il" value-type="name"></tr-geo-picker>
<!-- form: il=Düzce -->

Popover (kompakt alan)

display="popover". Input yüksekliğinde bir alan; tıklayınca harita paneli açılır. Ayrı alanlar için emit-fields, isim ayracı name-separator=" › ".

—

Kod

<tr-geo-picker name="lokasyon" display="popover"
               value-type="name" name-separator=" › "
               emit-fields></tr-geo-picker>
<!-- form: lokasyon, lokasyon_bolge, lokasyon_il, lokasyon_ilce -->

Tek ile kilitli + önceden seçili

start-il="81" lock-level value="1815". Düzce ilçeleri açılır, Akçakoca seçili gelir, yukarı çıkılamaz.

—

Kod

<!-- edit formu: kayıtlı değer ile açılır -->
<tr-geo-picker name="ilce" start-il="81" lock-level
               value="<%= rs("IlceKodu") %>"></tr-geo-picker>

Filtre: yalnız hizmet verilen yerler

filter property'si ile yalnız Marmara ve Ege illeri seçilebilir; diğerleri gri çizilir.

Kod

const izinli = new Set(['marmara', 'ege']);
el.filter = (item) =>
  item.level === 'bolge' ? izinli.has(item.id)
  : item.level === 'il' ? izinli.has(item.bolge)
  : true;

Özel değerler (`value-type="custom"`)

Katalog data property'siyle verilir; her ilçeye kendi veritabanı id'niz (value) eklenir.

—

Kod

const cat = await fetch('data/catalog.json').then((r) => r.json());
el.data = {
  ...cat,
  ilceler: cat.ilceler.map((c) => ({ ...c, value: dbId[c.id] })),
};
// form: lokasyon_id=ILCE_5521

Event kaydı

Sayfadaki tüm bileşenlerin input, change, tks-navigate ve tks-error event'leri.

Kurulum

npm ile kurun ya da dist/ ve data/ klasörlerini sunucunuza kopyalayın. Çalışmak için başka bir kütüphane gerekmez.

npm install tr-geo-picker

<script type="module" src="/js/tr-geo/dist/tr-geo-picker.min.js"></script>
<tr-geo-picker name="ilce"></tr-geo-picker>

Özellikler

81 il, 973 ilçe: İçişleri Bakanlığı listesi, il kodu olarak plaka numarası.
Form uyumlu: name, required, reset ve doğrulama native input gibi çalışır. Sunucuya düz form alanı gider; PHP, ASP, .NET veya Node fark etmez.
Hafif: ~10 KB gzip, sıfır bağımlılık. Harita verisi yalnız gösterilen seviye için yüklenir.
Erişilebilir: klavyeyle tam kullanım, Türkçe karakter duyarsız arama, ekran okuyucu duyuruları.
Özelleştirilebilir: açık, koyu ve özel temalar; CSS değişkenleri ve ::part().
React, Vue, Angular ve düz HTML ile çalışır; standart bir custom element'tir.

Sık sorulanlar

Formdan ne gönderilir? Varsayılan olarak ilçe kodu (ilce=1815). value-type="name" ile isim, value-type="custom" ile kendi veritabanı id'leriniz gönderilir.

Sadece il seçtirebilir miyim? Evet, mode="il". Form plaka kodunu (il=34) gönderir.

Harita verisi güncel mi? İl ve ilçe listesi e-İçişleri'nden, sınırlar OpenStreetMap tabanlı geoBoundaries'ten alınır ve paketle birlikte gelir. Dış servise istek atılmaz.

Bütün seçenekler: API dokümanı, örnekler, tema.