MapImagePlot API

API reference docs for the React MapImagePlot component. Learn about the props, CSS, and other APIs of this exported module.

Demos

For examples and details on the usage of this React component, visit the component demo pages:

Charts - Map 🧪

Import

import { MapImagePlot } from '@mui/x-charts-premium/Map';
// or
import { MapImagePlot } from '@mui/x-charts-premium';

Learn about the difference by reading this guide on minimizing bundle size.

Renders a raster base map (for example a satellite mosaic) under the series, reprojected to match the chart's projection so it follows the geography instead of being a flat rectangle. Pixels outside the projection's visible footprint are left transparent.

The source image is loaded only when href changes; changing the projection or resizing reuses the decoded image and only re-runs the (synchronous) canvas reprojection.

The source image is assumed to be equirectangular; use imageBounds when it does not cover the whole globe. Any other SVG image attribute is forwarded to the underlying element.

Props

Name	Type	Default	Description
href	string	-	URL of the image to render as the base map. Must be same-origin (or CORS-enabled) so it can be reprojected on a canvas.
imageBounds	Array<Array<number>>	[[-180, -90], [180, 90]]	Geographic extent the source image covers, as `[[west, south], [east, north]]`. The image is assumed to be in the equirectangular (plate carrée) projection. If `west` is greater than `east`, the range wraps across the antimeridian.
onReady	func	-	Called after each reprojection. Signature:`function(dataUrl: string \| null) => void` `dataUrl` The reprojected raster as a data URL, or `null` when it could not be produced.

The component cannot hold a ref.

Source code

If you did not find the information in this page, consider having a look at the implementation of the component for more detail.