How to get custom map screenshot with markers

[PriyaankShrivastav]

Hi,

I am looking to get the screenshot of the map of a specific region with markers shown(if its present in region).
I used code from #726 (comment) but it gives full screenshot of the map with no markers even though markers are present on the map. How can I get custom region screen shot with markers?

Code -

const handleSnapshotClick = () => {
    console.log("Snapshot clicked");
    map.current?.getMap().triggerRepaint()
    map.current?.getMap().once('render', () => {
      const img = map.current?.getMap().getCanvas().toDataURL()
      console.log("Snapshot img -", img);
    });
  }

return (
    <>
      <div className="info_icon">
        <IconButton
          size="large"
          aria-label="account of current user"
          aria-controls="menu-appbar"
          aria-haspopup="true"
          onClick={handleMenu}
          color="inherit"
        >
          <InfoIcon />
        </IconButton>
        <Menu
          id="menu-appbar"
          anchorEl={anchorEl}
          anchorOrigin={{
            vertical: 'top',
            horizontal: 'right',
          }}
          keepMounted
          transformOrigin={{
            vertical: 'top',
            horizontal: 'right',
          }}
          open={Boolean(anchorEl)}
          onClose={handleClose}
          className="info_icon_menu"
        >
          <MenuItem>lat: {viewport.latitude}</MenuItem>
          <MenuItem>long: {viewport.longitude}</MenuItem>
          <MenuItem>zoom: {viewport.zoom}</MenuItem>
          <MenuItem>mode: {modeId}</MenuItem>
        </Menu>
      </div>
      <Container className="main_container">
        <ReactMapGL
          ref={map}
          {...viewport}
          mapboxApiAccessToken={token}
          mapStyle="mapbox://styles/link"
          onViewportChange={(viewport: ViewPort) => {
            setViewport(viewport);
          }}
          onClick={selectOnClick}
          onMouseMove={highlightHoveredRegion}
        >
          {markers}
          <NavigationControl className={styles.navControlStyle} />
          <Editor
            // to make the lines/vertices easier to interact with
            ref={editor}
            clickRadius={12}
            mode={modeHandler}
            modeConfig={{ dragToDraw: modeId === 'drawPolygonDrag' }}
            onSelect={onSelect}
            onUpdate={onUpdate}
            selectedFeatureIndex={selectedFeatureIndex}
            features={editFeatures}
            editHandleShape={'circle'}
          />
        </ReactMapGL>
          <button onClick={handleSnapshotClick}>Take Snapshot</button>
        <Backdrop
          sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
          open={isLoading}
        >
          <CircularProgress color="inherit" />
        </Backdrop>
      </Container>
    </>
  );