Basemaps

View on Github

Note: We are reducing our investment in CARTO for React and currently we discourage users from starting new projects with it.

CARTO for React is an opinionated framework with pre-built components and templates. This greatly speeds up the process to create React-based applications, but customization options are limited.

If you need further customization in React, or you want to build geospatial applications using Vue, Angular, or any other Javascript-based framework, we recommend going directly to the main CARTO for Developers documentation, including CARTO + deck.gl, which allows for maximum flexibility and scalability.

Package	Version	Downloads
@carto/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:

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'