I have a PDF file containing geographic images. I want to show it on the map but haven't found a solution yet.

I tried this way:

    const imgExtent = [0, 0, 1024, 968];
    const projection = new ol.proj.Projection({
        units: 'pixels',
        extent: imgExtent
    let imglayer = new ol.layer.Image({
        source: new ol.source.ImageStatic({
            url: 'img/geographic.pdf',
            projection: projection,
            imageExtent: imgExtent
        // minZoom: 15

but the desired result is not achieved, only JPEG, PNG,... images are displayed.

How can I display PDF files on map?

  • That's not possible as ImageStatic source doesn't accept PDF files, it depends on standard HTML image so only these formats are accepted. In case your file is GeoPDF you could convert it to GeoTIFF (using QGIS) and display it like in this example, if not export your images from PDF and use them directly like in this example.
    – geraldo
    Commented Feb 1, 2023 at 11:18
  • 3
    You could use a third-party library such as PDF.js to convert a standard pdf to a canvas, then use the canvas data url as the url for the ImageStatic as in codesandbox.io/s/static-image-forked-hx0d2h
    – Mike
    Commented Feb 1, 2023 at 11:51
  • @geraldo I'm not sure if my PDF file is GeoPDF or not. I tried the above two examples but didn't get the desired result.
    – Jayzz
    Commented Feb 1, 2023 at 14:28
  • 1
    The example from @Mike works fine for me and is the way to go.
    – geraldo
    Commented Feb 1, 2023 at 15:17
  • @Mike it solved my problem and works perfectly, thank a lot.
    – Jayzz
    Commented Feb 3, 2023 at 2:34


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.