1

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
    });
    map.addLayer(imglayer);

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

How can I display PDF files on map?

Improve this question
5
  • 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
    Feb 1 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
    Feb 1 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
    Feb 1 at 14:28
  • 1
    The example from @Mike works fine for me and is the way to go.
    – geraldo
    Feb 1 at 15:17
  • @Mike it solved my problem and works perfectly, thank a lot.
    – Jayzz
    Feb 3 at 2:34

0

Reset to default

Your Answer

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

Browse other questions tagged or ask your own question.