# 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'
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.carto.com/carto-for-developers/carto-for-react/library-reference/basemaps.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.