Mapbox Static Map Maker

Treat the code like an image — you can use HTML or CSS to display it.

[[buildMapURL()]]

You must attribute Mapbox and OpenStreetMap on the page:

© <a href='https://www.mapbox.com/map-feedback/'>Mapbox</a> © <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap contributors</a>

HTML

<img width="[[base.width]]" src="[[buildMapURL()]]" alt="Mapbox Map[[base.auto != true && ' of '+ base.location || '' ]]">
© <a href='https://www.mapbox.com/map-feedback/'>Mapbox</a> © <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap contributors</a>

CSS

background-image: url([[buildMapURL()]]);

1. You need a Mapbox account to generate a style URL and to get a public API token.
2. Customize the fields to build your map.
3. The “Code” tab contains the code for your map including examples.
4. Copy and paste the code into your HTML document or a stylesheet.
5. Attribute the OpenStreetMap contributors and Mapbox on your website.

You can add a static map to any website with simple HTML and no JavaScript. Using URL parameters, you can describe the type of map that you want and Mapbox will send it back.

The Static Map Maker helps you configure the Mapbox API parameters and gives you the code in real time.

Check out Mapbox's static maps API.