Composer tutorial

This tutorial will show the basic uses of Suite Composer. In this tutorial you will:

The final step, styling the map, is covered in the separate Web map styling with YSLD.

Data used

While any data can be substituted when following along with this tutorial, the following data will specifically be shown, all from the Natural Earth dataset:

Also download the following file, originally taken from the Natural Earth III extra data:

Creating a new project workspace

The first step in making a map with Composer is to create a project workspace. The project workspace will contain all of the data, layers, and the map, separating them from the rest of the resources in Composer.

  1. First, log in to Composer with your administrator credentials.

    Note

    The default GeoServer administrator credentials are admin / geoserver.

    ../../../_images/composerblank.png

    Fresh installation

  2. Click the New link and select New Project Workspace.

    ../../../_images/npwlink.png

    Link to create a new project workspace

  3. Enter the details of the project workspace:

    • Project Name: tutorial
    • Default?: <checked>

    When finished, click Create.

    ../../../_images/npwpage.png

    Details for the new project workspace

  4. You will see a dialog saying Workspace tutorial created and then you will be taken to the Maps tab of the project workspace.

    ../../../_images/projectworkspace.png

    Project workspace created

Adding data and publishing layers

With the project workspace created, we’re now ready to load data.

  1. Click the Add Data link at the top right of the page.

    ../../../_images/adddatalink.png

    Add Data link

  2. A dialog will appear for importing data to GeoServer. Either click Browse and select each of the files, or drag each of the files onto this dialog.

    ../../../_images/importfile.png

    Adding a shapefile archive to be uploaded

  3. Click Upload to upload the files to GeoServer.

    ../../../_images/uploadedfile.png

    Shapefile uploaded

  4. After the upload is complete click Next: Load to review file contents. Select all of the resources and click Import Selected Layers.

    ../../../_images/availablelayers.png

    Available Layers

  5. Imported layers can be added to an existing map or used to create a new map. Click Close.

    ../../../_images/layerimported.png

    Layer Imported

  6. When finished with uploads, click Close to close out of the import wizard. You will see the two data sources listed on the Data tab: A directory of shapefiles containing the three shapefile resources, and a raster data source containing the DEM resource. Note specifically that for each data store, the resource is marked as Published.

    ../../../_images/datatab1.png

    Data stores after upload

  7. Click the Layers tab to see the published resources.

    ../../../_images/layerstab2.png

    Published layers

  8. Find the ne_10m_roads layer and click the Settings button. This will bring up the layer settings.

  9. Change the layer settings to the following:

    • Name: roads
    • Title: Roads
  10. When finished, click Update Layer Settings.

    ../../../_images/updatelayer.png

    Layer settings updated

  11. Click Close.

  12. Repeat the process of changing layer settings for the other three layers. Use the following information:

    • ne_10m_admin_0_countries
      • Name: countries
      • Title: Countries
    • ne_10m_populated_places
      • Name: places
      • Title: Populated places
    • dem_large
      • Name: dem
      • Title: DEM
    ../../../_images/updatednames.png

    All names changed

  13. View each of the layers by clicking the Style button for each layer.

    ../../../_images/layerstyles.png

    Layer Style

Adding layers to a map

Now that our layers are loaded into Composer, we will now compile them into a single map.

  1. Return to the tutorial project workspace.

  2. Click New Map.

  3. Fill out the form with the following settings:

    • Map Name: tutmap
    • Title: Tutorial Map
    • Projection: Lat/Lan (WGS)
    • Description: Composer / YSLD tutorial map
    ../../../_images/createmap.png

    Map settings

  4. Click Add Layers.

  5. Select the four layers by checking the box next to each one, and then click Create Map with Selected.

    ../../../_images/layerselect.png

    Selecting layers to add to a map

  6. The map will be created. Click the icon for the map to bring up the Style Editor.

  7. In the layer list in the middle of the screen, drag the layers so that they are listed in the following order:

    • places
    • roads
    • countries
    • dem

With the map created, the next step is to improve the styling. Please continue on at the YSLD tutorial to see how these layers can be styled.