Hrutik
Hrutik

Reputation: 31

Issue encountered while using the @watergis/mapbox-gl-export library (version 1.2.7) to generate a PDF from the map

1] My project is based on TypeScript, and I am using the @watergis/mapbox-gl-export library (version 1.2.7) to download maps.
2] When I click the "Generate" button to download the map, an error appears in the console, and I am unable to download the file.
3] The code is provided below.

import DeckGL from "@deck.gl/react/typed";
import ReactMap, { MapRef } from "react-map-gl";
import { useEffect, useRef } from "react";
import { MapboxExportControl, Size, PageOrientation, Format, DPI} from '@watergis/mapbox-gl-export';
import "@watergis/mapbox-gl-export/css/styles.css";

export default function Map(props: MapProps) {

const mapRef = useRef<MapRef | null>(null);
const deckRef = useRef(null);

useEffect(() => {
        if (mapRef.current) {
          const mapInstance = mapRef.current.getMap();
          const exportControlOptions = {
            PageSize: Size.A3,
            PageOrientation: PageOrientation.Portrait,
            Format: Format.PNG,
            DPI: DPI[96],
            Crosshair: false,
            PrintableArea: true
          };

          const exportControl = new MapboxExportControl(exportControlOptions);
          mapInstance.addControl(exportControl, "bottom-left");
        }
    }, [mapRef.current]);

    return (
        <DeckGL
            ref={deckRef}
            glOptions={{ preserveDrawingBuffer: true }}
            layers={layers}
            views={mapView}
            and my others props...
        >
            <ReactMap
                ref={mapRef}
                mapboxAccessToken={import.meta.env.VITE_MAPBOX_ACCESS_TOKEN}
                mapLib={import("mapbox-gl")}
                reuseMaps
                mapStyle={getMapboxMapStyle(theme.palette.mode === "dark", props.style)}
                projection={{ name: "mercator" }}
                onLoad={onRender}
                preserveDrawingBuffer={true}
            />
        </DeckGL>
    );
}

4] Below is the relevant portion of my package.json file, showing only the packages related to this issue.

"dependencies": {
        "@deck.gl/core": "8.9.35",
        "@deck.gl/layers": "8.9.35",
        "@deck.gl/react": "8.9.35",
        "@watergis/mapbox-gl-export": "^1.2.7",
        "mapbox-gl": "3.2.0",
        "typescript": "^5.3.3",
        "react-map-gl": "7.1.6",
        }

5] Attached a screenshot of the error with a brief description.(https://i.sstatic.net/9CspSKN7.png)

6] I am passing valid token from .env file

1] I tried using the latest version of the @watergis/mapbox-gl-export library (version 3.5.4). However, when I used it, I encountered a compile-time error. Please see the error details below.

2] I have a CodeSandbox link that I used as a reference to fix my issue. However, in their code, they are using different versions and style link.
Codesandbox link

Upvotes: 1

Views: 26

Answers (0)

Related Questions