React Component for Mapbox GL JS

A React component for Mapbox GL JS,  which is a JavaScript library for interactive, customizable vector maps on the web.


npm install --save mapbox-gl immutable @urbica/react-map-gl


/** container className */
className?: string,

/** container style */
style?: Object,

 * The Mapbox style. A string url or a MapboxGL style Immutable.Map object.
mapStyle: string | MapStyle,

/** Sources and Layers */
children?: Node,

 * Mapbox API access token for mapbox-gl-js.
 * Required when using Mapbox vector tiles/styles.
accessToken?: string,

/** The longitude of the center of the map. */
longitude: number,

/** The latitude of the center of the map. */
latitude: number,

/** The tile zoom level of the map. */
zoom: number,

/** Specify the bearing of the viewport */
bearing?: number,

/** Specify the pitch of the viewport */
pitch?: number,

/** The minimum zoom level of the map (0-22). */
minZoom?: number,

/** The maximum zoom level of the map (0-22). */
maxZoom?: number,

 * If `true`, the map's position (zoom, center latitude,
 * center longitude, bearing, and pitch) will be synced
 * with the hash fragment of the page's URL. For example,
 * http://path/to/my/page.html#2.59/39.26/53.07/-24.1/60.
hash?: boolean,

 * The threshold, measured in degrees, that determines when
 * the map's bearing (rotation) will snap to north. For
 * example, with a  bearingSnap of 7, if the user rotates the
 * map within 7 degrees of north, the map will automatically
 * snap to exact north.
bearingSnap?: number,

 * If `false`, the map's pitch (tilt) control with "drag to
 * rotate" interaction will be disabled.
pitchWithRotate?: boolean,

/** If `true`, an AttributionControl will be added to the map. */
attributionControl?: boolean,

/* A string representing the position of the Mapbox wordmark on the map. */
logoPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right',

 * If `true`, map creation will fail if the performance of Mapbox
 * GL JS would be dramatically worse than expected (i.e. a software
 * renderer would be used).
failIfMajorPerformanceCaveat?: boolean,

 * Mapbox WebGL context creation option.
 * Useful when you want to export the canvas as a PNG.
preserveDrawingBuffer?: boolean,

 * If `false`, the map won't attempt to re-request tiles once they
 * expire per their HTTP `cacheControl`/`expires` headers.
refreshExpiredTiles?: boolean,

/** If set, the map will be constrained to the given bounds. */
maxBounds?: mapboxgl.LngLatBoundsLike,

/** If `true`, the "scroll to zoom" interaction is enabled. */
scrollZoom?: boolean | Object,

/** If `true`, the "box zoom" interaction is enabled */
boxZoom?: boolean,

/** If `true`, the "drag to rotate" interaction is enabled */
dragRotate?: boolean,

/** If `true`, the "drag to pan" interaction is enabled */
dragPan?: boolean,

/** If `true`, keyboard shortcuts are enabled */
keyboard?: boolean,

/** If `true`, the "double click to zoom" interaction is enabled */
doubleClickZoom?: boolean,

 * If `true`, the map will automatically resize
 * when the browser window resizes.
trackResize?: boolean,

 * The maxiumum number of tiles stored in the tile cache for a given
 * source. If omitted, the cache will be dynamically sized based on
 * the current viewport.
maxTileCacheSize?: number,

 * If `true`, multiple copies of the world
 * will be rendered, when zoomed out
renderWorldCopies?: boolean,

 * `onViewportChange` callback is fired when the user interacted with the
 * map. The object passed to the callback contains viewport properties
 * such as `longitude`, `latitude`, `zoom` etc.
onViewportChange?: (viewport: Viewport) => void,

/** The onLoad callback for the map */
onLoad?: Function


React Component for Mapbox GL JS

Download Details:

Author: urbica

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website:

License: MIT

You Might Be Interested In:


Add Comment