nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Export Map

VenkatChakaravarthy

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.

Javascript_Map.jpg

Vind meer berichten getagd met

Accepted answers

All comments

VenkatChakaravarthy

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.

image002.jpg

VenkatChakaravarthy

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

VenkatChakaravarthy

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

VenkatChakaravarthy

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

VenkatChakaravarthy

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.

CoreyAlix

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

CoreyAlix

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.

MostafaFouly

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

RahulMetangale1

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

derekswingley1

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

VenkatChakaravarthy

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?

VenkatChakaravarthy

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.

CoreyAlix

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.

MostafaFouly

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.

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.