How to add Markers instead of Circles with csv2geojson data - mapbox

Question

I am importing data from a Google Spreadsheet with csv2geojson and it is drawing nice circles for each location with 'paint', I'd rather have wee pin markers though. What is the best way to achieve this?
function makeGeoJSON(csvData) {
csv2geojson.csv2geojson(csvData, {
latfield: 'Latitude',
lonfield: 'Longitude',
delimiter: ','
}, function (err, data) {
map.on('load', function () {
map.addLayer({
'id': 'csvData',
'type': 'circle',
'source': {
'type': 'geojson',
'data': data
},
'paint': {
'circle-radius': 10,
'circle-color': {
property: 'MarkerType',
type: 'categorical',
stops: [
['blue', '#fbb03b'],
['red', '#223b53'],
['pink', '#e55e5e']
]
}
}
});

Answer 1

If you would like to base the icons off of a category in your spreadsheet, you can do so one of two ways. One way to do so would be to make sure to add a column in your spreadsheet, define the name of the icon you'd like to use within the spreadsheet and upload the icons you would like to use in Mapbox Studio. Another way would be to set each category to a specific icon within your code. If you would like to add an image to your points, please take a look at this add an icon to the map example.
In addition, you will need to change your map.addLayer​ function to reference the appropriate icon. I have included my code below, as well as a screenshot of the final result for your reference. {Icon}references the icon property of my geojson (converted from the Google sheets CSV file), which came from the column in my spreadsheet.
My map.addLayer code:
map.addLayer({
'id': 'csvData',
'type': 'symbol',
'source': {
'type': 'geojson',
'data': data
},
'layout': {
'icon-image': '{Icon}',
'icon-size': 1.5,
'icon-padding': 0,
'icon-allow-overlap': true
}
});