JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//api.mapbox.com/mapbox.js/v2.2.2/mapbox.css">
<script src="//api.mapbox.com/mapbox.js/v2.2.2/mapbox.js"></script>
  <body>
    <div id="mapbox"></div>
  </body>

CSS

body {
  margin: 0;
}

html, body, #mapbox {
  height: 100%;
}

JavaScript

L.mapbox.accessToken = 'pk.eyJ1IjoiZG9zcyIsImEiOiI1NFItUWs4In0.-9qpbOfE3jC68WDUQA1Akg';

var map = L.mapbox.map('mapbox', 'mapbox.light').setView([60.37, 95.27], 4);

var collection = [{
  "type": "FeatureCollection",
  "features": [
    {"type":"Feature","properties":{"category":"Aviation","Name":"Plant No 1"},"geometry":{"type":"Point","coordinates":[81.73828125,62.59334083012024]}},
    {"type":"Feature","properties":{"category":"Electrical","Name":"Plant No 2"},"geometry":{"type":"Point","coordinates":[94.5703125,58.722598828043374]}},
    {"type":"Feature","properties":{"category":"Military","Name":"Base 1"},"geometry":{"type":"Point","coordinates":[104.4140625,62.91523303947614]}}
  ]
}];

var myStyle = { radius: 10, fillOpacity: 1, stroke: false, weight: 1, opacity: 1, fill: true, clickable: true };

var allPoints = L.geoJson(collection, {
    pointToLayer: function(feature, latlng){
        return L.circleMarker(latlng, myStyle);
    },
    style: function(feature){
        switch(feature.properties.category){
            case 'Aviation' : return { color: "black" };
            case 'Elecrtical' : return { color: "blue" };
            case 'Military' : return { color: "red" };
        }
    },
    onEachFeature: function(feature, layer){
        layer.bindPopup(feature.properties.Name);
    }
});

var basemapsObj = { 'basic': L.mapbox.tileLayer('mapbox.light'), 'satellite': L.mapbox.tileLayer('mapbox.satellite-afternoon') };

var overlaysObj = { 'All points': allPoints.addTo(map) }

L.control.layers(basemapsObj, overlaysObj, { collapsed: false }).addTo(map);