JSFiddle - React, Tailwind, and code Playground

Using colored markers in Leaflet based on GeoJSON properties

HTML

<script src="https://api.mapbox.com/mapbox.js/v2.2.1/mapbox.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox.js/v2.2.1/mapbox.css">
<link rel="stylesheet" href="https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.css">
<link rel="stylesheet" href="https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.Default.css">
<script src="https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/leaflet.markercluster.js"></script>
<script src="//www.colorado-ohv.com/trailhead.js"></script>
<script src="//www.colorado-ohv.com/trailroute.js"></script>
<div id='map'></div>

CSS

body {
  margins: 0;
  padding: 0;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

JavaScript

// Mapbox Access Token
L.mapbox.accessToken = 'pk.eyJ1IjoibWF0dHJ1c3NvIiwiYSI6IjVlYzk3OTEzOTczZTEwYTMyNDRjZDA4NDY1MjYzNWNmIn0.0wkKxVGJyO8nEKjn2GcV3A';

// Create the map
var map = L.mapbox.map('map', null, {
  minZoom: 7
}).setView([39.117, -105.353], 7);

// Setup basemaps for layer list
var baseMaps = {
  Streets: L.mapbox.tileLayer('mapbox.streets'),
  Outdoors: L.mapbox.tileLayer('mapbox.outdoors'),
  Satellite: L.mapbox.tileLayer('mapbox.satellite'),
};

// Add Streets to the map
baseMaps.Satellite.addTo(map);

//custom icons
var redIcon = new L.Icon({
  iconUrl: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-red.png',
  shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/images/marker-shadow.png',
  iconSize: [25, 41],
  iconAnchor: [12, 41],
  popupAnchor: [1, -34],
  shadowSize: [41, 41]
});
var yellowIcon = new L.Icon({
  iconUrl: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-yellow.png',
  shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/images/marker-shadow.png',
  iconSize: [25, 41],
  iconAnchor: [12, 41],
  popupAnchor: [1, -34],
  shadowSize: [41, 41]
});
var greenIcon = new L.Icon({
  iconUrl: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-green.png',
  shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/images/marker-shadow.png',
  iconSize: [25, 41],
  iconAnchor: [12, 41],
  popupAnchor: [1, -34],
  shadowSize: [41, 41]
});

// Trailhead popup and icon styling
function onEachFeaturetrailhead(feature, layer) {
  if (feature.properties && feature.properties.Trail) {
    layer.bindPopup("<h2>" + feature.properties.Trail + '<br></h2>' 
      + "<li>Low Rating | " + feature.properties.Low_Rating + '<br></li>' 
      + "<li>High Rating | " + feature.properties.High_Ratin + '<br></li>' 
      + "<li>Trail Damage | " + '<a href="' + feature.properties.Link + '">Link</a><br></li>' 
      + "<li>Latitude | " +...