Dr. UI

Current version: v6.5.0View changelog

check
React components to build documentation sites
check
Support for all modern browsers

Pronounced "Doctor UI". Documentation React UI components. See @mapbox/mr-ui.

UI components for Mapbox documentation projects.

book

NOTE

This project is for internal Mapbox usage. The code is open source and we appreciate bug reports; but we will only consider feature requests and pull requests from Mapbox developers.

Features

Browser

Examples

Basic.

circlecirclecircle

arrow-leftarrow-rightrotate

heartmapboxmenu

Props

Name	Type	Details
children REQUIRED	node

DemoIframe

Examples

Basic.

Props

Name	Type	Details
src REQUIRED	string	The absolute url to the iframe.
title REQUIRED	string	A title to describe the content of the iframe.
MapboxAccessToken	string	Replace instance of `MapboxAccessToken` in the `src` prop with the value of this Mapbox access token.
gl	bool	The iframe content contains Mapbox GL. Default `true`. Default: true
height	number	Height of iframe in pixels. Default `400`. Default: 400

DownloadButton

Examples

Basic.

arrow-downDownload CSV

Props

Name	Type	Details
href REQUIRED	string	File path to resource that will be downloaded.
text	string	Optional custom button text. If this prop is not used, the text will default to "Download {file type}".

Feedback

Examples

Basic.

Was this page helpful?

Props

Name	Type	Details
location REQUIRED	object	This prop is generated by Batfish and provides location context for the current page.
site REQUIRED	string	The site name. This is same value as the `site` value passed to ReactPageShell.
feedbackSentryDsn	union	The Sentry DSN (URL) to send text feedback to for issue management or `false` to prevent sending feedback to Sentry. Default: 'https://eccc8b561b9a461990309b01d33d54e3@sentry.io/1848287' Options: `[ "string", "bool" ]`
preferredLanguage	string	The user's preferred code language, if available.
section	string	The name of section the feedback component falls under. This is used by multi-structured sites.
type	string	The type of content the user is a evaluating. Default: 'page'
webhook	shape	The staging and production webhook URLs to send forward event data to.

LevelIndicator

Examples

Basic

Beginner

Intermediate

Advanced

Props

Name	Type	Details
level REQUIRED	enum	Options: `[ "1", "2", "3" ]`

MapWrapper

Examples

Basic.

Props

Name	Type	Details
children REQUIRED	node
height REQUIRED	union	Options: `[ "string", "number" ]`
reason	string

Note

Examples

Basic.

book

NOTE

Here is a little thing to note.

Props

Name	Type	Details
children REQUIRED	node
theme	enum	Default: 'default' Options: `[ "'warning'", "'error'", "'download'", "'legacy'", "'beta'", "'default'", "'new'", "'pricing'" ]`
title	string

Phone

Examples

Basic.

Props

Name	Type	Details
children REQUIRED	node
mode REQUIRED	enum	Options: `[ "'portrait'", "'landscape'" ]`
platform REQUIRED	enum	Options: `[ "'ios'", "'android'" ]`

Examples

Basic.

tutorial

First steps with the Mapbox Maps SDK for Android

Walk through installing the Mapbox Maps SDK for Android, getting a map on the screen, and changing the map style.

chevron-right

Video.

Props

Name	Type	Details
children REQUIRED	node	Description of the related page in the context of the current page.
title REQUIRED	string	Title of the related page in the context of the current page.
contentType	enum	The content-type of the related page. Default: 'default' Options: `[ "'example'", "'glossary'", "'guide'", "'tutorial'", "'troubleshooting'", "'playground'", "'video'", "'default'" ]`
label	string	Override the label name. This value is set by the `contentType`, but you can override it when needed.
url	custom	The link to the related page. Required if `youtubeId` is not set.
youtubeId	custom	The youtubeId of the video. Required if `url` is not set.

Search

Examples

Basic. Pass the name of the site to the component to enable the site or "All docs" toggle.

Disable modal, only show input.

Narrow.

Props

Name	Type	Details
background	enum	Choose from `light` or `dark`. Default: 'light' Options: `[ "'light'", "'dark'" ]`
connector	instanceOf	Option to connect to a custom search engine Default: `new SiteSearchAPIConnector({ engineKey: 'zpAwGSb8YMXtF9yDeS5K', // public engine key engineName: 'docs', documentType: ['page'], beforeSearchCall: ( // if no results, retry with spelling suggestion existingSearchOptions, next ) => next({ ...existingSearchOptions, spelling: 'retry' }) })`
disableModal	bool	Disable modal if you always want an input Default: false
emptyResultMessage	node	Node to display when there are no search results for the given query Default: `<p> Hmmm, we didn't find anything. Reword your search, or{' '} <a href="https://support.mapbox.com/hc/en-us">contact Support</a>. </p>`
inputId	string	Override default id for input/label, used for testing Default: 'docs-search'
narrow	bool	Collapse input to fit in a crowded space
overrideSearchTerm	string	If `resultsOnly: true` set `overrideSearchTerm` to set the search term
placeholder	string	Replace the input placehoder with a different string Default: 'Search'
resultsOnly	bool	If true, only show results from search Default: false
segmentTrackEvent	string	Segment track event, default is (Searched docs) Default: 'Searched docs'
site	string	Add current site filter toggle
themeCompact	bool	If true, enable compact mode utilizing smaller text and padding, default false Default: false

Tag

Examples

Basic.

BETA

Custom.

LIMITED ACCESS

Icon.

bookmark

Small.

BETA

Props

Name	Type	Details
theme REQUIRED	enum	Options: `[ "'beta'", "'fundamentals'", "'legacy'", "'new'", "'custom'", "'pricing'" ]`
customBackground	custom	If the theme is set to "custom", this `customBackground` is required. The value must be a class name.
customBorder	custom	If the theme is set to "custom", this `customBorder` is required. The value must be a class name.
customColor	custom	If the theme is set to "custom", this `customColor` is required. The value must be a class name.
customIcon	custom	customIcon is required if using the "custom" theme and `icon=true`
customLabel	custom	If the theme is set to "custom", this prop is required.
customTooltipText	custom	If the theme is set to "custom", this prop is required.
icon	bool	If `true`, display the icon only (no text) Default: false
small	bool	If `true`, display the tag with a smaller font and and no border Default: false

Video

Examples

Basic.

The video will not autoplay. Uses poster to set preview image.

Disable autoplay and loop.

Props

Name	Type	Details
src REQUIRED	string	The path to the video.
title REQUIRED	string	The title of the video.
autoplay	bool	If true, the video will autoplay unless the user prefers reduced motion. Default: true
loop	bool	If true, the video will loop unless the user prefers reduced motion. Default: true
muted	bool	If true, the video will be muted. Default: true
playsInline	bool	If true, the video will play on the page for iOS/Safari. If false, the video open fullscreen on play. Default: true
poster	string	A path to a preview image for the video. Default: undefined

VideoModal

Examples

Basic.

Props

Name	Type	Details
closeModal REQUIRED	func
title REQUIRED	string
youtubeId REQUIRED	string

RightArrow

Examples

No description.

Props

Name	Type	Details
isHovered	bool	Default: false

Code

AndroidLayoutCodeBlock

Examples

Basic.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:mapbox="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
 
<com.mapbox.mapboxsdk.maps.MapView
android:id="@+id/mapView"
android:layout_width="match_parent"
android:layout_height="match_parent"
mapbox:mapbox_cameraTargetLat="38.9098"
mapbox:mapbox_cameraTargetLng="-77.0295"
mapbox:mapbox_cameraZoom="12" />
 
<Button
android:id="@+id/startButton"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:background="@color/mapboxGrayLight"
android:enabled="false"
android:text="Start navigation"
android:textColor="@color/mapboxWhite"
mapbox:layout_constraintStart_toStartOf="parent"
mapbox:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

With filename and GitHub link.

activity_styles_runtime_styling

github View on GitHub

<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:mapbox="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
 
<com.mapbox.mapboxsdk.maps.MapView
android:id="@+id/runtime_mapview"
android:layout_width="match_parent"
android:layout_height="match_parent"
mapbox:mapbox_cameraTargetLat="19.948045"
mapbox:mapbox_cameraTargetLng="-84.654463"
mapbox:mapbox_cameraZoom="3.371717" />
 
<android.support.design.widget.FloatingActionButton
android:id="@+id/floatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="16dp"
mapbox:layout_constraintBottom_toBottomOf="parent"
mapbox:layout_constraintEnd_toEndOf="parent" />
 
</android.support.constraint.ConstraintLayout>

Props

Name	Type	Details
code REQUIRED	string
filename	string
link	string

CodeSnippet

Examples

Basic.

<h1>Hello world!</h1>

CodeSnippet with every feature

index.html

<h1>Hello world!</h1>

Props

Name	Type	Details
code REQUIRED	string	The raw code.
highlighter REQUIRED	func	The dr-ui/highlight function, example: "highlighter={highlightJson}". You must also import the function in your frontmatter.
edit	shape	Enables the Edit in CodePen/JSFiddle buttons
filename	string	Name of the file to add context to the code block.
maxHeight	number	The maximum height of the code block. If set, the Edit buttons (if enabled) will move above the CodeSnippet.

CodeSnippetTitle

Examples

Basic.

MainActivity.java

github View on GitHub

With toggle

ViewController

github View on GitHub

Swift

Objective-C

Props

Name	Type	Details
filename	string
link	custom
toggle	node

CodeToggle

Examples

Basic.

Swift

Objective-C

Props

Name	Type	Details
id REQUIRED	string
onChange REQUIRED	func
options REQUIRED	arrayOf	Options: `{ "label": { "name": "string", "required": true }, "language": { "name": "string", "required": true }, "preferredLanguage": { "name": "bool", "required": true } }`

ContextlessAndroidActivityToggle

Examples

Basic.

map.getStyle(new Style.OnStyleLoaded() {
@Override
public void onStyleLoaded(@NonNull Style style) {
 
Layer settlementLabelLayer = style.getLayer("settlement-label");
 
if (settlementLabelLayer != null) {
settlementLabelLayer.setProperties(textField("{name_ru}"));
}
}
});

Props

Name	Type	Details
context REQUIRED	shape
id REQUIRED	string
copyRanges	shape
filename	string
java	string
kotlin	string
limitHeight	bool
link	string

ContextlessIosViewControllerToggle

Examples

Basic.

// 'style' in this case refers to an MGLStyle object.
let layer = style.layer(withIdentifier: "place-city-sm") as! MGLSymbolStyleLayer
let spanish = Locale(identifier: "es")
layer.text = layer.text.mgl_expressionLocalized(into: spanish)

Props

Name	Type	Details
context REQUIRED	shape
id REQUIRED	string
swift REQUIRED	string
copyRanges	shape
filename	string
limitHeight	bool	Default: true
link	string
objectiveC	string

Edit

Examples

Basic.

Props

Name	Type	Details
html REQUIRED	string
js REQUIRED	string
css	string
frontMatter	shape
head	string
resources	shape

Highlight

Examples

Using highlighter with CodeSnippet.

import Mapbox
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
 
let url = URL(string: "mapbox://styles/mapbox/streets-v10")
let mapView = MGLMapView(frame: view.bounds, styleURL: url)
mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
mapView.setCenter(CLLocationCoordinate2D(latitude: 59.31, longitude: 18.06), zoomLevel: 9, animated: false)
view.addSubview(mapView)
}

NumberedCodeSnippet

Examples

Basic.


override func viewDidLoad() {
super.viewDidLoad()
 
let mapView = MGLMapView(frame: view.bounds)
mapView.styleURL = MGLStyle.lightStyleURL
mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
 
mapView.setCenter(CLLocationCoordinate2D(latitude: 44.971, longitude: -93.261), zoomLevel: 10, animated: false)
 
mapView.delegate = self
view.addSubview(mapView)
}

Props

Name	Type	Details
code REQUIRED	string	Raw (unhighlighted) code. When the user clicks a copy button, this is what they'll get. If no `highlightedCode` is provided, `code` is displayed.
highlightThemeCss REQUIRED	string	CSS that styles the highlighted code.
characterWidth	number	The width of a character in the theme's monospace font, used for indentation. If you use a font or font-size different than the default theme, you may need to change this value. Default: 7.225
collapseLines	bool	Determines if non-copiable lines (when using `copyRanges`) should be collapsed. Default is true. If false, a `maxHeight` is defined, and the first live chunk (from the `copyRanges` prop) is not visible in the snippet given the `maxHeight`, the component will autoscroll to make sure the live chunk is in view when the page loads. Default: true
copyRanges	arrayOf	Specific line ranges that should be independently copiable. Each range is a two-value array, consisting of the starting and ending line. If this is not provided, the entire snippet is copiable. Options: `{ "name": "number" }`
highlightedCode	string	The HTML output of running code through a syntax highlighter. If this is not provided,`code` is displayed, instead.
maxHeight	number	A maximum height for the snippet. If the code exceeds this height, the snippet will scroll internally.

ToggleableCodeBlock

Examples

Basic.

ThisIsAFile.extension

github View on GitHub


private MapView mapView;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
Mapbox.getInstance(this, "your-token");
setContentView(R.layout.activity_main);

Props

Name	Type	Details
code REQUIRED	string
highlightedCode REQUIRED	string
id REQUIRED	string
selectedLanguage REQUIRED	string
changeLanguage	func
copyRanges	object
filename	string
limitHeight	bool	Default: true
link	string
options	array

Layout

An example

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Was this page helpful?

"example" layout, index page (has navOrder in frontmatter)

Examples

codeJavaScript

Display a map

Initialize a map in an HTML element with Mapbox GL JS.

codeJavaScript

Add a default marker

Add a default Marker to the map.

codeJavaScript

Extrude polygons for 3D indoor mapping

Create a 3D indoor map with the fill-extrude-height paint property.

"full" layout with custom "domain" prop

Guides

Section 1

Section 2

Was this page helpful?

"page" layout.

Worldview

Web maps using older library versions

Identify geographic features whose characteristics are defined differently by audiences belonging to various regional, cultural, or political groups.

Mobile applications using older SDK versions

When creating a map style with a tileset that uses worldviews, you must apply a filter to any layers that include a worldview data field.

Data sources

Some Mapbox vector tilesets, including Mapbox Streets v8 and Boundaries v3, include the worldview data field in several layers.

Was this page helpful?

"page" layout.

Border styling

Set a filter

Style the line

Data sources

Some Mapbox vector tilesets, including Mapbox Streets v8 and Boundaries v3, include the worldview data field in several layers.

chevron-right

Was this page helpful?

Props

Name Type Details

constants REQUIRED

shape

SITE - the name of the site.
BASEURL - the base url of the website, as used in the batfish.config.js
FORWARD_EVENT_WEBHOOK - an object with to values: production and staging.

frontMatter REQUIRED

shape

`frontMatter` prop	Description	Conditions
`layout`	One of: `page`, `example`, `full`, `exampleIndex`.
`navOrder`	If defined with a number, the page will be added to TabList in the navigation bar. This is the canonical way for defining a top-level page.
`order`	Defined by number, the order that pages should appear in the sidebar's NavigationAccordion	`page` layout
`hideTitle`	Hide the title of the page.
`hideFeedback`	Remove the feedback component from the bottom of the page.
`sidebarTheme`	Mapbox Assembly class names to style the sidebar container.	all layouts except `none`
`hideCardLanguage`	If `true`, hide the language from all Cards.	`exampleIndex` layout
`hideCardDescription`	If `true`, hide the description from all Cards.	`exampleIndex` layout
`fullWidthCards`	Makes CardContainer full width.	`exampleIndex` layout
`showCards`	Enable or disable the `CardsContainer`. This is helpful for pages like the dr-ui Components page.	`exampleIndex` layout
`cardColSize`	A number to define the column sizes for the Cards	`exampleIndex` layout
`unProse`	If `true`, remove the "prose" class from PageLayout. This is helpful for non-content pages.
`noShellHeaderBuffer`	If `true`, remove the header buffer div. This is helpful for custom headers like on the Help page.
`hideFromNav`	If `true`, remove an item from appearing in NavigationAccordion. (This is used in API docs.)
`hideBreadcrumbs`	If `true`, remove the breadcrumbs. (This is used by Help home page.)
`hideSidebar`	If `true`, remove the sidebar. (This is used by Help home page and Playground.). This setting will also enable breadcrumbs to display on mobile (unless `hideBreadcrumbs: true`).
`showFilters`	All filters for an exampleIndex page are shown if the data is available. Use `showFilters` to define only the filters you want the page to display.	`exampleIndex` layout
`onThisPage`	If unspecified, `<OnThisPage>` aside will appear on all pages with `layout: page`. If set to `false` for pages with `layout: page`, `<OnThisPage>` will be hidden. If set to `true` for pages with other layouts, `<OnThisPage>` will appear.

location REQUIRED

shape

Provided by Batfish, the pathname (relative url) of the current page is required

navigation REQUIRED

shape

navTabs - links to be shown in the NavigationAccordion, formatted as an array of object: [{"href": "/overview", "id": "overview", "label": "Overview"}]
hierarchy - Object of every path and their parent: {"/guides/layouts": {"parent": "/guides", "title": "Guides"}}
title - required for multi-structured layouts, this is the title for the ProductMenu
tag - optional tag name to pass to ProductMenu, see available options.

AppropriateImage

func

Required if using the exampleIndex layout along with imageIds. The value is the local AppropriateImage component.

children

node

domain

shape

The domain's title and homepage path to be added as the first Breadcrumb link

Default:

{
  title: 'All docs',
  path: 'https://docs.mapbox.com'
}

feedbackSentryDsn

union

For Feedback component

Options:

[
  "bool",
  "string"
]

filters

objectOf

An object of filters. This dataset can be generated with @mapbox/dr-ui/helpers/batfish/filters.js.

Options:

{
  "topics": {
    "name": "array",
    "required": false
  },
  "pages": {
    "name": "array",
    "required": false
  },
  "languages": {
    "name": "array",
    "required": false
  },
  "levels": {
    "name": "array",
    "required": false
  },
  "videos": {
    "name": "bool",
    "required": false
  }
}

headings

array

For when headings are dynamic, this is used by API docs

hideSearch

bool

Hide Search component from the sidebar

Default:

false

Heading 1

Heading a

Heading b

Heading c

Heading 2

Heading 3

Heading a 1

Heading b 1

Heading c 1

Heading 4

Props

Name Type Details

headings

arrayOf

Name	Type	Details
headings	arrayOf	Array of headings Options: `{ "text": { "name": "string", "required": true }, "slug": { "name": "string", "required": true }, "children": { "name": "arrayOf", "value": { "name": "shape", "value": { "text": { "name": "string", "required": true }, "slug": { "name": "string", "required": true }, "icon": { "name": "string", "required": false } } }, "required": false } }`
themeWrapper	string	Assembly classes to apply to the containing wrapper Default: ''
topOffset	number	Threshold that the anchor must pass to be considered the active anchor Default: 120

Array of headings

Options:

{
  "text": {
    "name": "string",
    "required": true
  },
  "slug": {
    "name": "string",
    "required": true
  },
  "children": {
    "name": "arrayOf",
    "value": {
      "name": "shape",
      "value": {
        "text": {
          "name": "string",
          "required": true
        },
        "slug": {
          "name": "string",
          "required": true
        },
        "icon": {
          "name": "string",
          "required": false
        }
      }
    },
    "required": false
  }
}

themeWrapper

string

Assembly classes to apply to the containing wrapper

Default:

topOffset

number

Threshold that the anchor must pass to be considered the active anchor

Default:

120

BackToTopButton

Examples

Basic.

OverviewHeader

Examples

Basic.

Mapbox SDK for Breakfast

Current version: v0.1.0View changelog

check
Smooth scrambled eggs
check
Vegetarian sausage
check
Fruit syrups

Install githubContribute on GitHub

Change background color and text with theme and lightText.

How Mapbox Works

Learn about the building blocks that Mapbox provides so you can create custom mapping applications.

Props

Name	Type	Details
title REQUIRED	string	title of the product
card	bool	If `true`, render a card-style container with shadow, used in the help docs
changelogLink	string	creates a "View changelog" link
contactLink	string	creates a "Contact us" button
customTagProps	shape
description	string	description of the product
features	arrayOf	features of the product
ghLink	string	creates a "Contribute on GitHub" link
highlightColor	string	The highlight color, adds a thin colored line to the left used in the help docs
image	node	image of the product
installLink	string	creates an "Install" button
lightText	bool	If `true`, the component will use white text Default: false
tag	enum	Options: `[ "'legacy'", "'beta'", "'fundamentals'", "'new'", "'custom'" ]`
theme	string	Classes to apply to the OverviewHeader containter, usually an Assembly background color: https://labs.mapbox.com/assembly/documentation/#Background-colors
titleIcon	node	an image to display to the left of the title, used in the help docs
version	string	version number of the product

NavigationAccordion

Examples

Basic.

Props

Name Type Details

Name	Type	Details
location REQUIRED	object
navigation REQUIRED	arrayOf	Options: { "title": { "name": "string", "required": true }, "path": { "name": "string", "required": true }, "id": { "name": "string", "required": true }, "tag": { "name": "string", "required": false }, "hideSubpages": { "name": "bool", "required": false }, "pages": { "name": "arrayOf", "value": { "name": "shape", "value": { "title": { "name": "string", "required": true }, "path": { "name": "string", "required": true }, "id": { "name": "string", "required": false }, "tag": { "name": "string", "required": false }, "subPages": { "name": "arrayOf", "value": { "name": "shape", "value": { "title": { "name": "string", "required": true }, "path": { "name": "string", "required": true }, "id": { "name": "string", "required": false } } }, "required": false } } }, "required": false } }
parentPage REQUIRED	string

location REQUIRED

object

navigation REQUIRED

arrayOf

Options:

{
  "title": {
    "name": "string",
    "required": true
  },
  "path": {
    "name": "string",
    "required": true
  },
  "id": {
    "name": "string",
    "required": true
  },
  "tag": {
    "name": "string",
    "required": false
  },
  "hideSubpages": {
    "name": "bool",
    "required": false
  },
  "pages": {
    "name": "arrayOf",
    "value": {
      "name": "shape",
      "value": {
        "title": {
          "name": "string",
          "required": true
        },
        "path": {
          "name": "string",
          "required": true
        },
        "id": {
          "name": "string",
          "required": false
        },
        "tag": {
          "name": "string",
          "required": false
        },
        "subPages": {
          "name": "arrayOf",
          "value": {
            "name": "shape",
            "value": {
              "title": {
                "name": "string",
                "required": true
              },
              "path": {
                "name": "string",
                "required": true
              },
              "id": {
                "name": "string",
                "required": false
              }
            }
          },
          "required": false
        }
      }
    },
    "required": false
  }
}

parentPage REQUIRED

string

ProductMenu

Examples

Basic.

Beta.

Props

Name	Type	Details
homePage REQUIRED	string
productName REQUIRED	union	Options: `[ "string", "node" ]`
customTagProps	shape
lightText	bool	Default: false
tag	enum	Options: `[ "'legacy'", "'beta'", "'fundamentals'", "'new'", "'custom'" ]`

Card

Examples

Basic.

Intermediate

codeJavaScript

My cool card

This card is very cool.

No image

Intermediate

codeJavaScript

My cool card

This card is still cool despite not having a thumbnail.

No description.

Intermediate

codeJavaScript

My cool card without a description

Props

Name	Type	Details
path REQUIRED	string
title REQUIRED	string
description	string
language	string
level	node
link	string
thumbnail	node

CardContainer

Examples

Basic.

Category (2)

Use cardColSize to show 4 items per row.

Another category (4)

Full-width cards, no image

Another category (2)

Props

Name	Type	Details
cards REQUIRED	arrayOf
cardColSize	enum	Default: '1/2' Options: `[ "'1/4'", "'1/3'", "'1/2'" ]`
fullWidthCards	bool	Default: false
path	string
title	string

Examples

Display breadcrumbs for a page.

Props

Name	Type	Details
location REQUIRED	shape	Current page pathname
links	arrayOf	Array of links to build the breadcrumb Options: `{ "title": { "name": "string", "required": true }, "path": { "name": "string", "required": true } }`
themeWrapper	string	Assembly classes to apply to the containing wrapper Default: ''

AnalyticsShell

Examples

The AnalyticsShell adds Sentry and initializes @mapbox/web-analytics from docs-page-shell.

Hello world!

Props

Name	Type	Details
children REQUIRED	node
location REQUIRED	shape	Location object (often provided by Batfish), `pathname` is current page's relative path.
disableSentry	bool	If `true`, Sentry will not initialize. Default: false
disableWebAnalytics	bool	If `true`, Mapbox analytics (`initializeMapboxAnalytics`) will not initialize. Default: false
domain	string	Production website domain. Default: 'https://docs.mapbox.com'
mbxMetadata	shape	Object of properties to send to Segment Default: {}
sentry	shape	Customize Sentry options. Default: `{ dsn: 'https://6ba8cfeeedad4fb7acb8576f0fd6e266@sentry.io/1384508' }`
sentryPerformance	shape	Customize Sentry performance monitoring options. To disable performance, set this value as an empty object: `sentryPerformance=` Default: `{ // This enables automatic instrumentation (highly recommended) integrations: [new TracingIntegrations.BrowserTracing()], // To set a uniform sample rate tracesSampleRate: 0.05 }`
webAnalytics	object	Customize web-analytics options. Default: `{ segmentIntegrations: { Drift: false } }`

ErrorBoundary

Examples

Basic.

This content does not trigger an error.

Props

Name	Type	Details
children REQUIRED	node	Wrap ErrorBoundary around components to catch any errors triggered from within those nodes.
errorNote	node	Contents of error note. Default: <p>We sent the error to the team. Please refresh the page to try again.</p>
errorNoteTitle	string	Title of error note. Default: 'Something went wrong'
setExtra	object	Each key/value will be added as extra context to the Sentry issue.

Plugins

Examples

Basic.

iOS plugins (2)

Plugins offer features and functionality related to map controls and other things that users can touch or interact with, like draw tools, map export tools, directions and geocoding controls, and more.

mapbox-gl-compare

Enables users to compare two maps by swiping left and right.

githubView this project

mapbox-gl-controls

Adds controls for a ruler, style inspector, localization, and style switcher.

githubView this project

Props

Name	Type	Details
pluginData REQUIRED	object
AppropriateImage	node

Images

BookImage

Examples

Basic.

Props

Name	Type	Details
size	number	Default: 60

BookletImage

Examples

Basic.

Props

Name	Type	Details
size	number	Default: 60

ContactImage

Examples

Basic.

Props

Name	Type	Details
size	number	Default: 60

ExampleImage

Examples

Basic.

Props

Name	Type	Details
size	number	Default: 60

GlossaryImage

Examples

Basic.

Props

Name	Type	Details
size	number	Default: 60

PlaygroundImage

Examples

Basic.

Props

Name	Type	Details
size	number	Default: 60

TroubleshootImage

Examples

Basic.

Props

Name	Type	Details
size	number	Default: 60

Was this page helpful?