# Basemaps

[View on Github](https://github.com/CartoDB/carto-react-template)

{% hint style="warning" %}
**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](https://github.com/CartoDB/gitbook-documentation/blob/master/carto-for-developers/key-concepts/carto-for-deck.gl), which allows for maximum flexibility and scalability.
{% endhint %}

| Package               | Version                                                                                                                                 | Downloads                                                                                                                                  |
| --------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
| @carto/react-basemaps | [![version](https://img.shields.io/npm/v/@carto/react-basemaps.svg?style=flat-square)](https://npmjs.org/package/@carto/react-basemaps) | [![downloads](https://img.shields.io/npm/dt/@carto/react-basemaps.svg?style=flat-square)](https://npmjs.org/package/@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](https://developers.google.com/maps/documentation/javascript/overview).

## Components <a href="#components" id="components"></a>

### **GoogleMap**

React component for working with Google Maps API and [deck.gl](https://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:**

```jsx
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 <a href="#constants--enums" id="constants--enums"></a>

### **BASEMAPS**

* **Options**:
  * POSITRON
  * VOYAGER
  * DARK\_MATTER
  * GOOGLE\_ROADMAP
  * GOOGLE\_SATELLITE
  * GOOGLE\_HYBRID
  * GOOGLE\_CUSTOM
* **Example**:

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

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