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

bMap - Examples

Working with layers

How its done:

As well as adding layers to the map, we can also remove them. As the layers are stored internally as an array, there are push & pop functions to remove from the start and finish. You can also remove a layer by its index, or remove all layers at once.
When items are removed from the start of the array or from within the array, the other items are NOT moved around. Their index remains unchanged, this is because it was found that the handle on the google API object was lost, and caused errors.
The removeLayer function expects an integer of the index you want to remove, the other functions accept no variables.

<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(){
		$('#map').data('bMap').insertMarkers({"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({"data":[{"lat":51.49757618329838,"lng":-0.1746654510498047},{"lat":51.47769451182406,"lng":-0.0009441375732421875}]});
	}		
	function button3(){
		$('#map').data('bMap').insertPolygon({"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"> //the layer buttons follow
		<input value="Add Markers" type="button" onclick="button1()"><input value="Add Polyline" type="button" onclick="button2()"><input value="Add Polygon" type="button" onclick="button3()"><br>
		<input type="button" onclick="$('#map').data('bMap').shiftLayer()" value="Remove first layer">
		<input type="button" onclick="$('#map').data('bMap').popLayer()" value="Remove last layer">
		<input type="button" onclick="$('#map').data('bMap').removeLayer(parseInt(prompt('Layer number.... (number only)','1')))" value="Remove layer X">
		<input type="button" onclick="$('#map').data('bMap').removeAllLayers()" value="Remove ALL layers">
	</div>
</div>