The new Static Playground is available today for all Mapbox users to explore all the features of the Static Images API. Before, developers needed to read API documentation and implement features in code to work with the Static Images API. Now, developers can see how Static Images API responses will look based on the position, resolution, padding, overlays, and any style parameters using just a few clicks in the Static Playground. Developers can test with a variety of inputs, then copy the Static Image API URL directly into mobile apps, emails, or websites to easily add dynamic maps.
The playground supports Geojson Overlays, allowing developers to add point, line, or polygon data directly from other applications like geojson.io to the map.
Positioning & Padding
The Auto positioning option will automatically fit the bounds of the map to the overlay, removing the need to position the map manually. Switch to the bounding box or the center positioning option for more control over the position of the map. The bounding box positioning option makes the static image viewport expand or shrink as needed to surround the provided bounding box coordinates. The center positioning option provides tilt and rotation options to the map.
Use padding to add additional space inside your map, which is particularly useful for centering an overlay.
Markers with custom image URL support
Marker Overlay has the ability to create markers with maki icons or with a URL to a custom PNG or JPG. Developers can pull self-hosted images directly into Static API Images to position custom logos, iconography, and markers directly on their static map.
Encode Coordinates to Polylines
Using the Path Overlay, developers can encode coordinates into a valid customizable polyline, then tune strokeWidth, strokeColor, strokeOpacity, fillColor, and fillOpacity to get the perfect appearance.
Use a custom style from Studio
Developers now can switch between the default styles provided in the playground and any of the custom Mapbox styles in their account built with Mapbox Studio.
The output of the Static Playground is a finalized URL that can be added to the src property of html <img> tag or dropped into the code of a web or mobile app:
Get started with the Static Images playground today and share the amazing map images you create with us using #BuiltWithMapbox.