CARTO for React

CARTO for React

Github Code

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:

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

  • Example:

    1
2
3

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

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