JSFiddle - React, Tailwind, and code Playground

by J. Albert Bowden

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
<div id='map'></div>
<input type="radio" name="ethnic" id="Ethnic1" checked />
<label for="Ethnic1">Ethnic1</label>
<input type="radio" name="ethnic" id="Ethnic2" />
<label for="Ethnic2">Ethnic2</label>

CSS

body {
  padding: 0;
  margin: 0;
}

html,
body,
#map {
  height: 90%;
  width: 100%;
}

JavaScript

var map = L.map('map', {
  center: [30.468691297348148, 63.12744140625],
  zoom: 7
}).addLayer(new L.TileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"));

var myData = [{
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "properties": {
      "Name": "Gulran",
      "Province": "Hirat",
      "Ethnic1": 19,
      "Ethnic2": 32,
      "Ethnic3": 10,
      "Ethnic4": 0,
      "Ethnic5": 10,
      "Ethnic6": 0
    },
    "geometry": {
      "type": "Polygon",
      "coordinates": [
        [
          [60.941162109375, 29.897805610155874],
          [61.92993164062499, 31.034108344903512],
          [63.34716796874999, 31.3348710339506],
          [64.05029296875, 30.401306519203583],
          [64.412841796875, 29.735762444449076],
          [64.09423828125, 29.36302703778376],
          [62.29248046875, 29.36302703778376],
          [60.941162109375, 29.897805610155874]
        ]
      ]
    }
  }, {
    "type": "Feature",
    "properties": {
      "Name": "Chahar Burjak",
      "Province": "Nimroz",
      "Ethnic1": 25,
      "Ethnic2": 12,
      "Ethnic3": 3,
      "Ethnic4": 1,
      "Ethnic5": 0,
      "Ethnic6": 0
    },
    "geometry": {
      "type": "Polygon",
      "coordinates": [
        [
          [63.38012695312499, 31.3348710339506],
          [65.06103515625, 31.80289258670676],
          [65.6982421875, 31.156408414557],
          [66.016845703125, 30.467614102257855],
          [65.291748046875, 30.164126343161097],
          [64.22607421875, 30.0405664305846],
          [63.38012695312499, 31.3348710339506]
        ]
      ]
    }
  }]
}];

function setEthnic1Color(d) {
  return d > 100 ? '#FC4E08' :
    d > 50 ? '#FD8D1A' :
    d > 20 ? '#FEB22A' :
    d > 10 ? '#FED954' :
    '#FFED80';
}

function Ethnic1Style(feature) {
  return {
    fillColor: setEthnic1Color(feature.properties.Ethnic1),
    weight: 2,
    opacity: 1,
    color: 'white',
    dashArray: '3',
    fillOpacity: 0.7
  };
}

function...