Jawg Static Maps API reference

Estimated reading time: 11 minutes

Static Maps API

The current API supports two ways of getting your image map. One through a GET request, which uses the URI request params to parse content, the other using a POST request, which allows to send a superior payload to the backend. The current limit is set to 500 shapes per image maximum.

Endopoint to use

https://api.jawg.io/static/?zoom=12&center=48.856,2.351&size=300x200&layer=jawg-sunny&access-token=your-jawg-access-token
\___/   \_________/\_____/\__________________________________________________________/\__________/
  |          |        |                          |                                          |
scheme     domain    API                       query                                 authentication token

Parameters

Param name Description required ? example value
bbox desired the bbox (w,s,e,n) true if no size and center (2.334938,48.835571,2.406864,48.879393)
size Size of tho the bbox in pixels (width x height) true if no bbox 500x600
center LatLng, center of the bbox true if no bbox 2.2222,42.2231
zoom the desired zoom true if no marker/path/region and size 15
access-token the access-token true 1234-1234-1234-1234
marker Place a POI with given style false color:#ffffff,size:small,label:A|-45.222,2.4444
path Place a track with given style, the coordinates are separated by pipes | or can be represented by polylines false color:#ffffff,weight:1|-45.222,2.4444|-45.222,2.4444
region Place an area with given style, the coordinates are separated by pipes | or can be represented by polylines false color:#ffffff,weight:1,fillColor:#555555|-45.222,2.4444|-45.223,2.4445|-45.224,2.4446|-45.222,2.4444
output Image format false png or jpg
layer Map style desired false jawg-sunny
draft draft flag (true for draft, false for published) false true

:warning: WARNING : You must give either bbox param OR both size and center params OR size and some some shapes (markers, paths or regions).

:warning: WARNING : All parameters and content must be url encoded!

Endpoint with HTTP GET method

GET https://api.jawg.io/static/

No body needed. Only query parameters.

Examples

Create a simple jpg-map of Paris using size + center & the jawg-sunny layer, in scale 2 (HD)

GET /?zoom=12&center=48.856,2.351&size=300x200&output=jpg&layer=jawg-sunny&scale=2&access-token={your-access-token} HTTP/1.1


Create a simple jpg-map of Paris using bbox & the jawg-streets layer, in scale 2 (HD)

GET /?zoom=15&bbox=(2.337255,48.850597,2.368155,48.862259)&output=jpg&layer=jawg-streets&scale=2&access-token={your-access-token} HTTP/1.1
GET /?zoom=15&bbox=%7B2.337255,48.850597,2.368155,48.862259%7D&output=jpg&layer=jawg-streets&scale=2&access-token={your-access-token} HTTP/1.1


Create a simple png-map of Paris using the jawg-dark layer, in scale 2 (HD) with 5 Markers A, B, C, D and E

GET /?zoom=15&bbox={2.337255,48.850597,2.368155,48.862259}&output=png&layer=jawg-dark&scale=2&marker=color:#e5a154,label:A,size:MEDIUM|48.85446387,2.33862673&marker=color:#80b386,label:B,size:MEDIUM|48.85525538,2.35004015&marker=color:#808080,label:C,size:LARGE|48.86135993,2.35502675&marker=color:#000000,label:D,size:MEDIUM|48.86150650,2.35981928&marker=color:#00c8c8,label:E,size:SMALL|48.85147070,2.36221242&access-token={your-access-token} HTTP/1.1
GET /?zoom=15&bbox=%7B2.337255,48.850597,2.368155,48.862259%7D&output=png&layer=jawg-dark&scale=2&marker=color:%23e5a154,label:A,size:MEDIUM%7C48.85446387,2.33862673&marker=color:%2380b386,label:B,size:MEDIUM%7C48.85525538,2.35004015&marker=color:%23808080,label:C,size:LARGE%7C48.86135993,2.35502675&marker=color:%23000000,label:D,size:MEDIUM%7C48.86150650,2.35981928&marker=color:%2300c8c8,label:E,size:SMALL%7C48.85147070,2.36221242&access-token={your-access-token} HTTP/1.1


Create a simple png-map of Paris using the jawg-light layer, in scale 2 (HD) with two paths coords based and polyline based

GET /?zoom=15&bbox=(2.337255,48.850597,2.368155,48.862259)&output=png&layer=jawg-light&scale=2&path=color:#80b386,weight:2|48.8506,2.338|48.8509,2.35|48.8534,2.357|48.8622,2.368&path=color:#0099D8,weight:2|qudiHc_iMmImLoMaZ~Lwu@~_@jkAmLjs@}CdWgCzKPqeA&access-token={your-access-token} HTTP/1.1
GET /?zoom=15&bbox=%7B2.337255,48.850597,2.368155,48.862259%7D&output=png&layer=jawg-light&scale=2&path=color:%2380b386,weight:4%7C48.8506,2.338%7C48.8509,2.35%7C48.8534,2.357%7C48.8622,2.368&path=color:%230099D8,weight:2%7CqudiHc_iMmImLoMaZ~Lwu@~_@jkAmLjs@%7DCdWgCzKPqeA&access-token={your-access-token} HTTP/1.1


Create a simple png-map of Paris using the jawg-silver layer, in scale 2 (HD) with two regions coords based and polyline based

GET /?zoom=15&bbox=(2.337255,48.850597,2.368155,48.862259)&output=png&layer=jawg-silver&scale=2&region=color:#80b386,weight:2|48.8506,2.338|48.8509,2.35|48.8534,2.357|48.8622,2.368|48.8506,2.338&region=color:#0099D8,weight:2|qudiHc_iMmImLoMaZ~Lwu@~_@jkAmLjs@}CdWgCzKPqeA&access-token={your-access-token} HTTP/1.1
GET /?zoom=15&bbox=%7B2.337255,48.850597,2.368155,48.862259%7D&output=png&layer=jawg-silver&scale=2&region=color:%2380b386,weight:4%7C48.8506,2.338%7C48.8509,2.35%7C48.8534,2.357%7C48.8622,2.368%7C48.8506,2.338&region=color:%230099D8,weight:4%7CqudiHc_iMmImLoMaZ~Lwu@~_@jkAmLjs@}CdWgCzKPqeA&access-token={your-access-token} HTTP/1.1


Create a simple png-map of Paris using the jawg-silver layer without zoom (with only shapes and size)

GET /?size=450x450&output=png&layer=jawg-silver&region=color:#80b386,weight:2|48.8506,2.338|48.8509,2.35|48.8534,2.357|48.8622,2.368|48.8506,2.338&region=color:#0099D8,weight:2|qudiHc_iMmImLoMaZ~Lwu@~_@jkAmLjs@}CdWgCzKPqeA&access-token={your-access-token} HTTP/1.1
GET /?size=450x450&output=png&layer=jawg-silver&region=color:%2380b386,weight:4%7C48.8506,2.338%7C48.8509,2.35%7C48.8534,2.357%7C48.8622,2.368%7C48.8506,2.338&region=color:%230099D8,weight:4%7CqudiHc_iMmImLoMaZ~Lwu@~_@jkAmLjs@}CdWgCzKPqeA&access-token={your-access-token} HTTP/1.1

Endpoint with HTTP POST method

POST https://api.jawg.io/static/

The request body can accept two kinds of inputs: String based, or JSON based. String based allows you to use the same payload as request parameters as above, the JSON based allows you to send more structured content. The access-token parameter is required as a query parameter, other parameters are in request body.

String based body examples

Same as above but all content is send as request body instead of request parameters except for access-token.

Create a simple jpg-map of Paris using size + center & the jawg-sunny layer, in scale 2 (HD)

POST /?access-token={your-access-token} HTTP/1.1
Content-Type: text/plain

zoom=12&center=48.856,2.351&size=300x200&output=jpg&layer=jawg-sunny&scale=2

Create a simple jpg-map of Paris using bbox & the jawg-streets layer, in scale 2 (HD)

POST /?access-token={your-access-token} HTTP/1.1
Content-Type: text/plain

zoom=15&bbox=(2.337255,48.850597,2.368155,48.862259)&output=jpg&layer=jawg-streets&scale=2

Create a simple png-map of Paris using the jawg-dark layer, in scale 2 (HD) with 5 Markers A, B, C, D and E

POST /?access-token={your-access-token} HTTP/1.1
Content-Type: text/plain

zoom=15&bbox={2.337255,48.850597,2.368155,48.862259}&output=png&layer=jawg-dark&scale=2&marker=color:#e5a154,label:A,size:MEDIUM|48.85446387,2.33862673&marker=color:#80b386,label:B,size:MEDIUM|48.85525538,2.35004015&marker=color:#808080,label:C,size:LARGE|48.86135993,2.35502675&marker=color:#000000,label:D,size:MEDIUM|48.86150650,2.35981928&marker=color:#00c8c8,label:E,size:SMALL|48.85147070,2.36221242

Create a simple png-map of Paris using the jawg-dark layer, in scale 2 (HD) with one path

POST /?access-token={your-access-token} HTTP/1.1
Content-Type: text/plain

zoom=15&bbox=(2.337255,48.850597,2.368155,48.862259)&output=png&layer=jawg-dark&scale=2&path=color:#80b386,weight:2|48.8506,2.338|48.8509,2.35|48.8534,2.357|48.8622,2.368

Create a simple png-map of Paris using the jawg-silver layer, in scale 2 (HD) with one path using polyline

POST /?access-token={your-access-token} HTTP/1.1
Content-Type: text/plain

zoom=15&bbox=(2.337255,48.850597,2.368155,48.862259)&output=png&layer=jawg-light&scale=2&path=color:#0099D8,weight:2|qudiHc_iMmImLoMaZ~Lwu@~_@jkAmLjs@}CdWgCzKPqeA

JSON based body examples

Create a simple jpg-map of Paris using size + center & the jawg-sunny layer, in scale 2 (HD)

POST /?access-token={your-access-token} HTTP/1.1
Content-Type: application/json

{
    "zoom": 12,
    "center": {
            "latitude": 48.856,
            "longitude": 2.351
        },
    "size": {
            "width": 300,
            "height": 200
        },
    "output": "jpg",
    "layers": "jawg-sunny",
    "scale": 2
}

Create a simple jpg-map of Paris using bbox in scale 2 (HD)

POST /?access-token={your-access-token} HTTP/1.1
Content-Type: application/json

{
  "zoom": 15,
  "bbox": {
    "w": 2.337255,
    "s": 48.850597,
    "e": 2.368155,
    "n": 48.862259
  },
  "output": "jpg",
  "layers": "jawg-streets",
  "scale": 2
}

Create a simple png-map of Paris using the jawg-dark layer, in scale 2 (HD) with 2 Markers A, B

POST /?access-token={your-access-token} HTTP/1.1
Content-Type: application/json

{
  "zoom": 14,
  "bbox": {
    "w": 2.337255,
    "s": 48.850597,
    "e": 2.368155,
    "n": 48.862259
  },
  "output": "png",
  "layers": "jawg-dark",
  "markers": [
    {
      "color": "#e5a154",
      "label": "A",
      "size": "MEDIUM",
      "coords": {
        "latitude": 48.85446387,
        "longitude": 2.33862673
      }
    },
    {
      "color": "#80b386",
      "label": "B",
      "size": "MEDIUM",
      "coords": {
        "latitude": 48.85525538,
        "longitude": 2.35004015
      }
    }
  ]
}

Create a simple png-map of Paris using the jawg-dark layer, in scale 2 (HD) with one path

POST /?access-token={your-access-token} HTTP/1.1
Content-Type: application/json

{
  "zoom": 14,
  "bbox": {
    "w": 2.337255,
    "s": 48.850597,
    "e": 2.368155,
    "n": 48.862259
  },
  "output": "png",
  "layers": "jawg-dark",
  "paths": [
    {
      "color": "#e5a154",
      "weight": 2,
      "coords": [
        {
          "latitude": 48.8506,
          "longitude": 2.338
        },
        {
          "latitude": 48.8509,
          "longitude": 2.35
        },
        {
          "latitude": 48.8534,
          "longitude": 2.357
        },
        {
          "latitude": 48.8622,
          "longitude": 2.368
        }
      ]
    }
  ],
  "scale": 2
}

Create a simple png-map of Paris using the jawg-dark layer, in scale 2 (HD) with one path

POST /?access-token={your-access-token} HTTP/1.1
Content-Type: application/json

{
  "zoom": 14,
  "bbox": {
    "w": 2.337255,
    "s": 48.850597,
    "e": 2.368155,
    "n": 48.862259
  },
  "output": "png",
  "layers": "jawg-dark",
  "paths": [
    {
      "color": "#e5a154",
      "weight": 2,
      "coords": "qudiHc_iMmImLoMaZ~Lwu@~_@jkAmLjs@}CdWgCzKPqeA"
    }
  ],
  "scale": 2
}