topic Re: Export Map in ArcGIS JavaScript Maps SDK Questions

Export Map

VenkatChakaravarthy — Sat, 28 Jul 2012 13:12:05 GMT

Hi,

I am wondering if there is any way to save the map (as jpg or png or gif or tiff ) when the map is loaded in the browser. I am trying to avoid the user click to export the map after the map is loaded. I have attached a sample map.

Thank you for reading this and I appreciate any advise.

Re: Export Map

MostafaFouly — Mon, 30 Jul 2012 05:44:14 GMT

i think a good way to do that will be implementing getting a screen shot and opening the SaveAs diagram to save it as a .jpg or .png...

you can create your own custom menu via javascript, let's say onRightClick you open your custom menu with saveAs button, and the saveAs button includes getting a screen shot as mentioned above.

grtz,
mostafa.

Re: Export Map

CoreyAlix — Mon, 30 Jul 2012 13:50:13 GMT

The only client-side solution I am aware of is querying all the the imagery URLs and relevant styling information in each layer of interest and generating the HTML for a new window containing those URLs and then printing that window. Of course ArcGIS 10.1 has a print service.

Re: Export Map

VenkatChakaravarthy — Tue, 31 Jul 2012 01:21:31 GMT

i think a good way to do that will be implementing getting a screen shot and opening the SaveAs diagram to save it as a .jpg or .png...

you can create your own custom menu via javascript, let's say onRightClick you open your custom menu with saveAs button, and the saveAs button includes getting a screen shot as mentioned above.

grtz,
mostafa.

Hi Mostafa, thank you for the response. Is there any way to do this after the map load, instead of user saving the map.

Re: Export Map

VenkatChakaravarthy — Tue, 31 Jul 2012 01:25:17 GMT

The only client-side solution I am aware of is querying all the the imagery URLs and relevant styling information in each layer of interest and generating the HTML for a new window containing those URLs and then printing that window. Of course ArcGIS 10.1 has a print service.

Hi Corey,

Thank you for your response. Is there a code snippet for the solution that you recommend?

Re: Export Map

derekswingley1 — Tue, 31 Jul 2012 04:14:39 GMT

Use the print widget or the print task. Here's a simple sample showing how to use the print dijit.

Re: Export Map

RahulMetangale1 — Tue, 31 Jul 2012 04:21:02 GMT

If you are using 10 you can use Advance print SOE:
http://www.arcgis.com/home/item.html?id=6809086326ea4c76bf026a32bb9dd698

Re: Export Map

MostafaFouly — Tue, 31 Jul 2012 05:05:48 GMT

Hi Mostafa, thank you for the response. Is there any way to do this after the map load, instead of user saving the map.

as Derek mentioned you can use the print widget then, check the following sample:
http://help.arcgis.com/en/webapi/javascript/arcgis/demos/widget/widget_print_esri_request.html

Re: Export Map

CoreyAlix — Sat, 11 Dec 2021 07:57:37 GMT

Well, no there is not a snippet that I would recommend but here's what I did. First I created a "printer" constructor:

 createPrinter: function ()
 {
  var transformers = {};

  return {
   register: function (transformName, transform)
   {
    transformers[transformName] = transform;
   },

   print: function (options)
   {
    var self = this, map, output, features;
    map = dojo.byId(options.map);
    output = dojo.byId(options.target) || dojo.create("div");

    features = dojo.filter(options.features, function (f)
    {
     return transformers.hasOwnProperty(f);
    });

    dojo.forEach(features, function (f)
    {
     self.render(output, transformers(map, options));
    });

    return output;
   },

   render: function (div, imagery)
   {
    var images = imagery.images;
    if (images)
    {
     images = dojo.map(images, function (item)
     {
      var img = dojo.create("img", {
       src: item.src
      });

      dojo.style(img, {
       position: "absolute",
       left: item.x + "px",
       top: item.y + "px",
       opacity: item.opacity || 1,
       zIndex: item.zIndex || 99
      });

      if (item.w)
      {
       dojo.style(img, {
        width: item.w + "px",
        height: item.h + "px"
       });
      }

      return img;
     });
    }

    dojo.forEach(images, function (img)
    {
     div.appendChild(img);
    });

    if (imagery.polylines)
    {
     // render vector data
    }
   }
  };
 },

Then I instantiate and extend the printer to handle markers and layers:

 print: function (node)
 {
  var printer;
  printer = createPrinter(acme.gis.mapdrawer.render.createPrinter());
  var div = printer.print({
   map: agsMap,
   features: ["layers", "markers"],
   target: node
  });

  dojo.style(div, {
   position: "relative",
   overflow: "hidden",
   width: $.todo("960px", "move to frame?"),
   height: $.todo("600px", "move to frame?")
  });

  return div;
 },


 function createPrinter(print)
 {
  print.register("markers", function (map)
  {
   var images = [];

   dojo.forEach(map.graphicsLayerIds, function (id)
   {
    var layer = map.getLayer(id);
    dojo.forEach(layer.graphics, function (graphic)
    {
     var geom, symbol, point;
     geom = graphic.geometry;
     symbol = graphic.symbol;
     if (geom.type === "point" && symbol.url)
     {
      point = map.toScreen(geom);
      images.push({
       src: symbol.url,
       x: point.x,
       y: point.y,
       zIndex: 10
      });
     }
    });
   });

   return {
    images: images
   };
  });

  print.register("layers", function (map)
  {
   var images = dojo.query(".layersDiv div img", map.root);
   var root = dojo.position(map.root);
   images = dojo.map(images, function (img)
   {
    var pos;
    pos = dojo.position(img);
    return {
     src: img.src,
     x: pos.x - root.x,
     y: pos.y - root.y,
     opacity: dojo.style(img, "opacity"),
     zIndex: dojo.style(img, "zIndex")
    };
   });

   return { images: images };
  });

  return print;
 }

And it works well enough for me. Surely you'll need to customize this code a good bit but right-clicking and doing a save-as is not going to work if you have tiled imagery and it's not going to pick up any markers. The only sensible solution I am aware of is something like MapFish Print or another server-side printing solution where the user can download a PDF of the map.

Re: Export Map

CoreyAlix — Tue, 31 Jul 2012 14:37:54 GMT

Related question - can the PrintingTools geoprocessing service be copied/downgraded from 10.1 to 10? Technical/legal restrictions?

Re: Export Map

VenkatChakaravarthy — Wed, 01 Aug 2012 23:27:01 GMT

Use the print widget or the print task. Here's a simple sample showing how to use the print dijit.

Thank you Derek. I will try this and get back to you with questions.

Re: Export Map

VenkatChakaravarthy — Wed, 01 Aug 2012 23:29:10 GMT

Thank you Corey. I will try this and get back to you with questions.

Re: Export Map

VenkatChakaravarthy — Wed, 01 Aug 2012 23:29:52 GMT

Thank you Mostafa. I will try this and get back to you with questions.

Re: Export Map

VenkatChakaravarthy — Wed, 01 Aug 2012 23:30:26 GMT

Thank you Rahul. I will try this and get back to you with questions.

Re: Export Map

VenkatChakaravarthy — Sat, 11 Aug 2012 13:12:30 GMT

Hi,

I have attached a geosearch sample map generated with javascript api.
Any reason why the point is away from the actual address?

Thank you.