-1

I'm using the Mapbox Static Images API to highlight a specific zip code on a map, using GeoJSON coordinates.

It works, but it looks like the title property is ignored by Mapbox.

Following their documentation/examples, I've also tried adding a Point with a title. The Point is visible but its title is not.

Here's the GeoJSON overlay I'm passing to the Mapbox Static Images API Playground tool:

{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "MultiPolygon",
                "coordinates": [[[[-122.414826, 37.794988], [-122.414648, 37.79411], [-122.414635, 37.794046], [-122.414596, 37.793852], [-122.41447, 37.793223], [-122.414382, 37.792784], [-122.414325, 37.792506], [-122.414293, 37.792343], [-122.414107, 37.791416], [-122.413916, 37.790463], [-122.413301, 37.790541], [-122.413088, 37.790568], [-122.412266, 37.790673], [-122.412154, 37.790124], [-122.412076, 37.78974], [-122.411886, 37.788808], [-122.411251, 37.788888], [-122.411031, 37.788916], [-122.410967, 37.788924], [-122.410903, 37.788932], [-122.410561, 37.788975], [-122.410242, 37.789016], [-122.408595, 37.789226], [-122.408402, 37.788293], [-122.406771, 37.788499], [-122.406683, 37.788033], [-122.40659, 37.787568], [-122.406399, 37.786615], [-122.405346, 37.786748], [-122.40485, 37.78681], [-122.404743, 37.786778], [-122.403456, 37.787776], [-122.403492, 37.787963], [-122.40358, 37.788427], [-122.403661, 37.788894], [-122.403747, 37.789363], [-122.403842, 37.789829], [-122.403934, 37.790286], [-122.404031, 37.79076], [-122.40422, 37.791691], [-122.404418, 37.792639], [-122.404613, 37.793565], [-122.404711, 37.794021], [-122.404796, 37.794453], [-122.404876, 37.79486], [-122.404957, 37.795327], [-122.404636, 37.795367], [-122.403317, 37.795532], [-122.404068, 37.796064], [-122.404412, 37.796302], [-122.404838, 37.796249], [-122.405143, 37.796211], [-122.405863, 37.796122], [-122.406225, 37.796078], [-122.406351, 37.796062], [-122.406652, 37.796025], [-122.407084, 37.795971], [-122.40732, 37.795941], [-122.407432, 37.795927], [-122.407564, 37.79591], [-122.407797, 37.795881], [-122.408253, 37.795824], [-122.408705, 37.795767], [-122.408743, 37.795762], [-122.409076, 37.79572], [-122.409344, 37.795686], [-122.409547, 37.795661], [-122.409899, 37.795616], [-122.411082, 37.795467], [-122.41124, 37.795447], [-122.411542, 37.795409], [-122.411894, 37.795363], [-122.412336, 37.795307], [-122.413188, 37.795198], [-122.414009, 37.795093], [-122.414242, 37.795062], [-122.4146, 37.795016], [-122.414826, 37.794988], [-122.414826, 37.794988]]]]
            },
            "properties": {
                "title": "94108",
                "description": "94108",
                "stroke": "#545AFA",
                "stroke-opacity": 1.0,
                "stroke-width": 2,
                "fill": "#545AFA",
                "fill-opacity": 0.5
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [-122.4090, 37.7915]
            },
            "properties": {
                "title": "94108",
                "description": "94108"
            }
        }
    ]
}

And here is the result:

Mapbox Static Images API

Bruno Leveque
  • 2,647
  • 2
  • 23
  • 33

1 Answers1

0

Unfortunately, according to Mapbox, their Static Images API does not support Text Overlays.

The Static Images API renders images from map styles and supports a few overlay types, including markers, paths, and GeoJSON. Text/label overlays are not supported, so this tutorial demonstrates a workaround to add text to a static image in a web browser using an HTML canvas element.

The alternative offered is to load the static map image and add an overlay over it in JS (which kind of defeat the purpose).

Here's a demo.

Bruno Leveque
  • 2,647
  • 2
  • 23
  • 33