Guides & Walkthroughs

Static Maps with Stadia Maps

Static Maps with Stadia Maps

In this tutorial, we will be using simple <img> tags to add simple, but powerful, static map (non-interactive) images to a website. Since these are just images, they can be used anywhere an image could be used—and that's a lot of places.

How do I create a static map?

If you need to just create a static map without any markers, you'll need to determine a few of the details required to render the map: the center of the map, the size in pixels of the map, and the zoom level of the map. These result in a set of parameters to add to the base URL for the static map.

Parameter Description Examples
center The map's center point, in decimal lat and lon. center=40.438569,-86.901396
center=20.6,-46.90
zoom The zoom level of the map. zoom=4
zoom=14
size The size, in pixels, of the static map. size=200x200
size=1024x768
size=512x256@2x (a high-DPI image)

Once you have your information, plug them in the designated areas of the URL, and our final HTML code will look something like this: <img src="https://tiles.stadiamaps.com/static/alidade_smooth?center=40.438569,-86.901396&zoom=14&size=400x200@2x" /> And you'll see an image something like this:

How do I add markers to a static map?

If you need to add markers to your static map (and you usually do), there's one more parameter that allows you to add as many markers as you want to your static map.

Parameter Description Examples
markers The lat and lon for each of your markers, separated by a | (pipe) symbol. markers=40.439448,-86.901352|40.438427,-86.900706
markers=40.439448,-86.901352

Once you determine your marker placement, plug them in the designated areas of the URL, and our final HTML code will look something like this: <img src="https://tiles.stadiamaps.com/static/alidade_smooth?center=40.438569,-86.901396&zoom=14&markers=40.439448,-86.901352|40.438427,-86.900706&size=400x200@2x" /> And you'll see an image something like this:

How do I …?

That's all folks! If you have any questions or need fuller documentation, you can read all about the cool features our static maps support in the documentation.