Mapbox Experiment

Steve Ruiz

Create a map from the Mapbox GL library. 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 to the map and optionally fit the map to those features.

Prop Type Notes
accessToken string Get yours at Mapbox.
style string Mapbox default style
styleUrl string Custom Mapbox style URL
longitude number
latitude number
zoom number
bearing number
pitch number
markers object[] See Markers below
fitBounds boolean Whether to fit bounds to markers
minZoom number Applies only to fitted bounds
maxZoom number Applies only to fitted bounds
padding number Applies only to fitted bounds
debug boolean
onClick function
onMouseEnter function
onMouseLeave function
prepareViewport function See PrepareViewport below
onChangeViewport function
onStyleLoad function
onMarkerClick function See Markers below
onMarkerMouseEnter function
onMarkerMouseLeave function
onMarkerMouseDown function
onMarkerMouseUp function
onMarkerDragStart function
onMarkerDrag function
onMarkerDragEnd function

Custom Styles

To use a custom style created in (Mapbox Studio)[“https://studio.mapbox.com”], select “custom” from the component’s Style property control. Next, add the style’s URL in the component’s Style URL property control.

If setting the custom style via overrides, you’ll need to override both props, passing ”custom” to style and your style’s URL to the customStyle.

PrepareViewport

With the prepareViewport prop, you’re able to decide where to jump the camera before a viewport change occurs. This is useful for preventing long transitions between distant centers.

To use this prop, pass it a callback function that accepts the preview viewport and the next viewport as arguments, and returns a viewport to jump to before flying the camera to the next viewport.

Example:

prepareViewport={(prev, next) => {
    return {
        center: next. Center,
        zoom: next.zoom - .5
    }
}}

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
center                             [number, number] The marker’s center (lng, lat)
options mapboxgl.MarkerOptions (optional)
id string An id for the marker (optional)
type Marker = {
    id?: string
    center: [number, number]
    options?: mapboxgl.MarkerOptions
}

Example:

markers= {[
    { 
        center: [43, -47], 
        options: {
            anchor: “top”,
            draggable: true
        }
    }
]}

Marker Events

Props such as onMarkerClick will be assigned to all markers on the map. Each event handler will be called with the marker object used to create the marker, the marker instance and the map instance.

type MarkerEventHandler = (marker: Marker, instance: mapboxgl.Marker, map: mapboxgl.Map) => void

Changelog:

  • 1.8.0 - Refactors Map (it should now be much more performant and render much less often) and adds debug for debug mode
  • 1.7.0 - Adds custom styles
  • 1.6.0 - Fixes bug in bounds
  • 1.5.0 - Adds docs, marker events
By using our website, you agree to the use of cookies as described in our  Privacy Policy —
I Agree