Presented as part of the Mapbox Lunchbox Webinar Series

Overview

Maps tell stories about a location – and static maps are the “stock photo” version of a map: a simple snapshot, complete with points and lines that direct the viewer to precise location knowledge.

How a map is distributed and consumed is as important as the cartography elements. A static map for print will need plenty of pixels for proper output. A static map for social media or messaging applications might look best as motionless, or the story could be enhanced with animation. The ultimate use case for a static map is to create an anchor to click through to your web or mobile map.

The Mapbox Static Images API can be used in applications where Javascript or an interactive maps cannot be used.

You’ll learn how to…

  • Use Mapbox Studio to export high resolution images of custom map styles.
  • Use the Mapbox Static Images API to create static map images from a URL.
  • Use the Mapbox Static Tiles API to pull your Mapbox GL styled map into a print workflow using open source software for Geospatial such QGIS or GeoJSON.io

Examples

1. Static Images with Open Tools

Analysis of communicating the Valley Fire in San Diego County, Sep 2020.

Static maps can be animated to give the proper affect – see The Valley Fire in San Diego County for an example of enabling “location enlightenment” to propagate widespread understanding of a piece of spatial information.

Created with Mapbox Styles + GeoJson.io for collaboration; text added in post processing. Stock MAKI icons, line fill and thickness done using Mapbox Simple Styling in GeoJSON.io (see it on Twitter).

Valley Fire, San Diego County, Sep 8, 2020
  • Fire Officials do an amazing job communicating information
  • #ValleyFire
  • Road Closures announced by CalFire
  • A map is as enlightening as a photo
  • Animation allows for two different basemaps

Valley Fire, San Diego County, Sep 10, 2020

2. Static Images from the Command Line

Image of a baseball field in Solano County, CA, produced using the Mapbox command line interface. The goal is to tell the story of a location through its metadata or physical dimensions.

mapbox staticmap
mapbox staticmap \
  --lon -122.24435 --lat 38.09698 \
  --zoom 18 \
  mapbox.satellite \
  tmp/wilson-park-vallejo.png

# open in macOS Preview
open tmp/wilson-park-vallejo.png
Wilson Park Dimensions in GeoJSON
  1. Copy & open in GeoJSON.io
  2. Add Maki Icon
{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"title":"title1","stroke":"#ffffff","stroke-width":4,"stroke-opacity":1},"geometry":{"type":"LineString","coordinates":[[-122.244418,38.0964],[-122.245081,38.097126]]}},{"type":"Feature","properties":{"title":"title2","stroke":"#ffffff","stroke-width":4,"stroke-opacity":1},"geometry":{"type":"LineString","coordinates":[[-122.244418,38.0964],[-122.243488,38.09693]]}},{"type":"Feature","properties":{"stroke":"#ff2600","stroke-width":2,"stroke-opacity":1},"geometry":{"type":"LineString","coordinates":[[-122.244418,38.0964],[-122.2442,38.097429]]}}]}
Static Image of Wilson Park with Simple Styling
ZOOM=18;
LAT=38.09698;
LON=-122.24410;
mapbox staticmap \
  --lon $LON --lat \
  \ $LAT --zoom $ZOOM \
  --size 800 800 \
  mapbox.satellite \
  --features wilson-lines.geojson \
  tmp/wilson-park-lines-vallejo-$ZOOM.png

# open in macOS Preview
open tmp/wilson-park-lines-vallejo-$ZOOM.png

Playground: Static Images API

3. #mapsForNonProfits

Public education on the proposed Harvest Hills development near Escondido, CA. Map built for the Sierra Club, North County Group using the Mapbox Static Images API. Map was provided as a URL so that proper accounting could be done.

Visualizing the Harvest Hills Development in San Diego County

  • See Video on YouTube
    • Looping video here

Distributing a Map

Get your attribution on to meet your obligations with Mapbox Terms of Service: RobLabs.com/hh

How to distribute a static map

Usage

  1. Please attribute somewhere the following
    • © Mapbox, © OpenStreetMap
    • Why Attribution? From the Mapbox Terms of Service.

      • Attribution is required and must adhere to our terms of service. Text-only attribution is required for print: © Mapbox, © OpenStreetMap

  2. Decide on a zoom level and notice that more or less map context comes into play
  3. Please embed the following <img> Web page, without alterations.

For HTML web pages

<img
     src="https://api.mapbox.com/styles/v1/roblabs/ckfu88kw71iks19mwc51txswx/static/-117.0504,33.1151,11.5,0/1080x1080@2x?access_token=pk.eyJ1Ijoicm9ibGFicyIsImEiOiJwVlg0cnZnIn0.yhekddtKwZohGoORaWjqIw"
     width="" height=""
     alt=""  >

For Wordpress

https://api.mapbox.com/styles/v1/roblabs/ckfu88kw71iks19mwc51txswx/static/-117.0504,33.1151,11.5,0/1080x1080?access_token=pk.eyJ1Ijoicm9ibGFicyIsImEiOiJwVlg0cnZnIn0.yhekddtKwZohGoORaWjqIw
Harvest Hills Map

4. Print Maps from Mapbox.com/studio

Use Mapbox Studio to export high resolution images of custom map styles.

Features

  • Save as JPEG or PNG
  • up to 8k x 8k pixels
    • 300 ppi is good enough for a 8x10” image (2,400 px x 3,000 px)
    • 144 ppi is pretty good for sharing over a messaging app

5. Mapbox Static Tiles API for QGIS

Use the Mapbox Static Tiles API to pull your Mapbox GL styled map into a print workflow using open source software for Geospatial such QGIS or GeoJSON.io

QGIS

In Mapbox Studio, you can export your style to QGIS.

  • Share > Third Party > Carto > copy Integration URL
  • Paste into QGIS

See notes and documentation on how to add static tiles:

About ePi Rational, Inc.

We make #mapsForNonProfits for Social Media. And print. And Mobile.

We are a California S-Corp based in San Diego. Work presented here is product research from Spring 2020.

RobLabs is a hat tip to my mentor & colleagues at Hewlett-Packard Corvallis & San Diego. HP and HP Labs used to publish technical research on a regular basis via the HP Journal. In that spirit, this site aims to publish software and research for product development.

FOSS4G and Our Projects

Free and Open Source Software for Geospatial sponsored by ePi Rational, Inc.

Fonts for Trails

Processing GeoPDFs using GDAL

Volksmaps — People’s Map

Offline Maps for Mobile

Make a PDF of your Mapbox map (with attribution):