Geomap

Configuration using data-wb-geomap attribute on plugin element

Use the data-wb-geomap attribute to configure the display of map features from inline HTML tables or from a local/remote datasource.

Configuration using a configuration file

An optional configuration file can be used to specify alternative basemaps and external feature overlays. The configuration file is referenced in the data-wet-beow attribute of the plugin element by setting the layersFile property to the file path.

Example configuration file reference

<div id="mygeomap" class="wb-geomap" data-wb-geomap='{ "layersFile": "data/config-en.min.js" }'> ... </div>

Configuration using CSS classes

Configure which features and widgets you want added to your map by using CSS classes.

<input type="hidden" id="geomap-aoi-extent-1" value="553816,1951915,2188045,3573694">
<input type="hidden" id="geomap-aoi-extent-lonlat-1" value="-73, 65, -39, 76">

var $document = wb.doc, mapSample;

$document.on( "wb-ready.wb-geomap", "#sample_map", function( event, map ) {

	// Get the sample_map to use in zoomFeature function
	mapSample = map;
	var $aoiExtent = $( "#geomap-aoi-extent-" + mapSample.id ),
		$aoiExtentLonLat = $( "#geomap-aoi-extent-lonlat-" + mapSample.id );

	if ( $aoiExtent ) {

		$aoiExtent.on( "change", function() {
			console.log( "BBox: " + $( this ).val() );
		} );

		$aoiExtentLonLat.on( "change", function() {
			console.log( "BBox LonLat: " + $( this ).val() );
		} );
	}
} );

<div id="mygeomap" class="wb-geomap" data-wb-geomap='{ ... "aoi": { "toggle": false } ... }'> ... </div>

<div id="mygeomap" class="wb-geomap" data-wb-geomap='{ ... "aoi": { "toggle": false, , "extent": "-57, 46, -51, 50" } ... }'> ... </div>

Configuration class example:

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

Basemap configuration example

basemap : {
	title: 'CBMT',
	type: 'wms',
	url: 'https://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
	}
}

Adding features from an HTML table in the page

Geomap can create features from HTML markup in the page.

Steps:

1. Add a unique id to each table (e.g. "myTable") and ensure that each table row (i.e. tr) element has the required attributes. See below for configuration.
2. Add the unique id created in step 1 to a tables array in the data-wb-geomap attribute of the plugin element.

   <div id="mygeomap" class="wb-geomap" data-wb-geomap='{ "tables": [ { "id": "myTable", "style": { ... } } ] }'> ... </div>

Inline HTML table configuration

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.

<tr data-geometry="POINT (-114.05879 1.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>

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

<table id="cities" 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>
</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".

Adding features from external datasources via a configuration file

Steps:

1. Create a Javascript configuration file and save it to a web accessible directory (e.g. "data/config-en.min.js").
2. Add an overlays array to the wet_boew_geomap variable in the configuration file.

   // Configuration file ("data/config-en.min.js")
   var wet_boew_geomap = {
   	overlays : [
   		{
   			title: 'KML Demo EN',
   			caption: 'This is a sample KML file loaded locally by Geomap.',
   			type: 'kml',
   			url: 'data/sample.kml',
   			visible: true
   		},
   		{ ... }
   	]
   };

3. Reference the configuration file in the data-wb-geomap attribute of the plugin element by setting the layersFile property to the file path.

   <div id="mygeomap" class="wb-geomap" data-wb-geomap='{ "layersFile": "data/config-en.min.js" }'> ... </div>

Feature overlay configuration options

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

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

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

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' }
		}
	]
}

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

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

WMS Legend

Geomap supports both graphic and HTML legends. WMS overlay legends can be configured in the options property of the layer configuration.

...
options: {
	...
	legendGraphicUrl: "https://geo.weather.gc.ca/geomet/?Lang=E&LAYERS=GDPS.ETA_PR&VERSION=1.1.1&FORMAT=image%2Fpng&SERVICE=WMS&REQUEST=GetLegendGraphic&STYLE=PRECIPMM"
	...
}
...

...
options: {
	...
	legendHTML: "GeoMet Precipitation (mm)" +
		"<ul class='list-unstyled'>" +
		"<li><span style='background-color:#800000;display:inline-block;height:20px;width:20px'/> <small>100.0</small></li>" +
		"<li><span style='background-color:#FF0000;display:inline-block;height:20px;width:20px'/> <small>50.0</small></li>" +
		"<li><span style='background-color:#FFA500;display:inline-block;height:20px;width:20px'/> <small>20.0</small></li>" +
		"<li><span style='background-color:#E5E500;display:inline-block;height:20px;width:20px'/> <small>10.0</small></li>" +
		"</ul>"
	...
}
...

Pre v4.0.5

// return an array of OpenLayers maps in the page
wb.doc.on( "geomap.ready", function( event, maps ) {
	var myMap = maps.mygeomap; // return map with specfic id
	// do something
});

Note that the id (e.g. "mygeomap") of the div that contains the instance of Geomap you are accessing is used as the key in the maps array.

For example if you want Geomap to zoom the map (e.g. "mygeomap") to the extent of a specified layer (e.g. "#bbox") once the document is loaded simply add the following to your markup:

<script>
	wb.doc.on( "geomap.ready", function( event, maps ) {
		var myMap = maps.mygeomap;
		myMap.zoomToExtent( myMap.getLayer( "#bbox" ).getDataExtent(), true );
	});
</script>

v4.0.5+

// get the map object with id "mygeomap"
$document.on( "wb-ready.wb-geomap", "#mygeomap", function( event, map ) {
	var myMap = map; // return OpenLayers map object
	// do something
});

Note the id (e.g. "mygeomap") of the div that contains the instance of Geomap you are accessing.

For example if you want Geomap to zoom the map (e.g. "mygeomap") to the extent of a specified layer (e.g. "#bbox") once the document is loaded simply add the following to your markup:

<script>
	$document.on( "wb-ready.wb-geomap", "#mygeomap", function( event, map ) {
		// Get the map to use in zoomFeature function
		var myMap = map;
		myMap.zoomToExtent( myMap.getLayer( "#bbox" ).getDataExtent(), true );
	});
</script>

v4.0.31+

// get the map object with id "mygeomap"
$document.on( "wb-ready.wb-geomap", "#mygeomap", function( event, map ) {
	var myMap = map; // return OpenLayers map object
	// do something
});

Note the id (e.g. "mygeomap") of the div that contains the instance of Geomap you are accessing.

For example if you want Geomap to zoom the map (e.g. "mygeomap") to the extent of a specified layer (e.g. "#bbox") once the document is loaded simply add the following to your markup:

<script>
$document.on( "wb-ready.wb-geomap", "#mygeomap", function( event, map ) {
	// Get the map to use in zoomFeature function
	var myMap = map;
	myMap.getView().setCenter( -75.70535, 45.3995 );

	// if reprojection is needed
	// myMap.getView().setCenter( ol.proj.transform( [ -75.70535, 45.3995 ], "EPSG:4326", "EPSG:3978" ) );

	myMap.getView().setZoom( 5 );
});
</script>