Description:
A React component for Mapbox GL JS, which is a JavaScript library for interactive, customizable vector maps on the web.
Installation:
npm install --save mapbox-gl immutable @urbica/react-map-gl
Props.
/** 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
Preview:
