Introduction to the OpenGeo Suite

Publishing map widgets

In this section, we’ll use GeoExplorer’s Export Map tool to publish our composed layout as a custom map application that can be embedded on a web page.

Export Map tool

Button Name Description
../_images/gx_icon_exportmap.png Export Map Initiates the workflow to export your current map layout to a custom web-map widget.

Export Your Saved Map

Exporting your map to a web page is a quick process. However, first we need a web page to export our map to. Thankfully, there is a template HTML file in our <workshop>\html directory.

The unadorned template looks a little like this:

../_images/gx_publish_preview.png

Without a map, it’s just a bunch of gibberish

Now let’s have a quick look at the code.

  1. Open the GNN.html file in your text editor.

    ../_images/gx_publish_unedited.png

    The HTML page we’ll be editing

  2. Now back to publishing our map. Continuing the previous exercise, you should be logged in to GeoExplorer. Open the map layout you saved previously.

  3. Click the Export Map button to trigger the publishing process.

    ../_images/gx_export_toolbar.png
  4. The Export Map dialog opens, presenting a list of tools that can be added to the toolbar in your exported map. By default, all of the tool options are enabled.

    ../_images/gx_dialog_export01.png

    Selecting map tools

  5. Adjust the selection of tools if desired.

  6. Once you’ve selected the tools to include your published map’s toolbar, click the Next button to proceed.

  7. This screen provides you with a code snippet to embed your map application into a web-page template. Copy the code in the <iframe>...</iframe> block to your clipboard.

    ../_images/gx_dialog_export02.png

    Published map code snippet

  8. Return to your text editor and scroll down to around line 32. Replace the comment shown below with GeoExplorer’s HTML block.

    <!--Insert your exported HTML code from GeoExplorer here!-->
    
  9. Your HTML file should now look something like this:

    ../_images/gx_publish_edited.png
  10. Save your HTML file, and return to your browser.

  11. Refresh the page.

    ../_images/gx_publish_gnnmap.png

    A happy web page

  12. Congratulations, you have published your first map!

How’s the map performance? A little slow? In an upcoming section, we’ll look at how to accelerate map delivery using GeoWebCache.

Other publishing options

We have a few other options when publishing our maps.

Preview

At any time we can click the Preview button to get a glimpse of what our published map application will look like.

  1. Click the Preview button.

  2. A preview of our mapping application pops-up in a new panel.

  3. Close the preview pop-up.

    ../_images/gx_publish_previewpanel.png

Dimensions

In the second step, we have controls to specify the dimensions of our map.

  1. The Map Size drop-down lists several common map height/width pairs.

  2. Alternately, you can enter values in the Height and Width fields directly. Change these values to 750 and 650, respectively.

    Note

    Make sure to tab or click out of the Width field when you’re done, otherwise the change won’t take effect.

  3. Changing these values updates the code in the <iframe> block with the new map size.

    ../_images/gx_publish_resize.png

Bonus

Change any of the map options. Use the Back and Next buttons to move between the toolbar and dimension option screens.

Republish these changes into your HTML page, and confirm your changes.



Continue Reading

Previous: Saving map layouts

Next: Printing static maps

This Page

About Boundless

Boundless provides commercial open source software for internet mapping and geospatial application development. We are dedicated to the growth and support of open source software.

License

This work is licensed under a Creative Non Commercial-Commons Attribution-Share Alike 3.0 United States License. Feel free to use this material, but we ask that you please retain the Boundless branding, logos and style.

Creative Commons License