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

bMap - Examples

Adding an image overlay function

How its done:

In this example we have extended the bMap object with an image overlay function. The function accepts an image URL, and then the map co-ordinates to use as the image corners.

In addition to the code shown below, this page also highlights the corners with markers and a diagonal line. I have also told the bMap object to render BOTH a layer-sidebar and a marker-sidebar.

<style type="text/css">
<!--
	#map{ width:500px;height:500px;float:left }
	#sideBar{ width:200px;height:500px;text-align:center;background:#fff;float:right }
	#sideBar div{ padding:2px 0; cursor:pointer }
	#sideBar div:hover{ text-decoration:underline }
	#buttons{ clear:both;text-align:center }
	.bLyrHide{ color:#ddd; }
-->
</style>
<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=ABQIAAAAS7DCAwDYz7oaEBkQPbfW2hTRG8mhYN2jsXJYuRxDw9cnEROhfBT4qg31Bj0CT9piutugjWNPyfh8fg" type="text/javascript"></script>
<script type="text/javascript" src="jQuery.bMap.1.2.2.js"></script>
<script src="http://www.blocsoft.com/scrapbook/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
////////////////////////////////////////////////////////////////////////////////////////////
//	Lets extend the bMap object with an image layer function
//
bMap.prototype.insertImage = function(incomingImage){
	tmpThis = this;
	var newIndex = tmpThis.layerMgrArray.length;
	
	//function defaults
	var imageDefaults = {  
		name:   "Layer"+newIndex,
		type:   "image",
		visible:"true",
		url:"",			//url of an image (gif/jpg/png)
		SW:[],			//southwest corner [lat,lng]
		NE:[]			//northeast corner [lat,lng]
	};  
	//overide with options
	var incomingImage = $.extend(imageDefaults, incomingImage);
	tmpThis.layerMgrArray[newIndex]=incomingImage;
	//layerbar toggle
	tmpThis.layerMgrArray[newIndex].toggleLayer = function(){
			if( this.visible!="false" ){
				this.visible="false";
				this.data.hide();
				$('#bMapLyr'+newIndex).addClass('bLyrHide');
				return false;
			}else{
				this.visible="true";
				this.data.show();			
				$('#bMapLyr'+newIndex).removeClass('bLyrHide');
				return true;
			}
	}
	//google image stuff here (the image is placed by defining two corners)
	var boundaries = new GLatLngBounds(new GLatLng(incomingImage.SW[0],incomingImage.SW[1]), new GLatLng(incomingImage.NE[0],incomingImage.NE[1]));
	//store the object into the layer array
	tmpThis.layerMgrArray[newIndex].data = new GGroundOverlay(incomingImage.url, boundaries);
	//display on the map
	tmpThis.map.addOverlay(tmpThis.layerMgrArray[newIndex].data);	

	//layerbar stuff
	this.refreshLayerbar();
	return this;	
}
//  place this block of code into your own script file
/////////////////////////////////////////////////////////////////////////////////////

$(document).ready(function(){ 
	$("#map").bMap({
		mapZoom: 12,
		mapCenter:[51.501690392607,-0.1263427734375],
		mapLayerbar:"sideBar"
	});
	$("#map").data("bMap").insertImage({
		name:"Tube Map",
		url:"http://www.blocsoft.com/bmap/tube.png",
		SW:[51.406916,-0.494385],
		NE:[51.701502,0.262299]
	});
});
</script>