How to add a custom marker by url in Mapbox?

Question

I based my map on the mapbox example. Markers there are set to 'circles'. How to add a custom marker by url, in case of the following code?

function makeGeoJSON(csvData) {
csv2geojson.csv2geojson(
  csvData,
  {
    latfield: "Latitude",
    lonfield: "Longitude",
    delimiter: ","
  },
  function(err, data) {
    data.features.forEach(function(data, i) {
      data.properties.id = i;
    });

    geojsonData = data;
    // Add the the layer to the map
    map.addLayer({
      id: "locationData",
      type: "circle",
      source: {
        type: "geojson",
        data: geojsonData
      },
      paint: {
        "circle-radius": 5, // size of circles
        "circle-color": "green", // color of circles
        "circle-stroke-color": "white",
        "circle-stroke-width": 1,
        "circle-opacity": 0.7
      }
    });
  }
);

Something like this docs.mapbox.com/mapbox-gl-js/example/custom-marker-icons ? — Anatoly Sukhanov
I don't see the relevance of the included code snippet to the question. Are you asking about Markers or symbol layers? — Steve Bennett
Included code snippet create the markers on my map. The data is taken from CSV spreadsheet. In know how to change the marker for custom one in case of the 'standard' solution (Anatoly example) where all of the data is placed directly in the code, not sourced from CSV and turned into layer. That's my struggle. — Viktoria O

Steve Bennett Steve Bennett · Accepted Answer · 2020-11-04T04:34:56

You need to use map.loadImage and map.addImage to add the custom icon, as in this Mapbox example:

map.loadImage('http://placekitten.com/50/50', function(error, image) {

    if (error) throw error;
    // Add the loaded image to the style's sprite with the ID 'kitten'.
    map.addImage('kitten', image);

});

Then you need to use a symbol layer referencing that icon (kitten in this case).

How to add a custom marker by url in Mapbox?

1 Answers