A continuación se muestra la URL que paso para obtener la API para obtener la imagen. Funciona muy bien, pero el pin de ubicación es gris y necesito que sea #800080 (púrpura). Entiendo que hay un parámetro de color de marcador, pero no estoy seguro de cómo agregarlo a la cadena baseUrl a continuación. He probado varias versiones diferentes.

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

Documentación relevante que brinda parámetros adicionales pero no ejemplos claros:https://docs.mapbox.com/api/maps/static-images/#overlay-options

Código:

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

¡Gracias de antemano a cualquier persona con experiencia en la API de Mapbox!