test.html

---
{
	"title": "Geomap",
	"language": "en",
	"category": "Plugins",
	"description": "Displays a dynamic map over which information from additional sources can be overlaid.",
	"tag": "geomap",
	"parentdir": "geomap",
	"altLangPrefix": "geomap",
	"js": ["demo/client_functions"],
	"dateModified": "2016-04-22"
}
---
<div id="sample_map_filter" class="wb-geomap" data-wb-geomap='{
    "basemap" : {
        "title": "OSM Map",
        "type": "osm",
        "mapOptions": {
            "center": [ -122, 52 ],
            "zoomLevel": 6
        }
    },
	"overlays": [
		{
			"title": "Projects",
			"caption": "This data is extracted from the <a href=\"http://geogratis.gc.ca/api/en/nrcan-rncan/ess-sst/457ede2f-fd65-5936-ab60-3fe71da0e98b\">Principal mineral areas of Canada</a> publication.",
			"type": "kml",
			"url": "demo/projects.kml",
			"visible": true,
			"datatable": true,
			"tooltips": true,
			"tooltipText": "Operation",
			"popups": true,
			"attributes": {
				"Program": "Program",
                "Client": "Client",
                "Amount": "Amount",
                "Project": "Project"
			},
			"style": {
				"type": "unique",
				"field": "Program",
				"init": {
					"Tourism Relief Fund": {
						"externalGraphic": "https://img.icons8.com/small/2x/pin.png",
						"graphicOpacity": "0.5",
						"graphicWidth": "32",
						"graphicHeight": "32"
					},
					"Aerospace Recovery Initiative": {
						"externalGraphic": "https://img.icons8.com/small/2x/pin3.png",
						"graphicOpacity": "0.5",
						"graphicWidth": "32",
                        "graphicHeight": "32"
					}
				},
				"select": {
                    "externalGraphic": "https://img.icons8.com/small/2x/pin3.png",
                    "graphicOpacity": "1",
                    "graphicWidth": "32",
                    "graphicHeight": "32"
				}
			}
		}
	]
}'>
	<div class="row">
		<div class="col-md-9">
			<!-- Insert Map Start (mandatory) -->
			<div class="wb-geomap-map"></div>
			<!-- Insert Map End -->
		</div>
		<!-- Insert legend Data Start (mandatory) -->
		<div class="col-md-3">
			<div class="wb-geomap-legend"></div>
		</div>
		<!-- Insert legend Data End -->
	</div>
	<div class="wb-geomap-layers"></div>
</div>