• bMap
• Examples
• Documentation
• Download
• Change Log
• Twitter
• Forum

bMap - Examples

Adding Markers, Lines and Polygons to the map

How its done:

Here we can see some fundamental bMap concepts. Firstly we can see the functions used to add content to the map, and the data structures they accept. The functions are called by accessing the bMap object that belongs to the map div.
$('#map_div_id').data('bMap').functions....
All the bMap functions are accessed this way, and the actual Google Maps API map object is here too.
We can also see the layer sidebar in use, and the CSS class used to highlight hidden layers.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://maps.google.com/maps?file=api&v=2&key=YOUR_GOOGLE_KEY" type="text/javascript"></script>
<script type="text/javascript" src="jQuery.bMap.1.2.3.js"></script>
<style type="text/css">
<!--
	#map{ width:500px;height:500px;float:left }
	#layerBar{ width:200px;height:500px;text-align:center;background:#fff;float:right }
	#layerBar div{ padding:2px 0; cursor:pointer }
	#layerBar div:hover{ text-decoration:underline }
	#buttons{ clear:both;text-align:center }
	.bLyrHide{ color:#ddd; } /* class for hidden layerBar layers */
-->
</style>
<script type="text/javascript">
	$(document).ready(function(){ 
		$("#map").bMap({
			mapZoom: 11,
			mapCenter:[51.501690392607,-0.1263427734375],
			mapLayerbar:"layerBar" //Tell bMap to use a sidebar
		});
	});
	function button1(){ //This function acts on the bMap object, adding the layer
		$('#map').data('bMap').insertMarkers({
			"name":"Markers",
			"data":[
				{
					"lat":51.49757618329838,
					"lng":-0.1746654510498047, 
					"title":"Science Museum", 
					"body":"Exhibition Road, London SW7"
				},{
					"lat":51.47769451182406,
					"lng":-0.0009441375732421875, 
					"title":"Royal Observatory Greenwich", 
					"body":"Blackheath Ave, Greenwich, London SE10"
				}	
			]
		});
	}
	function button2(){
		$('#map').data('bMap').insertLine({
			"name":"Line",
			"data":[
				{
					"lat":51.49757618329838,
					"lng":-0.1746654510498047
				},{
					"lat":51.47769451182406,
					"lng":-0.0009441375732421875
				}	
			]
		});		
	}		
	function button3(){
		$('#map').data('bMap').insertPolygon({
			"name":"Polygon",
			"color":"#F00",
			"data":[
				{  
					"lat":51.51921169524832,
					"lng":-0.19947052001953125
				},{
					"lat":51.52540664057756,
					"lng":0.01819610595703125
				},{
					"lat":51.46063853898322,
					"lng":0.0295257568359375
				},{
					"lat":51.45507659279715,
					"lng":-0.19191741943359375
				},{  
					"lat":51.51921169524832,
					"lng":-0.19947052001953125
				}				
			]
		});
	}
</script>
<div style="width:700px;height:500px;margin:0 auto">
	<div id="map"></div>
	<div id="layerBar"></div>
	<div id="buttons">
		<input value="Add Markers" type="button" onclick="button1()">
		<input value="Add Polyline" type="button" onclick="button2()">
		<input value="Add Polygon" type="button" onclick="button3()">
		<input type="button" onclick="$('#map').data('bMap').removeAllLayers()" value="Remove ALL layers"></input>
	</div>
</div>

bMap Function Options:

insertMarkers:
	name			string		visual name for the layer, appears in layerbar
	type			string		describes the type of layer
	visible			string		("true"/"false") if the layer should start visible
	data			array		array of bMap marker objects, rendered as GMarkers
	icon			integer		renders the marker with a custom icon from the icons array


insertLine:
	name			string		visual name for the layer, appears in layerbar
	type			string		describes the type of layer
	visible			string		("true"/"false") if the layer should start visible
	data			array		array of latlng used to construct line
	color			string		line color, HTML style strings
	weight			integer		the line thickness
	opacity			real		0.0 - 1.0 line opacity


insertPolygon:
	name			string		visual name for the layer, appears in layerbar
	type			string		describes the type of layer
	visible			string		("true"/"false") if the layer should start visible
	data			array		array of latlng used to construct polygon edges
	color			string		polygon color, HTML style strings
	weight			integer		the edge line thickness
	opacity			real		0.0 - 1.0 interior opacity