React Turkey Map (Colorful)

Customizable Turkey map

by Ozgur Ozer

HTML

<div id="app"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.24.6/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.development.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.development.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/TurkeyMap.web.js"></script>

<script type="text/babel">
  const colorData = getCityColors(populationByCities)
  const tooltipData = populationByCities

  const TurkeyMap = TurkeyMap.default
  const App = () => {
    return (
      <TurkeyMap
        colorData={colorData}
        tooltipData={tooltipData}
      />
    )
  }
  const root = document.getElementById('app')
  ReactDOM.createRoot(root).render(<App />)
</script>

JavaScript

const populationByCities = {
  34: '15.907.951', // Istanbul
  '06': '5.663.322', // Ankara
  35: '4.462.456', // Izmir
  16: '3.101.833', // Bursa
  '07': '2.548.308', // Antalya
  42: '2.277.017', // Konya
  '01': '2.274.106', // Adana
  27: '2.130.432', // Gaziantep
  41: '1.997.258', // Kocaeli
  33: '1.869.106', // Mersin
  21: '1.791.373', // Diyarbakır
  31: '1.670.712', // Hatay
  45: '1.452.354', // Manisa
  38: '1.421.455', // Kayseri
  26: '1.434.025', // Eskişehir
  10: '1.250.610', // Balıkesir
  32: '1.234.495', // Isparta
  65: '1.149.484', // Van
  20: '1.140.085', // Denizli
  '09': '1.128.975', // Aydın
  48: '1.000.773', // Muğla
  46: '928.779', // Kahramanmaraş
  44: '808.692', // Malatya
  61: '818.223', // Trabzon
  25: '806.785', // Erzurum
  '02': '805.552', // Adıyaman
  63: '833.713', // Şanlıurfa
  23: '758.759', // Elazığ
  66: '751.832', // Yozgat
  55: '742.341', // Samsun
  53: '740.214', // Rize
  50: '741.424', // Nevşehir
  52: '763.719', // Ordu
  58: '691.578', // Sivas
  59: '623.591', // Tekirdağ
  22: '612.377', // Edirne
  '03': '505.992', // Afyonkarahisar
  17: '561.068', // Çanakkale
  54: '560.552', // Sakarya
  80: '548.198', // Osmaniye
  39: '517.452', // Kırklareli
  64: '492.760', // Uşak
  51: '437.979', // Niğde
  47: '484.627', // Mardin
  43: '468.276', // Kütahya
  40: '426.945', // Kırşehir
  56: '472.164', // Siirt
  67: '486.716', // Zonguldak
  28: '461.223', // Giresun
  37: '450.542', // Kastamonu
  49: '448.493', // Muş
  15: '440.512', // Burdur
  18: '424.496', // Çankırı
  60: '433.792', // Tokat
  68: '430.514', // Aksaray
  12: '391.421', // Bingöl
  36: '334.025', // Kars
  57: '303.684', // Sinop
  14: '313.870', // Bolu
  11: '305.834', // Bilecik
  24: '304.747', // Erzincan
  70: '296.321', // Karaman
  72: '294.506', // Batman
  30: '288.839', // Hakkâri
  13: '270.195', // Bitlis
  '08': '247.135', // Artvin
  19: '252.171', // Çorum
  29: '237.918', // Gümüşhane
  71: '241.279', //...