We've been working hard to make the experience of building with Mapbox even better. From brand-new tutorials to playgrounds and UI/UX improvements, here's a look at recent updates meant to inspire and equip Mapbox developers.

New tutorials and a UI makeover

Our tutorials got a major user interface upgrade to make learning Mapbox a smoother experience than ever. The new UI shows one tutorial step at a time, and users can progress through the tutorials without the need for continuous scrolling. The tutorials page now fills the browser window, hiding the broader site navigation, so that learners can focus on the task at hand.

We also refreshed how we handle filtering for tutorials and other lists on the Mapbox Documentation site to make it easier to filter resources by specific products.

Along with UI updates, we have also ramped up creation of new tutorials. Recent additions showcase common mapping app architecture for web, iOS, and Android:

• Add Dynamic Markers and Popups to a Map in a React app: Fetch point data from an external API as the user moves the map, and display Markers and Popups in React.
• Build an Android marker app using GeoJSON data: Import GeoJSON data to an Android app and use it to create point annotations (aka markers) that open on tap to reveal feature details in an animated drawer.
• Build an iOS marker app from a custom style & tileset: Build a map in iOS that uses a custom map style from Mapbox Studio and markers that respond to tap events to reveal a panel containing feature details.
• Create a custom color theme for Mapbox Standard: Learn how to use Adobe Photoshop to create a custom Lookup Table (LUT) and use it to tweak the color scheme of the Mapbox Standard Style.
• Use Mapbox GL JS in a Svelte App: An updated tutorial for using Mapbox within modern Svelte development.

New tutorials are also available for mobile developers that demonstrate how to get the Mapbox Examples Apps working. The Examples Apps for iOS and Android are the best way to quickly see what is possible when building with the Mapbox Maps SDKs.

Also, all new tutorials will have their companion code published on Github at https://github.com/mapbox/tutorials. Find the full list of Mapbox tutorials in the Mapbox Documentation help center, and please submit feedback to the Documentation site about what additional tutorials you would like to see.

New API playgrounds and playground UI enhancements

Did you know that in addition to interactive search, the Mapbox Search Box API also supports full-text search and location search using coordinates? The new Search Box API playground showcases the /forward and /reverse endpoints of the Search Box API to help developers craft API calls, experiment with parameters, and examine the search results data.

Launched last winter, vibrant animated snow and rain effects are now supported in Mapbox GL JS and the Mapbox Mobile Maps SDKs. The ‘snow’ or ‘rain’ direction, intensity, color, and more are all configurable, allowing for a wide range of creative uses for this new effect. The new Rain and Snow Effects playground lets developers tinker with the effect parameters and generates ready-to-use configuration code snippets.

All Mapbox Developer Playgrounds now feature a fixed header with a “Show Fullscreen” widget that enables a fullscreen mode. Switching to fullscreen expands the playground to fill the browser window to reduce page scrolling and make it easier to see the details of the playground interface.

Expanded docs for Mapbox Standard and installation guides

Mapbox Standard is the default 3D basemap when building with Mapbox. There is a lot to unpack in Standard, including configuration options for things like light presets, labels, color themes, and more. Mapbox Standard now has expanded documentation to help developers with implementation, including a product guide to learn about the special features of the Standard style, code snippets for web and mobile, and updated reference docs for a full list and description of configurable options.

On the topic of map styles, the Set a Style guides for web, Android, and iOS are now updated to cover options for loading and configuring map styles in your frontend projects.

For developers looking for a fresh start on a new project, check out our frontend Installation Guides, newly updated with all the latest tooling and now including a “Hello, World!”:

Web

• Mapbox GL JS
• Mapbox Search JS - Web
• Mapbox Search JS - React

iOS

• Maps SDK
• Search SDK
• Navigation SDK

Android

• Maps SDK
• Search SDK
• Navigation SDK

Flutter

• Maps SDK

A bonus for Android developers: The Maps SDK for Android example pages now include text descriptions to explain the concepts introduced in the code snippet.  Each snippet is a working map available in the Examples App, and both Jetpack Compose and Android View examples are available. (Similar examples are also available for the Maps SDK for iOS.)

Help us improve Mapbox Documentation with feedback

The Mapbox Developer Resources team receives hundreds of Documentation feedback submissions every week and works diligently to review and address each one. A huge thank you to those that submit feedback regularly — this helps us improve our Documentation. 

Whether it is an inaccurate code snippet, confusing wording, or anything else that seems less than awesome in the Mapbox Documentation, please share feedback with us so we can continue to improve. Even a quick thumbs up or thumbs down helps, although leaving a note is especially helpful if you thumbs down a page so that we can identify how to improve it.

Now is a great time to check out the latest tutorials, explore the developer playgrounds, and share your feedback on the documentation or any other resources that would help you and the community build better with Mapbox. 

Thank you for being part of the process — at Mapbox, we're committed to continuously improving the developer experience and making it as seamless and effective as possible. Your input helps us make that happen.