How can you export a map image with JavaScript V4.x?

MarkSmith · ‎10-10-2024

Hello,

I’m trying to export a map image from a MapImageLayer and separately a TileLayer using ESRI JavaScript V4.30. I have a number of old V3.x JavaScript apps I’m trying to migrate to V4.x, these old apps currently request exportMapImage from the map services in question (hosted on ArcGIS Server 11.1) which returns the url of the exported map image like so:

MyMapService.exportMapImage(params, function (img) {

//Do something with img.href

});

Above is the working V3.x code where params is new esri.layers.ImageParameters() defining the output format, bbox, height and width. The exportMapImage generates the image (for example a png) on the server, returning the url of its location so I can then grab it and use it within my apps.

I’m struggling to interpret the V4.x reference to find an equivalent, I admit that for my skill level I find the API reference a little thin on description, examples and samples which is making it difficult for me. I’ve spent a lot of time trying to work it out myself before coming here, so if someone has the answer, perhaps with example code, it would help me a great deal.

Thank you.

JoelBennett · ‎10-10-2024

Below is a modified version of the MapImageLayer sample. In particular, the function "getImageHref" on lines 22-37 was added to get the URL of an exported image. The input "imageParameters" parameter is an object containing the same properties you described (similar the 3.x ImageParameters object). You can see this function is called on line 73.

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Intro to MapImageLayer | Sample | ArcGIS Maps SDK for JavaScript 4.30</title>

    <link rel="stylesheet" href="https://js.arcgis.com/4.30/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.30/"></script>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <script>
      function getImageHref(mapImageLayer, imageParameters) {
        var imageParams = mapImageLayer.createExportImageParameters(imageParameters.bbox, imageParameters.width, imageParameters.height);
        imageParams.format = imageParameters.format;

        var url = mapImageLayer.url + "/export?f=json";

        Object.keys(imageParams).forEach(function(key) {
          url += "&" + key + "=" + imageParams[key];
        });

        fetch(url).then(function(response) {
          response.json().then(function(json) {
            console.info(json.href);
          });
        });
      }

      require(["esri/Map", "esri/views/SceneView", "esri/layers/MapImageLayer"], (
        Map,
        SceneView,
        MapImageLayer
      ) => {
        /*****************************************************************
         * Create a MapImageLayer instance pointing to a Map Service
         * containing data about pool permits in Southern California
         *****************************************************************/
        const permitsLayer = new MapImageLayer({
          portalItem: {
            // autocasts as new PortalItem()
            id: "d7892b3c13b44391992ecd42bfa92d01"
          }
        });

        /*****************************************************************
         * Add the layer to a map
         *****************************************************************/
        const map = new Map({
          basemap: "dark-gray-vector",
          layers: [permitsLayer]
        });

        const view = new SceneView({
          container: "viewDiv",
          map: map
        });

        /*****************************************************************
         * Animate to the layer's full extent when the view loads
         *****************************************************************/
        view.when(() => {
          permitsLayer.when(function() {
            getImageHref(permitsLayer, {
              bbox: permitsLayer.fullExtent,
              format: "png",
              height: 600,
              width: 800
            });
          });
/*
          view.goTo(permitsLayer.fullExtent)
          .catch((error) => {
              if (error.name != "AbortError"){
                console.error(error);
              }
            });
*/
        });
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>

View solution in original post

JoelBennett · ‎10-10-2024

Below is a modified version of the MapImageLayer sample. In particular, the function "getImageHref" on lines 22-37 was added to get the URL of an exported image. The input "imageParameters" parameter is an object containing the same properties you described (similar the 3.x ImageParameters object). You can see this function is called on line 73.

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Intro to MapImageLayer | Sample | ArcGIS Maps SDK for JavaScript 4.30</title>

    <link rel="stylesheet" href="https://js.arcgis.com/4.30/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.30/"></script>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <script>
      function getImageHref(mapImageLayer, imageParameters) {
        var imageParams = mapImageLayer.createExportImageParameters(imageParameters.bbox, imageParameters.width, imageParameters.height);
        imageParams.format = imageParameters.format;

        var url = mapImageLayer.url + "/export?f=json";

        Object.keys(imageParams).forEach(function(key) {
          url += "&" + key + "=" + imageParams[key];
        });

        fetch(url).then(function(response) {
          response.json().then(function(json) {
            console.info(json.href);
          });
        });
      }

      require(["esri/Map", "esri/views/SceneView", "esri/layers/MapImageLayer"], (
        Map,
        SceneView,
        MapImageLayer
      ) => {
        /*****************************************************************
         * Create a MapImageLayer instance pointing to a Map Service
         * containing data about pool permits in Southern California
         *****************************************************************/
        const permitsLayer = new MapImageLayer({
          portalItem: {
            // autocasts as new PortalItem()
            id: "d7892b3c13b44391992ecd42bfa92d01"
          }
        });

        /*****************************************************************
         * Add the layer to a map
         *****************************************************************/
        const map = new Map({
          basemap: "dark-gray-vector",
          layers: [permitsLayer]
        });

        const view = new SceneView({
          container: "viewDiv",
          map: map
        });

        /*****************************************************************
         * Animate to the layer's full extent when the view loads
         *****************************************************************/
        view.when(() => {
          permitsLayer.when(function() {
            getImageHref(permitsLayer, {
              bbox: permitsLayer.fullExtent,
              format: "png",
              height: 600,
              width: 800
            });
          });
/*
          view.goTo(permitsLayer.fullExtent)
          .catch((error) => {
              if (error.name != "AbortError"){
                console.error(error);
              }
            });
*/
        });
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>

MarkSmith · ‎10-11-2024

Hi Joel,

Thank you for your speedy reply. I've had a go, and this works great for the MapImageLayer, but it doesn't look like createExportImageParameters exists for TileLayer. I don't think that is an issue however as it's possible to construct the url as a string from knowing my TileLayer service url and the required parameters rather than going through the process of using the createExportImageParameters to generate the string.

Thanks so much for your help!

Mark.