About this workshop

Who is this workshop for?

Installing MS4W

Getting started with MS4W

MapServer for Windows (MS4W) will install the base files required by GeoMoose along with an Apache service to actually serve GeoMoose. Once installed, navigate to localhost for more detail Also, full description of optional packages in the installer are found on ms4w.com.


Install MS4W

Double click the ms4w-3.2.7-setup.exe icon.

Ensure the checkbox for GeoMoose 3.2.0 is checked.

ms4w setup screen 1

Select “C:\”

The MapServer for Windows installer will prompt for a path. GeoMoose is set up and expects to run from the default path (C:\ms4w\apps\gm3\htdocs\), so please leave it set to C:\. This will also make all future updates and enhancements to the application simpler.

ms4w setup screen 2

Keep it real, Keep it Port 80

Lastly, MapServer for Windows will ask to specify the Apache port. There is no reason to change this unless port 80 is already in use. Also, if you install another web service in the future that uses port 80, you may want to reconfigure it to run a different port.

ms4w setup screen 3

Open MS4W!

You can validate the ms4w installation by navigating to localhost, where you will be greeted by the MS4W MapServer introduction and features.

working ms4w

Find the GeoMoose listing

GeoMoose will now show up on the MS4W localhost page under applications

geomoose listing

Click a link to launch the Desktop or Mobile version of GeoMoose.

Look at that!

geomoose desktop

Time to play

Learning the insides of GeoMoose

GeoMoose vocabulary

Visual of GeoMoose app structure

GeoMoose Application Structure

Darker shading indicates the degree of affect for files during a GeoMoose 3 upgrade.

What does the app look like?

GeoMoose Application Directory

Starting a fresh GeoMoose Application

Adding a MapServer source

What is MapServer?

Batteries are included with Firestations

The firestations.map file

firestations.map can be found installed on C:\ms4w\apps\gm3-demo-data\demo\firestations\firestations.map.

Mapfile “preamble”

    # Include commonly re-used GeoMoose parameters
    INCLUDE '../../geomoose_globals.map'

    # The web section defines more metadata for the map
    # that can be used with OGC services.
            'ows_title' 'County Firestations'
            INCLUDE '../../common_metadata.map'

firestations.map - Layer definition

        NAME 'fire_stations'
        STATUS ON
            'ows_title' 'Fire Stations'
            'ows_include_items' 'all'
            'gml_include_items' 'all'
            'ows_exclude_items' 'SHAPE_area,SHAPE_len'
            'gml_exclude_items' 'SHAPE_area,SHAPE_len'
        TYPE POINT
        DATA 'firestations'
            NAME 'Fire Stations'
                COLOR 254 0 0
                SYMBOL 'star'
                SIZE 8
        TOLERANCE 10
        TEMPLATE 'dummy'
    END # End of Layer

firestations.map - End of the map!

END # End of Map

Add Firestations to the catalog

Firestations in the catalog

Adding identify to Firestations

    <map-source name="firestations" type="mapserver">
        <layer name="fire_stations">
            <template name="identify"><![CDATA[
            <div class="result-item">
                <div class="result-title">
                <b>Station City:</b> {{ properties.Dak_GIS__4 }}<br>
                <b>Station Number:</b> {{ properties.Dak_GIS__5 }}<br>

More information on templates

    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [0, 0]
    "properties": {
        "label": "Null Island",
        "partyScope": 555

How does identify work?

  1. It’s included in the index.html file:
     <script type="text/javascript" src="../geomoose/dist/services/identify.js"></script>
  2. Then registered in the app.js file:
     app.registerService('identify', IdentifyService);
  3. And finally, put on the toolbar in the mapbook.xml file.
     <tool name="identify" title="Identify" type="service"/>

Learning more about identify and services

Adding select

<map-source name="firestations-wfs" type="mapserver-wfs">
    <param name="typename" value="ms:fire_stations" />
    <layer name="fire_stations" selectable="true" title="Firestations">
        <template name="select"><![CDATA[
        <div class="result-item">
            <div class="result-title">
            <b>Station City:</b> {{ properties.Dak_GIS__4 }}<br>
            <b>Station Number:</b> {{ properties.Dak_GIS__5 }}<br>

Tweak the raster Firestations layer


<layer name="fire_stations">


<layer name="fire_stations" query-as="firestations-wfs/fire_stations">

Reload and select Firestations

Selecting firestations

More on vector layers

Customizing the GeoMoose application

Configuring GeoMoose components

Configure Coordinate Display

GeoMoose is very HTML, such CSS.

Let’s tweak the toolbar!

.toolbar .tool.findme .label {
    display: none;

Now add the cite.css file to our HTML

Change line 9 of `index.html from:

<!--link rel="stylesheet" type="text/css" href="site.css"/-->


<link rel="stylesheet" type="text/css" href="site.css"/>

And change the icon!

/* Remove the webfont icon */
.toolbar .tool.findme .icon:before {
    content: '';

/* Add the moose! */
.toolbar .tool.findme .icon {
    width: 1em;
    height: 1em;
    box-sizing: border-box;
    background-image: url(./logo-mini.png);

Put a sweet gradient on the header

#header {
    background: linear-gradient(to right, lightgreen, grey);

Adding a GeoJSON file

Getting a GeoJSON file

GeoJSON files are stored statically! No MapServer is involved in the serving or rendering of a GeoJSON file with GeoMoose.

A great example is the cities.geojson file. It can be downloaded from here and placed in the the workshop/ directory.

Add the new map-source

In mapbook.xml after line 5 add:

<map-source name="cities" type="geojson">
    <layer name="all-cities">
            "circle-radius" : 5,
            "circle-color": "blue",
            "text-font": ["Arial", "Open Sans Regular"],
            "text-field": "{city}",
            "text-jusitfy": "right",
            "text-anchor": "right"

Add cities to the catalog

Important notes on GeoJSON layers

  1. They cannot yet be used for querying.
  2. They are styled using a subset of MapBox GL Styles.

    The package used by GeoMoose to translate the MapBox GL styles to OpenLayers styles is actively being updated and GeoMoose will follow its progress.

Thank you and happy Moose-ing!