Static Playground: Interactive Image Builder with Full API Support and Live Preview

Shabnam Shomail
Josh Erb

Apr 5, 2021

Static Playground: Interactive Image Builder with Full API Support and Live Preview

Shabnam Shomail

Guest

Josh Erb

Guest

Apr 5, 2021

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.

Geojson Overlays

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:


<img src='https://api.mapbox.com/styles/v1/mapbox_username_here/ckmz5kiau2g5b17mlm2otf149/static/pin-s-park+96d35f(5.046,47.3),pin-s-museum+d6d6d6(5.044,47.32),pin-s-bar+b92d5d(4.999,47.33),path-3+fff995-0.9(cwy_Hkuw%5DtAaEReE%60NfB%3FsD%3FrDlC%5D%7DCbZoBdDw%40pEcAZ%3FlNzQtJzAnDwEtSr%40vCBtQeBtMg%40hO%7CCvN%5E%60X%7DCbFqGz%40%7BCdDeBdEQlD_CpD%7BIpAyCm%40cJbImHfXiBzAaDjPy%40Hx%40I%60DkPhB%7BAlHgXbJcIxCl%40zIqA~BqDPmDxAsDlCeDjHmAhCaDdBn%40RqDnAKgBkj%40dHcY%7CY%7DN%3FiAr_Ame%40eEcS%7CHmQ%7CK%7BAl%40oBaEqFYmW)/5.0275,47.3177,12.47,42,38/700x500@2x?access_token=Mapbox_Token_Here'
width='700' height='500'>

Get started with the Static Images playground today and share the amazing map images you create with us using #BuiltWithMapbox.


No items found.
No items found.

Related articles