Using text-label with the mapbox static image API geojson

Viewed 151

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>
1 Answers

I don't think this is possible using a featurecollection, because as stated in the mapbox overlay docs only simplestyle-spec are rendered. Simple-style does have labelling functionality, but it's implementation is for when an 'item is clicked or hovered over' which doesn't work for an image

Related