JavaScript'siz bir Türkiye haritası: 81 il, tek dosya, sıfır betik
zeytin.net'in yeni zeytin haritası 81 ili gerçek sınırlarıyla çiziyor, ilin üstüne gelince rakamları kart olarak açıyor — ve bunu tek satır JavaScript kullanmadan yapıyor. Nasıl yapıldığını ve neden böyle yapıldığını anlattık.
Web'de interaktif harita denince akla önce bir kütüphane gelir: Leaflet, D3, Mapbox. Hepsi iyi araçlar, ama hepsinin bedeli aynı — yüzlerce kilobayt JavaScript, harici bir sunucuya bağımlılık ve betik kapalıysa bomboş bir kutu.
zeytin.net'in yeni zeytin haritası başka bir yol denedi: tek satır JavaScript yok. 81 ilin tamamı gerçek sınır verisiyle çiziliyor, ilin üstüne gelince o ilin üretim rakamları bir kart olarak açılıyor, bölgeye tıklayınca o bölgenin çeşitleri listeleniyor. Hepsi tarayıcının kendi yetenekleriyle.
Renkler bölgeleri ayırıyor: koyu yeşil Ege, açık yeşil Marmara, altın sarısı Akdeniz, kahverengi Güneydoğu, turkuaz Karadeniz. Soluk kalan iller zeytin yetiştirmeyen iller — ama yine de çiziliyorlar, çünkü olmazlarsa Türkiye'nin şekli eksik görünüyor.
Nasıl çalışıyor?
Üç tarayıcı özelliği yetti:
- SVG
<title>— her il yolunun içine konan bu öğeyi tarayıcı kendiliğinden ipucu olarak gösterir. Hiçbir olay dinleyicisi gerekmez. - CSS
:has()— "içinde imlecin üzerinde olduğu bir yol bulunan harita" diye seçici yazılabiliyor artık. Kartların görünürlüğü buna bağlandı. Bu seçici birkaç yıl önce mümkün değildi; bugün tüm güncel tarayıcılarda çalışıyor. - CSS
:target— bölge rozetine tıklayınca adres çubuğuna düşen#egegibi bir çapa, ilgili bölümü açıyor. Sekme mantığı, betiksiz.
Bir de görünmeyen bir iş var: sınır verisinin sadeleştirilmesi. Ham GeoJSON sınırları 241 KB tutuyordu — bir harita için kabul edilemez. Douglas-Peucker algoritmasıyla, gözle görülür bir bozulma olmadan 29,7 KB'a indirildi. Sayfanın tamamı bugün 95 KB.
Neden bu kadar uğraşıldı?
Birincisi hız. Betik yoksa ayrıştırılacak, derlenecek, çalıştırılacak bir şey de yok; harita HTML gelir gelmez ekranda oluyor. İkincisi dayanıklılık: reklam engelleyici, kurumsal güvenlik duvarı, eski cihaz — hiçbiri haritayı bozamıyor. Üçüncüsü de arama motorları: harita bir resim değil, metin. İlin adı da rakamı da sayfanın kaynağında yazılı.
Kabul edelim, bedeli de var. Yakınlaştırma yok, sürükleme yok. Ama bu haritanın işi zaten gezinmek değil — "hangi ilde ne kadar zeytin var" sorusuna tek bakışta cevap vermek.
Arkasındaki veri
Harita bir görselden ibaret değil; altında 45 il ve 5 bölge için ayrı sayfa var. Her ilin 2024-25 sezonu dane zeytin ve zeytinyağı üretimi, sofralık/yağlık ayrımı, çeşitleri ve o yöreye özgü notları yazılı. Birkaç örnek:
- Karaman — Ermenek Barajı su tutunca ilçenin iklimi değişti; zeytin ağacı sayısı 500'den 200 bine çıktı. 800-900 metrede yetişen daneler kıyıdakilerden 20 gün geç olgunlaşıyor.
- Artvin — Yusufeli'nin Butko zeytini 2006'da Pekin'de Üstün Lezzet Ödülü aldı. Ağaçlar 8-12 metre; hasat merdivenle yapılıyor.
- Şırnak — Kumçatı, Kızılsu ve Cizre genotipleri ölçüldüğünde Ayvalık ve Gemlik'le yarışabildikleri görüldü. Kumçatı'nın et oranı %88,06.
Haritanın tamamını ve 38 zeytin çeşidinin bölge dağılımını zeytin.net/zeytin-haritasi adresinde bulabilirsiniz.
