
CARTO for React
Basemaps
This package includes constants for working with CARTO and Google Maps basemaps and a component for integration with the Google Maps Javascript API.
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 Google Maps basemap with an interface similar to the one presented by react-map-gl
for Mapbox, thus allowing an easier change between them in your app. It supports both raster and vector basemaps.
- Input:
Param | Type | Description |
---|---|---|
props | ||
props.basemap | Object |
Basemap |
props.viewState | Object |
Viewstate (center, zoom level) |
props.layers | Array.<Layer> |
Layers array |
props.apiKey | string |
Google Maps API Key |
props.mapId | string |
Optional. Google Maps Map ID |
props.getTooltip | function |
Optional. Tooltip handler |
props.onResize | function |
Optional. Handler for resize event |
props.onViewStateChange | function |
Optional. Handler for viewstate change event |
-
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
- GOOGLE_CUSTOM
-
Example:
1 2 3
import { BASEMAPS } from "@carto/react-basemaps"; console.log(BASEMAPS.VOYAGER); // 'voyager'