Geomap

Overview

Project Lead: Joost van Ulden (@jvanulde)

Purpose

Displays a dynamic map over which information from additional sources can be overlaid.

Benefits

Displays dynamic maps on any Web page
Configurable layout
Displays overlays from a variety open machine-readable formats hosted locally or remotely:
- JSON/GeoJSON
- ATOM/GeoRSS
- KML
- Inline HTML table
Provides HTML table representation of overlay features and links them to the map
Supports WMS for base map
Conforms to WCAG 2.0 AA
Progressive enhancement approach
Uses WAI-ARIA to enhance accessibility
Supports Firefox, Opera, Safari, Chrome, and IE8+

Implementation

NOTE: If you are implementing the working example on your development environment you may need to add the necessary support for the mime-types required by the various formats demonstrated (e.g. ".kml" "application/vnd.google-earth.kml+xml") to your web server.

Add <div id="mygeomap" class="wet-boew-geomap"></div> to the Web page. Note that since version 3.1.1 each instance of Geomap requires an id that is unique to the page.
Specify a width for the widget (e.g., class="span-5 margin-bottom-none")
Add <div class="wet-boew-geomap-map"></div> to the div created in step 1 where you want the map to be rendered.
Add <div class="wet-boew-geomap-layers"></div> to the div created in step 1 where you want the layer(s) listing to be rendered.
If a legend is required add <div class="wet-boew-geomap-legend"></div> to the div created in step 1 where you want it to be rendered.
Configure the options either globally or on a page-by-page basis. Options are configured globally by adding var wet_boew_geomap = { ... options ...}; to settings.js. On a page-by-page approach a combination of applying configuration classes and/or using data_wet_boew_geomap='{"option1": value1, "option2": "value2", ...}' of the widget element can be used.
Overlays containing features to be added to the map can be configured by adding an array of overlay configurations (i.e. overlays: [...]) to var wet_boew_geomap = { ... options ...}; in settings.js or a layers file referenced in the data_wet_boew_geomap='{"layersFile": "data/config-en.js", ...}' widget element.

Global (settings.js) or file based (e.g. config-en.js) configuration example

var wet_boew_geomap = {
    basemap : {
        title: 'CBMT',
        type: 'wms',
	url: 'http://geogratis.gc.ca/maps/CBMT',
	layers: 'CBMT',
	format: 'image/png',
	version: '1.1.1'
    },
    overlays : [
        {
            title: 'KML Demo EN',
            caption: 'This is a sample KML file loaded locally by Geomap.',
	    type: 'kml',
	    url: 'data/sample.kml',
	    visible: true
        },
        {
            ...
        }
    ]
};

Page configuration example

Adding features from an inline HTML table

Note that specific element attributes must be present the row (i.e. <tr>) for Geomap to render the features. See below for configuration.

<div id="mygeomap" class="wet-boew-geomap" data-wet-boew='{ "tables": [ { "id": "myTable", "style": { ... } } ] }'>
    <div class="wet-boew-geomap-map"></div>
    <div class="wet-boew-geomap-legend"></div>
    <div class="wet-boew-geomap-layers"></div>
</div>

Adding features from local and remote data sources via a configuration file

<div id="mygeomap" class="wet-boew-geomap" data-wet-boew='{ "layersFile": "data/config-en.js" }'>
    <div class="wet-boew-geomap-map"></div>
    <div class="wet-boew-geomap-legend"></div>
    <div class="wet-boew-geomap-layers"></div>
</div>

Plugin configuration options

Note: all plugin configuration parameters are optional.

`data-wet-boew`

Parameter	Value	Description
`tables`	Array	An array if inline HTML table id's from which map features are to be loaded and their configurations.
`layersFile`	String	Path to local or remote JavaScript configuration file that lists feature layers that are to be added to the map.

Global and configuration file

Parameter	Value	Description
`basemap`	JavaScript Object	A base map configuration that includes map settings (e.g., maximum and default extents, units, projection, etc.) and connection specifics for a WMS base map service.
`overlays`	Array	A list of layers to be added to the map with associated configurations.

Configuration class

Class	Description
`position`	If present, the mouse position control will be shown in the lower right corner of the map.
`scaleline`	If present, the scale line control will be shown in the lower left corner of the map.
`static`	If present, the controls (pan, zoom, select, etc.) will not be added to the map. This is useful for scenarios where a simple map with one or more features is required to communicate some value or idea (e.g. an extent map for a data product).
`tab`	If present, a tab control will be added to the page where feature tables can be added. Note that an overlay configuration would need to specify that it is to be placed in a tab control.

Configuration class example:

<div id="mygeomap" class="wet-boew-geomap position scaleline"> ... </div>

Basemap configuration options

Note: Geomap does not require a base map configuration. A default base map will be provided if none is configured.

Parameter	Required	Value	Default	Description
`title`	Yes	String	''	The title of the base layer (not displayed)
`type`	Yes	String	''	The type of data source. Note that this must be 'wms'.
`url`	Yes	String	''	The url of the WMS service providing the base map. For example 'http://geogratis.gc.ca/maps/CBMT'.
`layers`	No	String	''	A comma delimited string of layer ids to be requested from the WMS service.
`format`	Yes	String	''	The mime-type of the format to be requested of the WMS service.
`version`	Yes	String	''	The version of the WMS service being requested.
`options`	No	Array	''	A comma delimitated array of OpenLayers options for WMS layer types.
`mapOptions`	No	Array	''	An array of OpenLayers map configuration options.

Basemap configuration example

basemap : {
    title: 'CBMT',
    type: 'wms',
    url: 'http://geogratis.gc.ca/maps/CBMT',
    layers: 'CBMT',
    format: 'image/png',
    version: '1.1.1',
    options: { singleTile: true, ratio: 1.0, projection: 'EPSG:3978', fractionalZoom: true },
    mapOptions: {
        maxExtent: '-3000000.0, -800000.0, 4000000.0, 3900000.0',
        maxResolution: 'auto',
        projection: 'EPSG:3978',
        restrictedExtent: '-3000000.0, -800000.0, 4000000.0, 3900000.0',
        units: 'm',
        displayProjection: 'EPSG:4269',
        numZoomLevels: 12
    }
}

Overlay configuration options

Parameter	Required	Value	Default	Description
`title`	Yes	String	''	The title of the overlay to be displayed in the legend, tabs (if configured) and/or the page.
`caption`	Yes	String	''	The description of the overlay to be displayed in the table caption of the page.
`datatable`	No	Boolean	''	If true the feature table will be enhanced using the Tables plugin which provides sorting, paging and searching functions.
`type`	Yes	String	''	The type of datasource for the overlay. Must be one of: atom, kml, json, geojson, georss.
`url`	Yes	String	''	The url of the data source. For example 'http://geogratis.gc.ca/api/en/nrcan-rncan/ess-sst'.
`params`	No	Array	''	An array of parameters to send to the datasource/service. For example: `params: { 'alt': 'json', 'q': 'alluvial' }`. These will be added to the request URI.
`visible`	No	Boolean	`false`	Controls the visibility of the overlay. Note that without a legend the visibility of an overlay can't be changed.
`root`	No	Boolean	''	Name of the root element that contains the array of objects that contain the features to be rendered.
`style`	No	Array	''	An OpenLayers style object. Unique and rule based styles are supported. Note that Geomap will assign a default style if none is provided. However, the default color combination may not have the contrast required to meet WCAG guidelines. Therefore, a style should be configured before going into production.
`tab`	Yes	Boolean	''	If true, the feature table will be rendered in a tab control.
`attributes`	No	Array	''	An array of feature attributes to be displayed in the table with their aliases. For example: `attributes: { location_desc: 'Location', longitude: 'Latitude', latitude: 'Longitude', updated_at: 'Last updated' }`.
`zoom`	No	Boolean	''	If true a "Zoom to feature" button will be added to each row in the feature table.
`popups`	No	Boolean	''	If true popups for features will be enabled. Note that the "`popupsInfo`" parameter allows for customization of the popup and its content.
`popupsInfo`	No	String	''	Allows for customization of popup content. Has several configuration options: "`height`" in pixels, "`width`" in pixels, "`close`" which if set to `true` will result in a close button being rendered, and "content" which can contain any HTML markup desired.

Overylay configuration example

{
    title: 'Traffic Cameras',
    caption: 'Traffic cameras in the city of Ottawa.',
    type: 'geojson',
    url: 'http://stephenott.cartodb.com/api/v2/sql',
    params: {
        'format': 'GeoJSON',
	'q': 'SELECT * FROM traffic_cameras LIMIT 25'
    },
    attributes: {
        location_desc: 'Location',
	longitude: 'Latitude',
	latitude: 'Longitude',
	updated_at: 'Last updated'
    },
    visible: true,
    zoom:  true,
    datatable: true,
    tab: true,
    style: { ... }
}

Inline HTML table configuration

Geomap can create features from HTML markup in the page. Geomap requires a data-geometry attribute with feature geometry encoded in Well Known Text (WKT) or as a bounding box extent with lower left and upper right coordinate pairs, and a data-type attribute that specifies the encoding as either wkt or bbox.

WKT examples

<tr data-geometry="POINT (-114.05879, 51.04668)" data-type="wkt"> ... </tr>

<tr data-geometry="LINESTRING (30 10, 10 30, 40 40)" data-type="wkt"> ... </tr>

<tr data-geometry="POLYGON ((30 10, 10 20, 20 40, 40 40, 30 10))" data-type="wkt"> ... </tr>

Other geometry types are supported. See [http://en.wikipedia.org/wiki/Well-known_text Well-Known-Text] for more examples.

Bbox example

<tr data-geometry="-136, 61, -118, 70" data-type="bbox"> ... </tr>

Inline HTML table configuration example

<table id="cities" class="table-simplify width-100" aria-label="Cities">
    <caption>Major cities in Canada.</caption>
    <thead>
        <tr>
            <th>Rank</th>
            <th>Census subdivision</th>
            <th>Population 2011</th>
        </tr>
    </thead>
    <tbody>
        <tr data-geometry="POINT (-79.3847, 43.6476)" data-type="wkt">
            <td>1</td>
            <td class="select">
                <a href="../Toronto" title="Toronto">Toronto</a>
            </td>
            <td>2615060</td>
        </tr>
        <tr data-geometry="POINT (-73.56123, 45.52927)" data-type="wkt">
            <td>2</td>
            <td class="select">
                <a href="../Montreal" title="Montreal">Montreal</a>
            </td>
            <td>1649519</td>
        </tr>
        ...
    </tbody>
    <tfoot>
        ...
    </tfoot>
</table>

Note that attribute names for features rendered from an inline HTML table are taken from the table header. In the preceding example the table header would result in attributes named "Rank", "Census subdivision", and "Population 2011".

Style configuration options

Basic style example - all features using the same style

style: {
    'strokeColor': '#ff0000',
    'fillColor': '#ff0000',
    'fillOpacity': '0.4'
}

Style example with override for selected feature

style: {
    type: 'symbol',
    init: { 'pointRadius': '15', 'externalGraphic': '../icon.png' },
    select: { 'pointRadius': '15', 'externalGraphic': '../icon_selected.png' }
}

Rule based example - features are styled according to specified rules

style: {
    type: 'rule',
    rule: [
        {
            field: 'Population2011',
            value: [ 1000000 ],
            filter: 'LESS_THAN',
            init: { strokeColor: '#0083f5', fillColor: '#57a8f0', pointRadius: '6' }
        },
        {
            field: 'Population2011',
            value: [ 1000000, 2000000 ],
            filter: 'BETWEEN',
            init: { strokeColor: '#F90', fillColor: '#F90', pointRadius: '8' }
        },
        {
            field: 'Population2011',
            value: [ 2000000 ],
            filter: 'GREATER_THAN',
            init: { strokeColor: '#F00', fillColor: '#F00', pointRadius: '10' }
         }
    ]
}

Unique style example - features have unique style based on an attribute

style: {
    type: 'unique',
    field: 'Location',
    init: {
        // using the value from the 'Location' attribute, create a unique style for each feature
        'Bayshore & Richmond': { 'fillColor': '#000099' },
        'Baseline & Greenbank': { 'fillColor': '#009900'}
    },
    // specify a style for selected features (optional). Note here we are adding a label when
    // a feature is selected.
    select: {'fillColor': '#990000', 'label': '${Location}' }
}

Popup Configuration Options

To add popup with no customization simply add "popups": true. By default popups contain the same information as that is displayed in the corresponding table row for the feature.

If you need more control over your popups, you can customize them by passing a configuration through the "popupsInfo" parameter. The "popupsInfo" "content" parameter can contain any HTML markup you desire. Where feature attributes are required to be rendered simply add the attribute name with an underscore at the beginning. For example, if you have a feature attribute named "Census subdivision" you would reference it in your popup content as "_Census subdivision".

The following example shows all available configuration options:

...
"popups": true,
"popupsInfo": {
    "id": "citiesPopup",
    "height": 200,
    "width": 300,
    "close": true,
    "content": "<h4>_Census subdivision</h4><p>_Population 2011</p>"
},
...

Advanced Configuration

Geomap provides developers with a hook to access the OpenLayers Map object. This can be useful if you have specific functionality that Geomap does not support out of the box. Geomap fires an event when it has loaded called 'geomap-ready' that you can attach a listener to as follows:

pe.document.on('geomap-ready', function() {
    // do something
});

Once Geomap has loaded, the OpenLayers Map object can be requested using the getMap function as follows:

var myMap = pe.fn.geomap.getMap('mygeomap');

Note that the id of the div that contains the instance of Geomap you are accessing must be passed into the getMap function.

For example if you want Geomap to zoom to the extent of a specified layer once the document is loaded simply add the following to your markup:

<script>
    pe.document.on('geomap-ready', function() {
        var myMap = pe.fn.geomap.getMap('mygeomap');
        var myExtent = myMap.getLayer('table#bbox').getExtent();
        myMap.zoomToExtent(myExtent, true);
    });
</script>

Examples

Migrating from 3.1.0

Starting with version 3.1.1 multiple Geomap instances are supported in a page. As a result a minor markup update is required:

In 3.1.0 (DEPRECATED)

<div class="wet-boew-geomap" data-wet-boew='{ ... }'></div>

Starting with version 3.1.2

All Geomap components are nested in a div with the wet-boew-geomap class which must include an id.

<div id="mygeomap" class="wet-boew-geomap" data-wet-boew='{ ... }'>
    <div class="wet-boew-geomap-map"></div>
    <div class="wet-boew-geomap-legend"></div>
    <div class="wet-boew-geomap-layers"></div>
</div>

Development

Geomap is dependent upon OpenLayers (Clear BSD License) and Proj4js (LGPL license).

The code Geomap is located in several places within the source folder of WET:

js/workers/geomap.js - contains the JavaScript code for Geomap
js/sass/includes/_geomap.scss - contains the CSS for Geomap
js/images/geomap/ - contains the images for Geomap
js/dependencies/openlayers.js - OpenLayers script file
js/dependencies/proj4js.js - proj4js script file

Known Issues

There are no known technical issues at this point in time. If you find one, please contribute by filing an issue.

Header bar

Search