Mapbox-gl-js-template

HTML

<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.css">
<div id='map' class="myMap"></div>

CSS

html,
body {
  height: 100%;
}

#map {
  height: 100%;
  width: 100%;
}

JavaScript

mapboxgl.accessToken =  'pk.eyJ1IjoibW9sbHltZXJwIiwiYSI6ImNpazdqbGtiZTAxbGNocm0ybXJ3MnNzOHAifQ.5_kJrEENbBWtqTZEv7g1-w';

var geoData = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "properties": {
      "LTYPE": "MFG"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [-80.691132,
        34.202929
      ]
    }
  }, {
    "type": "Feature",
    "properties": {
      "LTYPE": "MFG"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [-80.046402,
        32.939921
      ]
    }
  }, {
    "type": "Feature",
    "properties": {
      "LTYPE": "CUST"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [-80.046402,
        32.939921
      ]
    }
  }, {
    "type": "Feature",
    "properties": {
      "LTYPE": "CUST"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [-80.046402,
        32.939921
      ]
    }
  }, {
    "type": "Feature",
    "properties": {},
    "geometry": {
      "type": "LineString",
      "coordinates": [
        [-80.691132,
          34.202929
        ],
        [-80.046402,
          32.939921
        ]
      ]
    }
  }, {
    "type": "Feature",
    "properties": {},
    "geometry": {
      "type": "LineString",
      "coordinates": [
        [-80.046402,
          32.939921
        ],
        [-80.046402,
          32.939921
        ]
      ]
    }
  }]
};
var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/light-v9',
  zoom: 8,
  minZoom: 1.5,
  center: [-80.691132,
    34.202929
  ],
});
map.on('load', function() {
  map.addSource('mapDataSourceId', {
    type: "geojson",
    data: geoData
  });
  addLayer(map);
});

function addLayer(map) {

  map.addLayer({
    'id': 'route',
    'type': 'line',
    'source': 'mapDataSourceId',
    'filter': ['==', '$type', 'LineString'],
    'layout': {
      'line-join': 'round',
      'line-cap': 'round'
    },
    'paint': {
      'line-color': '#3cb2d0',
     ...