CARTO for React

CARTO for React

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'