My goal is to generate a static image with a text overlay at a point similar to this - https://updates.cluvio.com/labels-for-geojson-charts-195835 It seems as though the text-label property is not respected when using Mapbox static image API and passing in geojson. Im curious if anyone has hashed this out or seen it done? (sorry I don't have enough points to insert the image apparently, you'll have to click)
Example of what I want to accomplish
Here is the HTML file I tried to do this with:
<html lang='en'>
<head>
<meta charset='utf-8' />
<meta name="robots" content="noindex, nofollow" />
<meta name='viewport' content='width=device-width, initial-scale=1' />
<title>Static images with style parameters</title>
<script src="https://unpkg.com/@mapbox/mapbox-sdk/umd/mapbox-sdk.min.js"></script>
<style>
.container {
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<img id="traffic" src="" alt="Mapbox traffic map" />
</div>
</body>
<script>
const mapboxClient = mapboxSdk({ accessToken: 'pk.eyJ1IjoidGlsbGFibGUiLCJhIjoiY2t4dGw0NHljM201YzJvcXdnOWM1aWloZSJ9.0Wnk2puuEx-H_MU5IWvoCQ' });
const geojson = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[-64.73, 32.31],
[-80.19, 25.76],
[-66.09, 18.43],
[-64.73, 32.31]
]
]
}
},
{
"geometry": {
"type": "Point",
"coordinates": [-70.2, 25.2]
},
"type": "Feature",
"properties": {
"name": "workplease",
"title": "whywontyouwork",
"label-text": "please",
"label-color": "#FF0000",
"label-size": 16,
"area": 1150180
}
}
]
}
const request = mapboxClient.static.getStaticImage({
ownerId: 'mapbox',
styleId: 'light-v10',
width: 600,
height: 650,
position: 'auto',
overlays: [{
geoJson: geojson
}]
});
const staticImageUrl = request.url();
document.getElementById('traffic').src = staticImageUrl;
</script>
</html>