Language selection

Search


URL Mapping - Geomap

Execute pre-configured geomap filtering based on url query string.

Legend

Points
Table of point geometries
Rank Census subdivision Population 2011
1 Toronto 2,615,060
2 Montreal 1,649,519
3 Calgary 1,096,833
4 Ottawa 883,391
5 Edmonton 812,201
6 Mississauga 713,443
7 Winnipeg 663,617
8 Vancouver 603,502
9 Brampton 523,911
10 Hamilton 519,949

Source code

HTML
<ul>
	<li><a href="?aoi=bc">Area of interest: British Columbia <code>?aoi=bc</code></a></li>
	<li><a href="?aoi=ab">Area of interest: Alberta <code>?aoi=ab</code></a></li>
	<li><a href="?aoi=qc">Area of interest: Québec <code>?aoi=qc</code></a></li>
	<li><a href="?aoi=canada">Area of interest: Canada <code>?aoi=canada</code></a></li>
	<li><a href-"?layout=kml">Layout: KML <code>?layout=kml</code></a></li>
	<li><a href-"?layout=topo">Layout: TopoJSON (World 110m) <code>?layout=topo</code></a></li>
	<li><a href-"?layout=all">All layout <code>?layout=all</code></a></li>
	<li><a href-"?layout=pt">Layout: Point <code>?layout=pt</code></a></li>
	<li><a href="?layout=kml&aoi=bc">Combination - Layout: KML ; Area of interest: British Columbia <code>?layout=kml&aoi=bc</code></a></li>
	<li><a href="?aoi=qc&layout=pt">Combination - Layout: Point ; Area of interest: Québec <code>?aoi=qc&layout=pt</code></a></li>
	<li><a href="?aoi=bc&layout=all">Combination - All layout ; Area of interest: British Columbia <code>?aoi=bc&layout=all</code></a></li>
	<li><a href="?">Empty <code>?</code></a></li>
</ul>

<!-- +++ Note: +++
	* The dimension bellow are approximative for this demo purpose only
	* The optional configuration ```multiplequery``` is set in order to do a combination of query parameter
-->
<div data-wb-urlmapping='{
	"multiplequery": true,
	"aoi=canada": { "action": "mapfilter", "source": "#sample_map_filter", "filter": "aoi", "value": "64.097 -10.63 34.692 -177.659" },
	"aoi=bc": { "action": "mapfilter", "source": "#sample_map_filter", "filter": "aoi", "value": "60 -120 48 -139" },
	"aoi=ab": { "action": "mapfilter", "source": "#sample_map_filter", "filter": "aoi", "value": "60 -110 49 -120" },
	"aoi=qc": { "action": "mapfilter", "source": "#sample_map_filter", "filter": "aoi", "value": "POLYGON((-78.30545265676142 62.84207638792185,-79.79959328176142 51.57292655739278,-79.18435890676142 46.810536399556135,-76.45974953176142 45.655468008018055,-75.58084328176142 45.961790800827984,-74.87771828176142 45.47086564114406,-74.96560890676142 44.97562684884711,-71.44998390676142 44.97562684884711,-69.16482765676142 47.349194267123444,-68.19803078176142 47.349194267123444,-64.33084328176142 48.35181916125691,-55.80545265676142 52.00783331541157,-67.31912453176142 52.16984334247954,-64.24295265676142 60.85236662687351,-78.30545265676142 62.84207638792185))" },
	"layout=pt": { "action": "mapfilter", "source": "#sample_map_filter", "filter": "layer", "value": "Points" },
	"layout=kml": { "action": "mapfilter", "source": "#sample_map_filter", "filter": "layer", "value": "KML" },
	"layout=topo": { "action": "mapfilter", "source": "#sample_map_filter", "filter": "layer", "value": "TopoJSON (World 110m)" },
	"layout=all": { "action": "mapfilter", "source": "#sample_map_filter", "filter": "layer", "value": "" }
}'></div>

<div id="sample_map_filter"
	class="wb-geomap position scaleline geocoder geolocation"
	data-wb-geomap='{ [...] }'>

	[...]

</div>

Page details

Date modified: