All docschevron-rightarrow-leftDr. UIchevron-rightComponents

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
Manage styles in Studio.

Props

NameTypeDetails
children REQUIREDnode

DemoIframe

Examples

Props

NameTypeDetails
src REQUIREDstring

The absolute url to the iframe.

title REQUIREDstring

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.

Props

NameTypeDetails
href REQUIREDstring

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

NameTypeDetails
location REQUIREDobject

This prop is generated by Batfish and provides location context for the current page.

site REQUIREDstring

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

NameTypeDetails
level REQUIREDenum
Options:
[
  "1",
  "2",
  "3"
]

MapWrapper

Examples

Basic.

Your browser supports Mapbox GL!

Props

NameTypeDetails
children REQUIREDnode
height REQUIREDunion
Options:
[
  "string",
  "number"
]
reason string

Note

Examples

Basic.

book
NOTE

Here is a little thing to note.

Props

NameTypeDetails
children REQUIREDnode
theme enum
Default:
'default'
Options:
[
  "'warning'",
  "'error'",
  "'download'",
  "'legacy'",
  "'beta'",
  "'default'",
  "'new'",
  "'pricing'"
]
title string

Phone

Examples

Basic.

Props

NameTypeDetails
children REQUIREDnode
mode REQUIREDenum
Options:
[
  "'portrait'",
  "'landscape'"
]
platform REQUIREDenum
Options:
[
  "'ios'",
  "'android'"
]

RelatedPage

Examples

Video.

Props

NameTypeDetails
children REQUIREDnode

Description of the related page in the context of the current page.

title REQUIREDstring

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.

Tag

Examples

Basic.

BETA

Custom.

LIMITED ACCESS

Icon.

bookmark
bookmark

Small.

BETA

Props

NameTypeDetails
theme REQUIREDenum
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

NameTypeDetails
src REQUIREDstring

The path to the video.

title REQUIREDstring

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

NameTypeDetails
closeModal REQUIREDfunc
title REQUIREDstring
youtubeId REQUIREDstring

RightArrow

Examples

No description.

Props

NameTypeDetails
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
<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

NameTypeDetails
code REQUIREDstring
filename string
link string

CodeSnippet

Examples

Basic.

<h1>Hello world!</h1>

CodeSnippet with every feature

index.html
<h1>Hello world!</h1>

Props

NameTypeDetails
code REQUIREDstring

The raw code.

highlighter REQUIREDfunc

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

With toggle

ViewController

Props

NameTypeDetails
filename string
link custom
toggle node

CodeToggle

Examples

Basic.

Props

NameTypeDetails
id REQUIREDstring
onChange REQUIREDfunc
options REQUIREDarrayOf
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

NameTypeDetails
context REQUIREDshape
id REQUIREDstring
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

NameTypeDetails
context REQUIREDshape
id REQUIREDstring
swift REQUIREDstring
copyRanges shape
filename string
limitHeight bool
Default:
true
link string
objectiveC string

Edit

Examples

Basic.

Props

NameTypeDetails
html REQUIREDstring
js REQUIREDstring
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

NameTypeDetails
code REQUIREDstring

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 REQUIREDstring

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
private MapView mapView;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
Mapbox.getInstance(this, "your-token");
setContentView(R.layout.activity_main);

Props

NameTypeDetails
code REQUIREDstring
highlightedCode REQUIREDstring
id REQUIREDstring
selectedLanguage REQUIREDstring
changeLanguage func
copyRanges object
filename string
limitHeight bool
Default:
true
link string
options array

Layout

PageLayout

Examples

"example" layout, interior page.

All docschevron-rightdr-uichevron-rightarrow-leftExampleschevron-rightAn example

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)

"full" layout with custom "domain" prop

Documentationchevron-rightarrow-leftMapbox Tiling Servicechevron-rightGuides

Guides

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.

Section 1

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.

Section 2

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?

"page" layout.

All docschevron-rightdr-uichevron-rightGuideschevron-rightarrow-leftWorldviewchevron-rightBorder styling

Border styling

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.

Set a filter

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.

Style the line

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?

Props

NameTypeDetails
constants REQUIREDshape
  • 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 REQUIREDshape
frontMatter propDescriptionConditions
layoutOne of: page, example, full, exampleIndex.
navOrderIf 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.
orderDefined by number, the order that pages should appear in the sidebar's NavigationAccordionpage layout
hideTitleHide the title of the page.
hideFeedbackRemove the feedback component from the bottom of the page.
sidebarThemeMapbox Assembly class names to style the sidebar container.all layouts except none
hideCardLanguageIf true, hide the language from all Cards.exampleIndex layout
hideCardDescriptionIf true, hide the description from all Cards.exampleIndex layout
fullWidthCardsMakes CardContainer full width.exampleIndex layout
showCardsEnable or disable the CardsContainer. This is helpful for pages like the dr-ui Components page.exampleIndex layout
cardColSizeA number to define the column sizes for the CardsexampleIndex layout
unProseIf true, remove the "prose" class from PageLayout. This is helpful for non-content pages.
noShellHeaderBufferIf true, remove the header buffer div. This is helpful for custom headers like on the Help page.
hideFromNavIf true, remove an item from appearing in NavigationAccordion. (This is used in API docs.)
hideBreadcrumbsIf true, remove the breadcrumbs. (This is used by Help home page.)
hideSidebarIf 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).
showFiltersAll 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
onThisPageIf 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 REQUIREDshape

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

navigation REQUIREDshape
  • 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

OnThisPage

Examples

Basic.

Heading 1

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.

Heading a

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.

Heading b

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.

Heading c

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.

Heading 2

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.

Heading 3

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.

Heading a 1

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.

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.

Heading b 1

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.

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.

Heading c 1

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.

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.

Heading 4

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.

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.

Props

NameTypeDetails
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

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

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

NameTypeDetails
title REQUIREDstring

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

ProductMenu

Examples

Basic.

Beta.

Props

NameTypeDetails
homePage REQUIREDstring
productName REQUIREDunion
Options:
[
  "string",
  "node"
]
customTagProps shape
lightText bool
Default:
false
tag enum
Options:
[
  "'legacy'",
  "'beta'",
  "'fundamentals'",
  "'new'",
  "'custom'"
]

Card

Props

NameTypeDetails
path REQUIREDstring
title REQUIREDstring
description string
language string
level node
link string
thumbnail node

CardContainer

Props

NameTypeDetails
cards REQUIREDarrayOf
cardColSize enum
Default:
'1/2'
Options:
[
  "'1/4'",
  "'1/3'",
  "'1/2'"
]
fullWidthCards bool
Default:
false
path string
title string

AnalyticsShell

Examples

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

Hello world!

Props

NameTypeDetails
children REQUIREDnode
location REQUIREDshape

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
Default:
{
  segmentIntegrations: {
    Drift: false
  }
}

ErrorBoundary

Examples

Basic.

This content does not trigger an error.

Props

NameTypeDetails
children REQUIREDnode

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.

mapbox-gl-controls

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

Props

NameTypeDetails
pluginData REQUIREDobject
AppropriateImage node

Images

BookImage

Examples

Basic.

Props

NameTypeDetails
size number
Default:
60

BookletImage

Examples

Basic.

Props

NameTypeDetails
size number
Default:
60

ContactImage

Examples

Basic.

Props

NameTypeDetails
size number
Default:
60

ExampleImage

Examples

Basic.

Props

NameTypeDetails
size number
Default:
60

GlossaryImage

Examples

Basic.

Props

NameTypeDetails
size number
Default:
60

PlaygroundImage

Examples

Basic.

Props

NameTypeDetails
size number
Default:
60

TroubleshootImage

Examples

Basic.

Props

NameTypeDetails
size number
Default:
60
Was this page helpful?