
CARTO for React
Build compelling spatial apps using CARTO, React and deck.gl.
Basemaps
Package | Version | Downloads |
---|---|---|
@carto/react-basemaps | |
|
Basemaps constants and a GoogleMaps component
Components
GoogleMap
React component for working with Google Maps API and deck.gl, by using GoogleMapsOverlay
, from _@deck.gl/google-maps_ module;. It offers a basic googlemaps basemap with an interface similar to the one presented by react-map-gl
for Mabpox, thus allowing an easier change between them in your app.
-
Input:
Param Type Description props props.basemap Object
Basemap props.viewState Object
Viewstate (center, zoom level) props.layers Array.<Layer>
Layers array props.getTooltip function
Tooltip handler props.apiKey string
Google Maps API Key -
Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
import { GOOGLE_SATELLITE, GoogleMap } from "@carto/react-basemaps"; const googleApiKey = "YOUR_API_KEY"; const viewState = { longitude: 0, latitude: 0, zoom: 1 }; // options allows passing extra MapOptions (see: https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions) const basemap = { options: { mapTypeId: GOOGLE_SATELLITE, streetViewControl: true } }; const deckLayers = []; // array of deck.gl layers // (in a react render response...) return ( <GoogleMap apiKey={googleApiKey} viewState={viewState} basemap={basemap} layers={deckLayers} /> );
Tip: if you use CARTO for React template, there is a generic
<Map>
component that abstracts away the use of aGoogleMap
or a Mapbox basemap, and manages its state within Redux, in a very easy to use way.
Constants & enums
BASEMAPS
-
Options:
- POSITRON
- VOYAGER
- DARK_MATTER
- GOOGLE_ROADMAP
- GOOGLE_SATELLITE
- GOOGLE_HYBRID
-
Example:
1 2 3
import { BASEMAPS } from "@carto/react-basemaps"; console.log(BASEMAPS.VOYAGER); // 'voyager'