CODEWITHSUNDEEP
javascriptmapboxmapbox-gl-js
David Rhodes
David Rhodes

Reputation: 85

How to Add Color to Static Mapbox Image Gotten from API

Below is the URL I pass to fetch API to get the image. It works great but the location pin is grey and I need it to be #800080 (purple). I get there's a marker-color parameter but not sure how to add it to the baseUrl string below. I've tried several different versions.

mapbox static image

const baseUrl = `https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/geojson(%7B%22type%22%3A%22Point%22%2C%22coordinates%22%3A%5B${geoLocation.longitude}%2C${geoLocation.latitude}%5D%7D)/${geoLocation.longitude},${geoLocation.latitude},15/500x300?access_token=${MAPBOX_API_KEY}`;

Relevant documentation which gives additional parameters but no clear examples: https://docs.mapbox.com/api/maps/static-images/#overlay-options

Code:


const getUrlExtension = (url) => {
  return url.split(/[#?]/)[0].split('.').pop().trim();
};

const onImageEdit = async (imgUrl) => {
  const imgExt = getUrlExtension(imgUrl);
  const response = await fetch(imgUrl);
  const blob = await response.blob();
  const file = new File([blob], 'locationImage.' + imgExt, {
      type: blob.type,
  });

  setImage(file);
  setPreviewSrc(response.url);
};

function previewLocation(event) {
  event.preventDefault();
  const MAPBOX_API_KEY ='xyz';
    // baseUrl based on https://docs.mapbox.com/api/maps/static-images/#overlay-options
  const baseUrl = `https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/geojson(%7B%22type%22%3A%22Point%22%2C%22coordinates%22%3A%5B${geoLocation.longitude}%2C${geoLocation.latitude}%5D%7D)/${geoLocation.longitude},${geoLocation.latitude},15/500x300?access_token=${MAPBOX_API_KEY}`;

  onImageEdit(baseUrl);
}

Thanks in advance to anyone with Mapbox API experience!

Upvotes: 0

Views: 415

Answers (1)

Elliott McNary
Elliott McNary

Reputation: 1209

I am unable to get the GeoJSON method to respond to the properties key too! Not sure what's going on there...

I am however able to get a pin showing in that color using the Marker method like the below.

https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/pin-s-l+800080(-87.0186,32.4055)/-87.0186,32.4055,14/500x300?access_token=YOUR_TOKEN_HERE.

Upvotes: 2

Related Questions