Static maps for your web

If you need a static non-zoomable image of a map for your web or graphic design, you can generate it using one of the pre-defined styles or with your own design. Sign in to MapTiler Cloud to get key and choose your favorite map. The visual generator is available online. Here you can generate your own map with a graphical static maps generator or use it as an API for your own application.

Visual generator

Available on MapTiler Static Maps Generator.

The visual generator is very simple: you just set the size of an image, optionally check the self-explaining Double resolution (for retina displays), and zoom to the selected area.

Below there are two clickable links, which are automatically updating while you are changing the parameters of your request, but they should give you the same image if you click on them.

The maximal resolution for an image is currently set to 1024x1024 px or 2048x2048 px for retina displays (x2).

API description

For details, see the Static maps API reference.

If you want to build your own application, there are two basic options of defining the area of your interest. The first one is called a Center-based URL, where the area displayed on an image is defined by the longitude/latitude of the image’s center point and zoom level (can be fractional). The other option, Bounds-based URL, is defined by a couple of coordinates defining the bottom left and top right corners.

Autofitting the area

It is also possible to use auto instead of the region specification (center or bounds) in the URL. In such a case, the area will be automatically calculated based on a path from the query (at least one polygon or marker has to be specified). See the documentation of the format and possible values below.

Adding polygons and lines

The polygon or polyline can be passed in a path query parameter (it can be used more than once). Coordinates of the individual path vertices are comma-separated lng,lat pairs. The vertices are separated with a pipe symbol. Additionally, the following special “commands” can be used (in the form of key:value appended before the path coordinates):

  • fill - color to use as the fill (e.g. red, rgba(255,255,255,0.5), #0000ff, none, false)
  • stroke - the color of the path stroke
  • width - width of the stroke (in pixels)
  • shortest - draw the shortest paths, allow to cross the dateline
  • enc - Path encoded according to Google Encoded Polyline Format
    • -e.g. _p~iF~ps|U_ulLnnqC_mqNvxq@\-If used, the rest of the path` parameter is considered to be part of the encoded polyline string -- do not specify the coordinate pairs.
  • You can also use fill, stroke, width and shortest as separate query parameters to specify default styling for all the paths.

Examples:

  • a polygon with default colors
    • path=5.9,45.8|5.9,47.8|10.5,47.8|10.5,45.8|5.9,45.8
  • the same polygon, but with 3px green stroke and no fill
    • path=stroke:green|width:3|fill:none|5.9,45.8|5.9,47.8|10.5,47.8|10.5,45.8|5.9,45.8
  • draws a red line based on the encoded polyline
    • path=stroke:red|fill:none|enc:_p~iF~ps|U_ulLnnqC_mqNvxq@`

Adding markers

The markers can be passed in a markers query parameter (it can be used more than once). Each marker is a comma-separated lng,lat pair. Individual markers are separated with a pipe symbol. Each marker can also have a different color - specified as the 3rd parameter (e.g. 14.4,50.1,red|8.6,47.4,blue). Additionally, the following special “commands” can be used (in the form of key:value appended before the marker coordinates):

  • icon - URL to a remote image (URL-encoded)
    • You can use a URL shortener service to create more compact queries.
    • The icon has to be at most 64 kB and 4096 pixels (e.g., 64x64 image).
    • If used, the specified colors of the markers are ignored.
  • anchor - the anchor point of the custom icon, possible values:
    • top, left, bottom, right, center, topleft, bottomleft, topright, bottomright
    • the default value is bottom
  • scale - the scale of the image (useful if you want to provide a HiDPI image that scales down correctly), the default value is 1

Examples:

  • markers=14.4,50.1|8.6,47.4|2.4,48.9 - 3 separate markers will be displayed
  • markers=14.4,50.1,red|8.6,47.4,blue - 1 red and 1 blue marker
  • markers=icon:http://tinyurl.com/yfv74724|anchor:center|14.4,50.1|8.6,47.4
    • 2 markers with the specified custom icon centered at their positions

Other

  • attribution
    • change the location of the attribution text:topleft, bottomleft, topright, bottomright
    • attribution=false or attribution=0to disable attribution (make sure to display the correct attribution yourself in case you use this)
  • latlng ( latlng=true or latlng=1) - indicates the polygon and marker coordinates are in lat,lng order rather than the usual lng,lat
  • padding - “percentage” padding for fitted endpoints (bounds-based and auto)
    • e.g., value of 0.1 means “add 10% size to each side to make sure the area of interest is nicely visible”

Related guides

On this page