Print widget in JS 4.24 not printing with tile layer

386
3
02-03-2024 04:30 AM
mmkmmkv
New Contributor II

in version 4.24, print widget not printing with Tile layer as basemap, shows error, it prints without tile layer, any solution to print with tile layer?

0 Kudos
3 Replies
Noah-Sager
Esri Regular Contributor

Hi @mmkmmkv, thanks for posting your question here. The current version is 4.28, so this issue may have been fixed at a more recent release. If you can share a reproducible test app that shows the error, we could take a look. I'd also recommend looking at our known print limitations for guidance:
https://developers.arcgis.com/javascript/latest/api-reference/esri-rest-print.html

 

0 Kudos
mmkmmkv
New Contributor II

@Noah-Sager this is layerType":"ArcGISTiledMapServiceLayer" which is added as basemap which is published as tiled layer which is a image, also this is not working in 4.28, for this any permission needed for print as pdf, png, etc?

Also, when added as MapImageLayer, it shows error as, message: "Unable to load image: https://.../MapServer/export"
name: "mapimagelayer:image-fetch-error"

Is any export permission required?

I just checked Image Tile layer its spatial reference is 3857 but published tile layer has spatial reference of 4326, does it make a difference?

In export url, i tried below url:

https://.../MapServer/export?bbox=(SPECIFY_BBOX_HERE_OF_3857)&bboxSR=3857&layers=&layerDefs=&size=&imageSR=4326&historicMoment=&format=gif&transparent=false&dpi=&time=&timeRelation=esriTimeRelationOverlaps&layerTimeOptions=&dynamicLayers=&gdbVersion=&mapScale=&rotation=&datumTransformations=&layerParameterValues=&mapRangeValues=&layerRangeValues=&clipping=&spatialFilter=&f=html 

how & where to specify imageSR in print service for export? or bboxSR? if required

 

0 Kudos
mmkmmkv
New Contributor II
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <title>Print widget | Sample | ArcGIS API for JavaScript 4.24</title>
    <link rel="stylesheet" href="https://js.arcgis.com/4.24/esri/themes/light/main.css" />
 
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            overflow: hidden;
        }
 
        .esri-zoom {
            display: none;
        }
    </style>
 
    <script src="https://js.arcgis.com/4.24/"></script>
    <script>
        require([
            "esri/views/MapView",
            "esri/Map",
            "esri/layers/FeatureLayer",
            "esri/layers/MapImageLayer",
"esri/layers/TileLayer",
"esri/layers/support/TileInfo",
"esri/Basemap",
            "esri/widgets/LayerList",
            "esri/widgets/Print",
        ], (
            MapView,
            Map,
            FeatureLayer,
            MapImageLayer,
TileLayer,
TileInfo,
Basemap,
            LayerList,
            Print
        ) => {
baseLayer = new TileLayer({
  id: "base",
  });
//baseLayer.maxScale = 0;
  basemap = new Basemap({
      baseLayers: [baseLayer ],    
      title:"base_map",
      id:"base_map"
    });
            const map = new Map({
           // basemap: "topo-vector",// basemap
basemap: basemap
            });
            const view = new MapView({
                container: "viewDiv",
                map: map,
//center: [0,0],
center: [-82.4645, 35.46453],
        constraints: {
rotationEnabled: false,
           lods: TileInfo.create({
             spatialReference: {
            wkid: 3857
           },
   numLODs: 10,
           }).lods
        },
zoom: 9,
            });
 
            const featureLayer = new FeatureLayer({
               // listMode: "hide"
            });
 
            const mapImageLayer = new MapImageLayer({
            });
 
            map.add(featureLayer);
            //map.add(mapImageLayer);
try{
            view.when(() => {
                const print = new Print({
                    view: view,
                    printServiceUrl:
                });
 
                const layerList = new LayerList({
                    view: view
                });
 
                view.ui.add(print, "top-right");
                view.ui.add(layerList, "top-left");
            });
}
catch(e){
console.log("Error is " + e);
}
        });
 
    </script>
</head>
 
<body class="calcite">
    <div id="viewDiv"></div>
</body>
</html>

 

Above code prints empty pdf which has basemap tile layer, any reason or any suggestions?

0 Kudos