Basemaps
This package includes constants for working with CARTO and Google Maps basemaps and a component for integration with the Google Maps Javascript API.
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 aGoogleMapor a Mapbox basemap, and manages its state within Redux, in a very easy to use way.
- 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'
Last modified 5mo ago