Simply adding points tileset layer with Mapbox js

Question

I need to simply add a tileset of points. No idea why I'm not able to do this.

Here's the fiddle, below is the js code.

https://jsfiddle.net/qaehnvs9/3/

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

var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/light-v9',
  hash: true,
  center: [0,0],
  zoom: 1,
  pitchWithRotate: false,
})

/////////////////////////////////////////////////////////////
//Global Settlements
/////////////////////////////////////////////////////////////

map.on('load', function () {

map.addLayer({
'id': 'global_settlements_id',
    'source': {
    'type': 'vector',
    'url': 'mapbox://nittyjee.c9okffto'
    },
//'source-layer': 'shapefile_export-4f28wr',
'source-layer': 'shp-2lsmbo',
'type': 'symbol',
'maxzoom': 6,

'layout': {
  'symbol-placement': 'point',
}

});

});

Answer 1

For dots/points, I needed to add it as a circle type.

Updated fiddle: https://jsfiddle.net/qaehnvs9/4/

var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/light-v9',
  hash: true,
  center: [0,0],
  zoom: 1,
  pitchWithRotate: false,
})

/////////////////////////////////////////////////////////////
//Global Settlements
/////////////////////////////////////////////////////////////

map.on('load', function () {

map.addLayer({
'id': 'global_settlements_id',
        'type': 'circle',
        'source': {
            type: 'vector',
            url: 'mapbox://nittyjee.c9okffto'
        },
        'source-layer': 'shp-2lsmbo',
        'paint': {
            'circle-radius': 4,
            'circle-color': '#e55e5e'
        }
});

});