Géocarte

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>

data-wet-boew

Global and configuration file

Configuration class

Configuration class example:

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

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

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.

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

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

<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

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

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>"
	},
	...