CODEWITHSUNDEEP
mapboxmapbox-gl-jsmapbox-glmapbox-marker
Viktoria O
Viktoria O

Reputation: 17

How to add a custom marker by url in Mapbox?

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
      }
    });
  }
);

Upvotes: 1

Views: 751

Answers (1)

Steve Bennett
Steve Bennett

Reputation: 126205

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).

Upvotes: 2

Related Questions