JSFiddle - React, Tailwind, and code Playground

by mpmckenna8

HTML

<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.3.1/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.3.1/mapbox-gl.css">
<body>

<div id='map'></div>    
  

</body>

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoibXBtY2tlbm5hOCIsImEiOiJfYWx3RlJZIn0.v-vrWv_t1ytntvWpeePhgQ';

var spots = {
  Guinea:[-9.67245412537743, 9.94924374363486],
  Liberia:[-9.62904867252674, 6.43479049853245],
  Sierra:[-11.8494487928957, 8.46752953111708]
}


mapboxgl.util.getJSON('https://www.mapbox.com/mapbox-gl-styles/styles/outdoors-v5.json', function (err, style) {
  if (err) throw err;




  style.layers.push({
    "id": "bounding",
    "source": "bounding",
    "type": "line",
    "render": {

    "type":"line",
    "line-join":"round"

  },
"style":{
  "line-color":"red",
  "width":{
    "stops": [[2, 1], [11, 1], [13, 2], [15, 5]]
  },
  "line-opacity":0.5
}});

var map = new mapboxgl.Map({
  container: 'map',
  style: style,
  center: [spots.Guinea[1], spots.Guinea[0]],
  zoom: 3
});


//setTimeout(zoomin, 500)

var bounds = new mapboxgl.LatLngBounds([

      [
          -3.75732421875,
          3.381823735328289
        ],

         [  -17.8417, 14.0726]


        ]);


var geoJSON = {
   "type": "FeatureCollection",
   "features": [
     {
       "type": "Feature",
       "geometry": {
         "type": "LineString",
         "coordinates": [
         [ bounds.getNorthEast().lng, bounds.getNorthEast().lat],  [bounds.getSouthEast().lng, bounds.getSouthEast().lat], [bounds.getSouthWest().lng, bounds.getSouthWest().lat],[bounds.getNorthWest().lng, bounds.getNorthWest().lat]
          ]
       },
       "properties": {
         "title": "bounding",
         "id":"bounding"

       }
     }
   ]};


var NeastLat = parseInt(bounds.getNorthEast().lat);
var northlng = bounds.getNorthWest();


console.log((NeastLat))

   var geoWork = {
      "type": "FeatureCollection",
      "features": [
        {
          "type": "Feature",
          "geometry": {
            "type": "LineString",
            "coordinates": [
            [-20, 28],  [-20, 34], [14,4],[14,21],[-20, 21]
             ]
          },
          "properties": {
            "title": "bounding",
  ...