Ask or search…
K
Links
Comment on page

Basemaps

Package
Version
Downloads
@carto/react-basemaps
version
downloads
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:
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 a GoogleMap 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:
import { BASEMAPS } from "@carto/react-basemaps";
console.log(BASEMAPS.VOYAGER); // 'voyager'
Last modified 7mo ago