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.

Requirements:

Install MS4W

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

MapServer for Windows does come with an older version of GeoMoose, but it is recommended to skip that and install the latest and greatest version for the full Moose experience.

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

Installing GeoMoose

Install the GeoMoose Demo Data

Extract the gm3-demo-data-3.0.0-ms4w.zip to the C:\ directory. This will unzip mapfiles and shapefiles used to power the GeoMoose examples.

geomoose extract zip

Install the GeoMoose SDK and examples

Extract the gm3-examples-3.0.0-ms4w.zip to the C:\ directory. Everything in it is already set to install where needed within the ms4w subdirectories including Apache, Apps, and httpd.d.

geomoose extract zip

Restart Apache

Once extracted, restart the Apache MS4W Service.

restart windows apache service

Back to the browser

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”

MAP
    # 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.
    WEB
        METADATA
            'ows_title' 'County Firestations'
            INCLUDE '../../common_metadata.map'
        END
    END

firestations.map - Layer definition

    LAYER
        NAME 'fire_stations'
        STATUS ON
        METADATA
            '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'
        END
        TYPE POINT
        DATA 'firestations'
        PROJECTION
            'init=epsg:26915'
        END
        CLASS
            NAME 'Fire Stations'
            STYLE
                COLOR 254 0 0
                SYMBOL 'star'
                SIZE 8
            END
        END
        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">
        <file>./demo/firestations/firestations.map</file>
        <layer name="fire_stations">
            <template name="identify"><![CDATA[
            <div class="result-item">
                <div class="result-title">
                Firestation
                </div>
                <b>Station City:</b> {{ properties.Dak_GIS__4 }}<br>
                <b>Station Number:</b> {{ properties.Dak_GIS__5 }}<br>
            </div>
            ]]></template>
        </layer>
    </map-source>

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">
    <file>./demo/firestations/firestations.map</file>
    <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">
            Firestation
            </div>
            <b>Station City:</b> {{ properties.Dak_GIS__4 }}<br>
            <b>Station Number:</b> {{ properties.Dak_GIS__5 }}<br>
        <div>
        ]]></template>
    </layer>
</map-source>

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;
}

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">
    <url>./cities.geojson</url>
    <layer name="all-cities">
        <style><![CDATA[
        {
            "circle-radius" : 5,
            "circle-color": "blue",
            "text-font": ["Arial", "Open Sans Regular"],
            "text-field": "{city}",
            "text-jusitfy": "right",
            "text-anchor": "right"
        }
        ]]></style>
    </layer>
</map-source>

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!