Skip to content
An endpoint for country map images by name
CSS JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Mapbox Vignettes

Motto: Hay una manera mejor hacer esto en Node.


Someone was interested in an endpoint that allowed you to type in a country name and get back a static image from the Mapbox API, without fiddling around with bounding boxes or centroid coordinates or optimal zoom levels. So this. Who might make use of this? Journalists, Aid workers, and HTML-savvy high school students working on term papers.

Some Examples


Good lord, it's PHP. I'm very sorry about that. But you build a URL and it spits back an image. Pretty simple. The URL takes the following variables as query strings:

  • name Country name, piece of a country name, whatever
  • mapid Map ID, obtained from your mapbox tileset
  • width Desired image width in pixels
  • height Desired image height in pixels

The URL construction looks like this:

. . ./vignette.php?name=canada&

This will return a 600X400px png image focused on Canada using the tileset "" (which is watermarked; use your own tiles).


You are welcome to use my server endpoint for fiddling/testing. For instance, this:

Returns this:

HOWEVER . . . I have not put a lot of juice into this server, so I strongly discourage you from using it in a production environment.

Another Caveat

Web Mercator projection is entirely unsuited to realistically representing polar-leaning countries like Russia, Canada and New Zealand. For that I recommend D3 and a tasty orthographic projection like this


  • Add a mask to bring focus to the country in question. More likely with a Canvas-based halo than a vector layer.
  • Beef up the Database to include all levels of admin feature. CartoDB is currently backing this beast.
  • Rewrite in Javascript. I mean, seriously? PHP?
Something went wrong with that request. Please try again.