CARTO for React

CARTO for React

Build compelling spatial apps using CARTO, React and deck.gl.

Github Code

Basemaps

Package Version Downloads
@carto/react-basemaps version downloads

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 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

  • Example:

    1
2
3

    import { BASEMAPS } from "@carto/react-basemaps";

console.log(BASEMAPS.VOYAGER); // 'voyager'