Basemaps

View on Github

Package	Version	Downloads
@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.

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:

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:

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

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