Mapbox Static Map

Steve Ruiz

Generate a static map from the Mapbox Static API. To use this component, you’ll need to grab a Mapbox Access Token. In addition to displaying a specific map view, you can add markers and geojson to the map and optionally fit the map to those features.

Prop Type Notes
accessToken string Get yours at Mapbox.
mapStyle string
longitude number
latitude number
zoom number
bearing number
pitch number
retina boolean
markers object[] See Markers below
customMarkers object[] See Custom Markers below
path object See Path below
geojson object or string See GeoJSON below
fitBounds boolean
minZoom number Applies only to fitted bounds
maxZoom number Applies only to fitted bounds
padding number Applies only to fitted bounds
onClick function
onMouseEnter function
onMouseLeave function
onChangeViewport function Called with the map’s viewport

Geojson

The geojson prop accepts either a valid geojson object or a URL pointing to one. The component will use this data to draw shapes and objects on the map. If you have a local .geojson file, you can use the component’s property control to add this to the map. You can use a tool such as geojson.io to create your own .geojson file. Geojson files that are too large won’t work.


Markers

The markers prop accepts an array of objects that the component will use to display markers on the map. Learn more.

This prop must be set through an override.

Property Default Description
name "pin-s" Either "pin-s" or "pin-l"
label ”marker" Alphanumeric label or Maki icon
color ff2500 A hex color, but must not include a #
center The marker’s center [longitude, latitude]
type Marker = {
    name?: 'pin-s' | 'pin-l'
    label?: string
    color?: string
    center: [number, number]
}

Custom Markers

The customMarkers prop accepts an array of objects that the component will use to display custom markers on the map. Learn more.

You can set this prop through an override.

Property Default Description
url This URL The image URL to use for the marker
center The marker’s center [longitude, latitude]
type CustomMarker = {
    url?: string
    center: [number, number]
}

Path

The path prop accepts an object that the component will use to draw a line on the map. The object must include an encoded polyline. Learn more. You can use a tool like Google’s polyline utility to create an encoded polyline.

You can set this prop through an override.

Property Default Description
strokeWidth 1
strokeColor 4264fb
strokeOpacity 1
fillColor 4264fb
fillOpacity 0
polyline An encoded polyline
type Path = {
    strokeWidth?: number
    strokeColor?: string
    strokeOpacity?: number
    fillColor?: string
    fillOpacity?: number
    polyline: string
}

Changelog:

  • 1.15.0 - Fixes broken style prop.
  • 1.14.0 - Typo fix
  • 1.13.0 - Fixes a bug that double-loaded map
  • 1.12.0 - Fixes a bug on onChangeViewport
  • 1.11.0 - Fixes a bug that caused a render loop!
  • 1.10.0 - Adds onChangeViewport prop
  • 1.8.0 - Fixes bug that prevented fitting bounds to map markers
  • 1.7.0 - Adds fitBounds and associated props minZoom, maxZoom, padding
  • 1.6.0 - Updates Readme
  • 1.3.0 - Overlays! Adds geojson, path, markers and customMarkers props
  • 1.2.0 - Safety first! Or second, in this case
  • 1.1.0 - Fixed event listeners

Info

  • Version: 1.16.0
  • Updated: about 1 month ago
  • License: MIT

Share

By using our website, you agree to the use of cookies as described in our  Privacy Policy —
I Agree