Jawg Static Maps API reference

Estimated reading time: 8 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.

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 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 false color:#ffffff,weight:1|-45.222,2.4444|-45.222,2.4444
region Place an area with given style 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 sunny
draft draft flag (true for draft, false for published) false true

WARNING : You must give eihter bbox param OR both size and center params.

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=15&center=48.8566101,2.3514992&size=600x400&output=jpg&layer=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)

Not URL-Encoded:

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

URL-Encoded:

GET /?zoom=15&bbox=%7B2.337255,48.850597,2.368155,48.862259%7D&output=jpg&layer=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

Not URL-Encoded:

GET /?zoom=15&bbox=(2.337255,48.850597,2.368155,48.862259)&output=png&layer=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▮=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

URL-Encoded:

GET /?zoom=15&bbox=%7B2.337255,48.850597,2.368155,48.862259%7D&output=png&layer=dark&scale=2▮=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▮=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-dark layer, in scale 2 (HD) with one path

Not URL-Encoded:

GET /?zoom=15&bbox=(2.337255,48.850597,2.368155,48.862259)&output=png&layer=dark&scale=2&path=color:#80b386,weight:2|48.8506,2.338|48.8509,2.35|48.8534,2.357|48.8622,2.368&access-token={your-access-token} HTTP/1.1

URL-Encoded:

GET /?zoom=15&bbox=%7B2.337255,48.850597,2.368155,48.862259%7D&output=png&layer=dark&scale=2&path=color:%2380b386,weight:4%7C48.8506,2.338%7C48.8509,2.35%7C48.8534,2.357%7C48.8622,2.368&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=15&center=48.8566101,2.3514992&size=600x400&output=jpg&layer=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=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=dark&scale=2▮=color:#e5a154,label:A,size:MEDIUM|48.85446387,2.33862673▮=color:#80b386,label:B,size:MEDIUM|48.85525538,2.35004015▮=color:#808080,label:C,size:LARGE|48.86135993,2.35502675▮=color:#000000,label:D,size:MEDIUM|48.86150650,2.35981928▮=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=dark&scale=2&path=color:#80b386,weight:2|48.8506,2.338|48.8509,2.35|48.8534,2.357|48.8622,2.368

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": 15,
    "center": {
            "latitude": 48.8566101,
            "longitude": 2.3514992
        },
    "size": {
            "width": 600,
            "height": 400
        },
    "output": "jpg",
    "layers": "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",
  "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": "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",
  "layer": "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
}