Select to view content in your preferred language

Printing Map Elements

3260
9
06-03-2010 12:02 PM
BradOleson
New Contributor
I have a requirement to print more than just the map and title, as the Flex Viewer does in the sample.  Basically I need to add a lot of elements - declination diagram (from an image), scale, frame, disclaimer, legend and (ideally) the MGRS grid.  I have a feeling the grid will need to be in the map itself, rather than a layout grid (such as would be produced in ArcMap).  But I think the other elements are realistic as part of the print output.

My question is: what are some good sites that have examples of this?  Code samples any of you could share?  I know this is a pretty complex print request, but its part of what the client wants to have for their online site for some of their maps.

Thanks in advance!

Brad
Tags (2)
0 Kudos
9 Replies
KenBuja
MVP Esteemed Contributor
Hi Brad,

Although this isn't in the Flex Viewer framework, here's my app where the user can print out a map that contains a legend, text, imagery, etc. This was using the AlivePDF library. Also, take a look at this for a tool to add MGRS grid to your map

Here's the code I'm using to create it. The last two references are the pop up windows that contain data or images.

        public static function printPDF(mainMap:Map, overviewMap:Map, legendTitle:String, popData:DataPopup, popAbout:AboutWindow):void
        {
            CursorManager.setBusyCursor();
            
            var date:Date = new Date();
            var legendImage:Class;
            var legendLength:Number;
            var h:Number = mainMap.measuredHeight;
            var w:Number = mainMap.measuredWidth;
            var ovH:Number = overviewMap.measuredHeight;
            var ovW:Number = overviewMap.measuredWidth;
            var fullWidth:Number = w + ovW + 126;
            var fullHeight:Number = h + 144;
            var legendY:Number = ovH + 132;
            var minHeight:Number = ovH + 42 + 72; // overview map + header to legend + logos
            var scaleArray:Array = [110000,64000,32000,16000,8000,4000,2000];
            
//            if (h1 < 650) {h1 = 650;}
            mainMap.zoomSliderVisible = false;
            
            try
            {
                if (legendTitle != null)
                {
                    switch (legendTitle)
                    {
                        case "Boundaries":
                            legendImage = popData.legendBoundary;
                            legendLength = 16;
                            break;
                        case "Structure":
                            legendImage = popData.legendStructure;
                            legendLength = 279;
                            break;
                        case "Biological Cover":
                            legendImage = popData.legendCover;
                            legendLength = 244;
                            break;
                        case "Coral Cover":
                            legendImage = popData.legendDensity;
                            legendLength = 68;
                            break;
                        case "Zone":
                            legendImage = popData.legendZone;
                            legendLength = 172;
                            break;
                    }
                    minHeight = minHeight + legendLength + 7;
                }
                if (popData.chkDive.selected) {minHeight = minHeight + 103 + 7;}
                if (popData.chkROV.selected) {minHeight = minHeight + 13 + 7;}
                if (popData.chkMPA.selected) {minHeight = minHeight + 33 + 7;}
                if (popData.chkModImagery.selected) {minHeight = minHeight + 53 + 7;}
                if (minHeight > h) {fullHeight = fullHeight + minHeight - h;}
                    
                var myPDF:PDF = new PDF(Orientation.LANDSCAPE, Unit.POINT, new Size([fullHeight,fullWidth],"dynamicSize",[(fullHeight)/96,(fullWidth)/96],[(fullHeight)*3.779527559,(fullWidth)*3.779527559]));
                myPDF.setDisplayMode(Display.FULL_PAGE, Layout.SINGLE_PAGE);
                myPDF.addPage();
                
                myPDF.addImage(mainMap, 54, ((fullHeight - 108 - h) / 2) + 72 , 0, 0, ImageFormat.PNG);
                myPDF.lineStyle(new RGBColor(0x000000),1);
                myPDF.drawRect(new Rectangle(54, ((fullHeight - 108 - h) / 2) + 72, w - 2, h - 2));  // map border
                myPDF.lineStyle(new RGBColor(0x00529E),1);
                myPDF.drawRect(new Rectangle(36,36,fullWidth - 72, fullHeight - 72)); // page border
                myPDF.beginFill(new RGBColor(0x00529E));
                myPDF.drawRect(new Rectangle(36,36,fullWidth - 72,36)); // header box
//                myPDF.drawPolygone([36,36, w + fullwidth - 64,36, w + fullwidth - 64,72, 36,72, 36,36]); // header box
                myPDF.endFill();
                myPDF.setFont(FontFamily.ARIAL,Style.BOLD,22);
                myPDF.textStyle(new RGBColor(0xFFFFFF));
                myPDF.addText("U.S. Virgin Islands (St. John): Shallow-water Benthic Habitats",((fullWidth - 72) / 2) - 320,63);
    //            myPDF.setFont(FontFamily.ARIAL,Style.NORMAL,7);
    //            myPDF.textStyle(new RGBColor(0x000000));
    //            myPDF.addText("http://ccma.nos.noaa.gov/ecosystems/coralreef/benthic_usvi.html",13.275,10.2425);
                myPDF.addImage(overviewMap, w + 72, 90 ,0 , 0);
                myPDF.lineStyle(new RGBColor(0x000000),1);
//                myPDF.drawRect(new Rectangle(w + 72, 90,ovW - 2,ovH - 2));  // overview map border
                
                myPDF.textStyle(new RGBColor(0x000000));
                if (legendTitle != null)
                {
                    myPDF.setFont(FontFamily.ARIAL,Style.BOLD,18);
                    myPDF.addText(legendTitle, w + 72, ovH + 120);
                    myPDF.addImageStream(new legendImage as ByteArray, w + 74, legendY);
                    legendY = legendY + legendLength + 7;
                }
                
                if (popData.chkDive.selected)
                {
                    myPDF.addImageStream(new popData.legendDives as ByteArray, w + 74, legendY);
                    legendY = legendY + 103 + 7;
                }

                if (popData.chkROV.selected)
                {
                    myPDF.addImageStream(new popData.legendROV as ByteArray, w + 74, legendY);
                    legendY = legendY + 13 + 7;
                }
                            
                if (popData.chkMPA.selected)
                {
                    myPDF.addImageStream(new popData.legendMPA as ByteArray, w + 74, legendY);
                    legendY = legendY + 36 + 7
                }
                
                if (popData.chkModImagery.selected)
                {
                    if (popData.radBackscatter.selected) {myPDF.addImageStream(new popData.legendBackscatter as ByteArray, w + 74, legendY);}
                    if (popData.radBathymetry.selected) {myPDF.addImageStream(new popData.legendBathy as ByteArray, w + 74, legendY);}
                    if (popData.radSlope.selected) {myPDF.addImageStream(new popData.legendSlope as ByteArray, w + 74, legendY);}
                }
                
//                myPDF.setFont(FontFamily.ARIAL,Style.NORMAL, 14);
//                myPDF.addText("Minimum Mapping Unit",w + 110, fullHeight - 145);
//                myPDF.addText("(0.25 acre, 0.1012 ha)",w + 110, fullHeight - 131);
                
                myPDF.addImageStream(new popAbout.NOAAClass as ByteArray, w + 70, fullHeight - 108, 30, 28);
                myPDF.addImageStream(new popAbout.NPSClass as ByteArray, w + 70 + 198, fullHeight - 110, 23, 29);
                myPDF.setFont(FontFamily.ARIAL,Style.NORMAL, 7);
                myPDF.addText("Data prepared by the National Ocean Service,", w + 54 + 57, fullHeight - 98);
                myPDF.addText("Biogeography Branch, in cooperation with", w + 54 + 64, fullHeight - 90);
                myPDF.addText("the National Park Service. 2009", w + 54 + 77, fullHeight - 82);
                
                myPDF.setFont(FontFamily.ARIAL,Style.BOLD, 7);
                myPDF.addText("http://ccma.nos.noaa.gov/ecosystems/coralreef/benthic_usvi.html", w + 72, fullHeight - 56);
//                myPDF.addLink(w + 80, fullHeight - 56, 20, 5, "http://ccma.nos.noaa.gov/ecosystems/coralreef/benthic_usvi.html");
                
                myPDF.save(Method.REMOTE,"http://ccma.nos.noaa.gov/gv_stjohn/create.php", Download.INLINE);
            }
            catch (e:Error)
            {
                Alert.show(e.message)
            }
            
            mainMap.zoomSliderVisible = true;
            
            CursorManager.removeBusyCursor();
        }
0 Kudos
BradOleson
New Contributor
Hey Ken -

Thanks for the info.  I'm checking it out now. 

I like the MGRS reference you sent me!  I may try to use that in what I'm doing.  Issue is it has to be usable as a tool for actual map measurement on printed maps (guys will print something at 1:25k or 1:50K and use the map protractors in the field on it), so I will have to work on getting it to work in UTM projection, but its a great start!

Thanks again...

Brad
0 Kudos
BradOleson
New Contributor
Adding on to this: when I print, I want the printed page to be a specific scale so that a map protractor can be used when taking the printed page to the field.  I know I can set the map scale in Flex, but how do I ensure the printed product matches the scale.  Its easy in ArcMap, but seems less straight forward here in Flex.  Thoughts?
0 Kudos
RobertScheitlin__GISP
MVP Emeritus
Brad,

   Don't take any of what I am about to say personal.

One of the biggest problems that people have with web mapping is understanding what it really is.

Lets start with what it is NOT:

Web mapping is not a web version of ArcMap and was never intended to be.

Web mapping is not suppose to be some big complicated app that allows clients to do just about anything

Web Mapping is:

Web Mapping is suppose to be simple user friendly applications to allow clients to view online data.

Web Mapping (ESRI Web APIs) are free and there for are not going to have all the desired functionality of a ArcMap... It's FREE...

What you get when you pan around and zoom in etc. is an image. The map image has a embedded graphical scale that gets resized (and remains accurate) when the map IMAGE is resized. Adding a scale to the print layout would not compensate for changes that were made to the map image when placing it in the print layout.

A legend by far is going to be the hardest item in your wish list. There is little in the current API that would facilitate it's generation and even in ArcGIS 10 is will be much easier but still will require a lot of coding.
0 Kudos
BradOleson
New Contributor
Ha - I won't take it personal at all.  I'm just trying to keep the client satisfied.

They love the web mapping capabilities that allow others to view maps they normally had to print out.  Some of their previous mapping efforts went into ArcIMS, but its being migrated to Server now for obvious reasons.

The print issue is that once someone creates a map of an area (for this example we will use one with the MGRS available as a reference) they want to print that map out to take it into the field.  I'm not SO worried about legend, but scale on the paper is important, since they will want to possibly use one of the map protractors to complete exercises in the field.  The client is trying to get this to be the method for disseminating these maps, rather than have people constantly coming into the office of the GIS / Tech guy, who is usually swamped with other requests.

There are many things they want to do, I'm just trying to see which are possible.  Printing seems pretty basic, but has turned out to be one of the most challenging.

Thanks, Robert!  You're always helpful!

Brad
0 Kudos
DonCopple
Occasional Contributor III
There is one old school, basic way to get the scale on the map.  At least in the west is to add section lines, most square sections are 1 mile, 5280 feet, so if this is availible on a printed bap (as with a usgs basemap) then a scale can be figured out using a ruler and pencil.  You could also use the Draw widget, or Robert's eDraw widget (Which shows measurements), and just add that to the map before you print it as some sort of reference scale.  Not perfect, but it would take a lot of coding to add the elements to the print widget.  Just some ideas for you.
0 Kudos
TomSchuller
Occasional Contributor III
Hy,
may be this is a solution:
http://www.arcgis.com/home/item.html?id=6809086326ea4c76bf026a32bb9dd698

It's a ServerObjectExtension (SOE) with advanced print capabilities (legend, scalebar, scaletext, graphics, ...) with a Flex widget as client.

The communication between the SOE and the Flex widget is realized by the REST api.
So any else application can realize printout's.

Tom
0 Kudos
ShawnKraft
New Contributor III
Tom does this work with Flex 2.1?  I am using ArcGIS 10sp3 on my server.
0 Kudos
ShawnKraft
New Contributor III
Okay well, what version of flex does it work with?  Flex 2.5? Flex 3.0?
0 Kudos