How to Create a Static Map Image

API or service: Static Maps API
Task: Map location and dimensions → PNG or JPEG image

Examples: URLHTML
Difficulty: Beginner
Time: 5 min

You need a map image for a page, email, report, social preview, or other context where an interactive JavaScript map is unnecessary. The Geoapify Static Maps API renders a PNG or JPEG image from a normal HTTP request.

Choose the map style, output dimensions, and either a center with a zoom level or an area to fit. The response is image data, so it can be used directly as an HTML image source or downloaded and stored by a server-side process.

Request a static map image

This request creates an 800 × 500 PNG centered on Berlin. The center value uses longitude,latitude order.

https://maps.geoapify.com/v1/staticmap?style=osm-bright&width=800&height=500&scaleFactor=2&center=lonlat:13.405,52.52&zoom=13&format=png&apiKey=YOUR_API_KEY

Image size: width=800 and height=500 define the logical size. With scaleFactor=2, the generated bitmap is 1600 × 1000 pixels (800 × 2 by 500 × 2).

The main parameters are:

Parameter	Purpose
`style`	Selects the Geoapify basemap style.
`width`, `height`	Set the base image dimensions in pixels.
`center`	Sets the map center as `lonlat:<longitude>,<latitude>`.
`zoom`	Controls how much surrounding area is visible.
`format`	Returns `png` or `jpeg`.
`scaleFactor`	Use `2` for twice the pixel density.

Use area instead of center and zoom when the image must contain a known bounding box. When markers or geometries are provided without an explicit center or area, the API can determine a suitable view from those overlays.

Embed a static map image

Because a GET request returns an image, its URL can be used directly in an <img> element. Include meaningful alternative text instead of using the map as the only source of essential location information.

<img
  src="https://maps.geoapify.com/v1/staticmap?style=osm-bright&amp;width=800&amp;height=500&amp;scaleFactor=2&amp;center=lonlat:13.405,52.52&amp;zoom=13&amp;format=png&amp;apiKey=YOUR_API_KEY"
  width="800"
  height="500"
  alt="Map of central Berlin"
  loading="lazy"
>

Image size: the API generates a 1600 × 1000-pixel bitmap (800 × 2 by 500 × 2), while the HTML attributes display it at 800 × 500 CSS pixels for a sharper result.

Declare width and height to reserve space before the image loads. When a browser-visible URL contains an API key, configure the key’s allowed origins or referrers for the application. Generate sensitive or user-specific images on the server when the request parameters should not be exposed in page markup.

Learn more