Introduction

OSCAR-js was built based on the idea of map themes. Map themes consist of a coordinate system, layers, default and max covers and optional services like selection and extraction. Through the oscar.Control.OXFConfigManager you can load a configuration file to define what themes are available in the application. There is support for two types of configuration files, XML and JSON.

Sample Configuration File

<?xml version="1.0" encoding="UTF-8"?>
<configuration version="2.0">
    <themes>
        <theme bgColor="#fff" numzoomlevels="16">
            <name>World Theme</name>
            <srs>EPSG:4326</srs>
            <covers>
                <cover type="MAX" maxX="" maxY="" minX="" minY=""/>
                <cover type="DEFAULT" maxX="" maxY="" minX="" minY=""/>
            </covers>
            <layers>
                <layer>
                    <name>CARIS World Map</name>
                    <urls>
                        <url>http://sfs.caris.com/spatialfusionserver/services/ows/wms/world</url>
                        <url>http://server.caris.com/spatialfusionserver/services/ows/wms/fredericton_world</url>
                    </urls>
                    <format>image/png</format>
                    <layerType>WMS</layerType>
                    <dataLayers>
                        <dataLayer>
                            <layerName>World</layerName>
                        </dataLayer>
                        <dataLayer>
                            <layerName>Ocean</layerName>
                        </dataLayer>
                    </dataLayers>
                    <parameter name="buffer" value="2"/>
                </layer>
                <layer>
                    <name>CARIS World Map</name>
                    <urls>
                        <url>http://sfs.caris.com/spatialfusionserver/services/ows/wms/fredericton_world</url>
                        <url>http://server.caris.com/spatialfusionserver/services/ows/wms/fredericton_world</url>
                    </urls>
                    <format>image/png</format>
                    <layerType>WMS</layerType>
                    <dataLayers>
                        <dataLayer>
                            <layerName>Land</layerName>
                        </dataLayer>
                        <dataLayer>
                            <layerName>Buildings</layerName>
                        </dataLayer>
                    </dataLayers>
                    <parameter name="buffer" value="2"/>
                </layer>                
            </layers>
            <services>
                <service type="extraction">
                    <serviceEntry type="WFS" version="1.1.0" format="application/json">
                        <url>http://sfs.caris.com/spatialfusionserver/services/ows/wfs/fredericton</url>
                        <identifiers>
                            <identifier>cs:Buildings</identifier>
                            <identifier>cs:Roads</identifier>
                        </identifiers>
                    </serviceEntry>                   
                </service>
                <service type="selection">
                    <serviceEntry type="WFS" version="1.1.0" format="application/json">
                        <url>http://sfs.caris.com/spatialfusionserver/services/ows/wfs/fredericton</url>
                        <identifiers>
                            <identifier>cs:Buildings</identifier>
                            <identifier>cs:Roads</identifier>
                        </identifiers>
                    </serviceEntry>                   
                </service>
            </services>
        </theme>
    </themes>
</configuration>

Configuring a WMS Layer

To configure a theme to use a Web Mapping Service (WMS) layer you need to add the <layer> element to your theme.

Layer element children

The Layer element has a number of child elements:

  • name
  • urls
  • format
  • layerType
  • dataLayers
  • parameter
<layer>
    <name>CARIS World Map</name>
    <urls>
        <url>http://sfs.caris.com/spatialfusionserver/services/ows/wms/world</url>
        <url>http://server.caris.com/spatialfusionserver/services/ows/wms/fredericton_world</url>
    </urls>
    <format>image/png</format>
    <layerType>WMS</layerType>
    <dataLayers>
        <dataLayer>
            <layerName>World</layerName>
        </dataLayer>
        <dataLayer>
            <layerName>Ocean</layerName>
        </dataLayer>
    </dataLayers>
    <parameter name="buffer" value="2"/>
</layer>

The name element contains the name of the layer as it will could appear in the LayerToggle control.

The urls element contains 1+ url elements. If you have mulitple urls that point to a WMS it is best to use them. When adding a url they should be wrapped in a CDATA section for safety. <![CDATA[ {your url here} ]]>

The format element sets the type of image format to use.

The layerType element tells OSCAR-js what type of layer this is. In this case WMS.

The dataLayers element contains 1+ dataLayer elements. This allows mupltiple service layers provided by a WMS to be included.


Configuring a WMTS Layer

The following is a configuration of Web Mapping Tile Service layer

<layer>
    <name>Natural Earth</name>
    <urls>
        <url>
            <![CDATA[http://sfs.caris.com/spatialfusionserver/services/ows/wmts/NaturalEarth]]>
        </url>
    </urls>
    <format>img/png</format>
    <layerType>WMTS</layerType>
    <tileMatrixSet>GlobalCRS84Scale</tileMatrixSet>
    <dataLayers>
        <dataLayer>
            <layerName>newworld</layerName>
        </dataLayer>
    </dataLayers>    
</layer>

Blue Pill or the Red Pill

There are two values that can be used for the tileMatrixSet which are:

  • GlobalCRS84Scale - This is when your base map is using the EPSG:4326 projection.
  • GoogleMapsCompatible - Use this when you are using the EPSG:900913 or EPSG:3857 projections.

Configuring a Marker Layer

A Marker or Points of Interest (POI) layer is a vector based layer showing things of interest to a user. OSCAR-js supported a few different formats for marker layers such as:

  • KML
  • GeoRss
  • Flickr
  • Picasa
<layer>
   <name>Geocaching Photos</name>
    <urls>
        <url><![CDATA[http://picasaweb.google.com/data/feed/base/user/111471511314041030548/albumid/5634581834365441249?alt=rss&kind=photo&authkey=Gv1sRgCISt77D_p_LZJA&hl=en_US]]></url>
    </urls>
    <layerType>MARKER</layerType>
    <parameter name="formatType" value="Picasa"/>
    <parameter name="srs" value="EPSG:4326"/>
</layer>                 

Flickr, Picasa ... Are they not GeoRSS?

In truth, yes they are all georss feeds. So why do we specify them as different formats? This is because we want to do different things with them. For instance with a simple GeoRSS feed we would display an icon on the map. With Flickr and Picasa we will actually display a thumbnail of the image and a thumbnail of a YouTube video when it's a YouTube format.

Displaying your YouTube videos

With your YouTube account you can geotag your videos.

Configuring an OpenStreetMap layer

Configuring a Google Layer

Configuring a Service

Currently OSCAR-js supports two types of services in a theme, Selection and Extraction.

The Selection service supports GetFeature requests to a Web Feature Service (WFS).

To set up a service for a theme, add a <services> element inside the <theme> element.

<service type="selection">
    <serviceEntry type="WFS" version="1.1.0" format="application/json">
        <url>http://sfs.caris.com/spatialfusionserver/services/ows/wfs/fredericton</url>
        <identifiers>
            <identifier>cs:Buildings</identifier>
            <identifier>cs:Roads</identifier>
        </identifiers>
    </serviceEntry>                   
</service>

The Extraction service allows for downloading of data from a Web Feature Service (WFS) or a Web Coverage Service (WCS)

To set up an extraction for a theme, add a <services> element inside the <theme> element, or a <service> element to an existing <services> element.

<service type="extraction">
    <serviceEntry type="WFS" version="1.1.0" format="application/json">
        <url>http://sfs.caris.com/spatialfusionserver/services/ows/wfs/fredericton</url>
        <identifiers>
            <identifier>cs:Buildings</identifier>
            <identifier>cs:Roads</identifier>
        </identifiers>
    </serviceEntry>                   
</service>