JSFiddle - React, Tailwind, and code Playground

by grant

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=weather,visualization"></script>
<div class="container">
<div id="map"></div>

<div class="row-holder">
      <div class="blue checkbox float-left"> 
        <input id="hen" type="checkbox" checked />
        <label>Hen</label>
    </div>
    <div class="green checkbox float-left"> 
        <input id="quail" type="checkbox" checked />
        <label>Quail</label>
   </div>
  
   <div class="red checkbox float-left"> 
      <input id="rooster" type="checkbox" checked />
      <label>Rooster</label>
  </div>
</div>


  <div id="url"></div>
  <div id="layer"></div>
  <div id="status"></div>
</div>

CSS

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
.container {
  width: 100%;
    position: absolute;
    top: 0;
    padding: 0;
    margin: 25px 50px 50px 25px;
  }
#status {

    position: absolute;
    margin: 15px 1px 1px 1px;
  }
  
#map {
  width: 650px;
  height: 450px;
}
#controls {
		margin: 10px 0px 0px 0px;
	}
.red input[type=checkbox]:checked + label {
  color: red;
  font-style: normal;
}
.green input[type=checkbox]:checked + label {
  color: green;
  font-style: normal;
}
 .blue input[type=checkbox]:checked + label {
  color: blue;
  font-style: normal;
}
 .yellow input[type=checkbox]:checked + label {
  color: yellow;
  font-style: normal;
}
.float-left {
    float: left;
    
   /* width: 300px; */
    width: 33%;
    
    /* or 33% for equal width independent of parent width */
}

/* Optional: Makes the sample page fill the window. */

JavaScript

var data = {
	"markers": [
		{
		"name": "Kerner",
		"layer":1,
		"weight": 4, 
		"icon": "rooster",
		"lat": 44.2331472663154,
		"lng":  -116.87813299010107
		},
		{
		"name": "Sweet",
		"layer":1,
		"weight": 2,
		"icon": "hen",
		"lat": 44.23708302599145, 
		"lng": -116.91160695760422
		},
		{
		"name": "Snake",
		"layer":2,
		"weight": 12,
		"icon": "hen",
		"lat": 44.23094309064884, 
		"lng": -116.96188777430531
		},
    {
		"name": "Confl",
		"layer":3,
		"weight": 1,
		"icon": "quail",
		"lat": 44.23654309064884, 
		"lng": -116.96358777430531
		},
    {
		"name": "new",
		"layer":5,
		"weight": 20,
		"icon": "quail",
		"lat": 44.23654309064884, 
		"lng": -116.90358777430531
		}
	]
};

var iconBase = 'images/icons/';
		var icons = {
			Hen: {
				icon: iconBase + 'hen.png'
			},
			Miss: {
				icon: iconBase + 'shell.png'
			},
			Rooster: {
				icon: iconBase + 'rooster.png'
			},
			Grape: {
				icon: iconBase + 'grape.png'
			},
			Corn: {
				icon: iconBase + 'corn.png'
			},
			Apple: {
				icon: iconBase + 'apple.png'
			},
			Quail: {
				icon: iconBase + 'quail.png'
			}
		};
  
var map;
var layers = {};
var blue = [
     "rgba(0, 255, 255, 0)",
    "rgba(0, 255, 255, 1)",
    "rgba(0, 191, 255, 1)",
    "rgba(0, 127, 255, 1)",
    "rgba(0, 63, 255, 1)",
    "rgba(0, 0, 255, 1)",
    "rgba(0, 0, 223, 1)",
    "rgba(0, 0, 191, 1)",
    "rgba(0, 0, 159, 1)",
    "rgba(0, 0, 127, 1)",
    "rgba(63, 0, 91, 1)",
    "rgba(127, 0, 63, 1)",
    "rgba(191, 0, 31, 1)",
    "rgba(255, 0, 0, 1)"
            ];
            
var yellow = [
            'rgba(255, 255, 0, 0)',
            'rgba(255, 255, 0, 0.9)',
            'rgba(255, 255, 0, 0.8)',
            'rgba(255, 255, 0, 0.7)',
            'rgba(255, 255, 0, 0.6)',
            'rgba(255, 255, 0, 0.5)',
            'rgba(255, 255, 0, 0.4)',
            'rgba(255, 0, 0, 0.3)',
            'rgba(255, 0, 0, 0.2)',
            'rgba(255, 0, 0, 0.1)'
            
            
            ];

  var red = [
   ...