Solved

Google Maps API v3 with custom tiles and opacity slider

Posted on 2013-12-26
4
2,139 Views
Last Modified: 2014-01-01
A while back I put together a Google Maps mashup using version 2 of the api.  Now for some reason the opacity slider is not displaying and I can't figure out why....
http://www.geology.ar.gov/geology/geology_map.htm

I decided to update this map to version 3 of the Google Maps api.  I can get the custom tiles on the map with this function...
 var maptiler = new google.maps.ImageMapType({
	getTileUrl: function(coord, zoom) { 
		var proj = map.getProjection();
		var tileSize = 256 / Math.pow(2,zoom);
		var tileBounds = new google.maps.LatLngBounds(
            proj.fromPointToLatLng(new google.maps.Point(coord.x*tileSize, (coord.y+1)*tileSize)),
			proj.fromPointToLatLng(new google.maps.Point((coord.x+1)*tileSize, coord.y*tileSize))
        );
        //if (mapBounds.intersects(tileBounds) && (zoom >= mapMinZoom) && (zoom <= mapMaxZoom))
			// return "http://www.maptiler.org/example-usgs-drg-grand-canyon-gtiff/" +
			return "datatiles/COGEO/" + zoom + "/x" + coord.x + "_y" + coord.y + ".png" ;
        //else
            //return "http://www.maptiler.org/img/none.png";
	},
	tileSize: new google.maps.Size(256, 256),
	isPng: true
	//opacity: .5
});

map.overlayMapTypes.insertAt(0, maptiler);

Open in new window


I can set the opacity initially with this - maptiler.setOpacity(.5) - but it won't work dynamically with the opacity slider.

I'm using the example at....
http://www.gavinharriss.com/code/opacity-control

When I attempt to use Gavin Harriss' CustomTileOverlay I cannot get it to load my tiles.  My tiles are not all 256 x 256 px - could that be the problem?

Here is my test url....
http://www.geology.ar.gov/geology/geology_map_v3.htm

Thanks!
0
Comment
Question by:Nate_LR
  • 2
  • 2
4 Comments
 
LVL 3

Expert Comment

by:CvD
ID: 39740873
0
 

Accepted Solution

by:
Nate_LR earned 0 total points
ID: 39742513
Here is the solution....

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

 <style type="text/css"> 
			        html, body { overflow: hidden; padding: 0; height: 100%; width: 100%; font-family: 'Lucida Grande',Geneva,Arial,Verdana,sans-serif; }
			        body { margin: 10px; background: #fff; }
			        
			        #map { height: 95%; border: 1px solid #888; }
			    </style>
                
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="../js/ExtDraggableObject.js"></script>

<script type="text/javascript">
			    //<![CDATA[

			    /*
			     * Constants for given map
			     * 
			     */

				var mapBounds = new google.maps.LatLngBounds (new google.maps.LatLng(32.810613,-94.734029), new google.maps.LatLng(36.627145,-89.526053));
			    var mapMinZoom = 7;
			    var mapMaxZoom = 15;

			    var opacity = 0.75;
			    var map;			    
			    				
				var customtiles =[];
			 
			    /*
			     * Full-screen Window Resize
			     */

			    function getWindowHeight() {
			        if (self.innerHeight) return self.innerHeight;
			        if (document.documentElement && document.documentElement.clientHeight)
			            return document.documentElement.clientHeight;
			        if (document.body) return document.body.clientHeight;
			        return 0;
			    }


			    function getWindowWidth() {
			        if (self.innerWidth) return self.innerWidth;
			        if (document.documentElement && document.documentElement.clientWidth)
			            return document.documentElement.clientWidth;
			        if (document.body) return document.body.clientWidth;
			        return 0;
			    }


			    function resize() { 
				 
			        var map = document.getElementById("map");  
			         
			        map.style.height = (getWindowHeight()-80) + "px";
			        map.style.width = (getWindowWidth()-20) + "px";			       
			        
			    } 



				/**
			     * Main load function
			     */
			    function load() {
					 
					map = new google.maps.Map(document.getElementById("map") ,{
						zoom : mapMinZoom,
						center: mapBounds.getCenter(),
						zoomControl: true,
						panControl: true,
						rotateControl: true,
						scaleControl: true,
						scrollwheel: true,
						mapTypeControl: true,
						streetViewControl: true,
						mapTypeControlOptions: {
							mapTypeIds: [google.maps.MapTypeId.TERRAIN, google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.HYBRID],
							style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
						},
						mapTypeId: google.maps.MapTypeId.TERRAIN

					});
					
					

					//the same times with array customtiles
					map.overlayMapTypes.push(null);
					
					
					
					/** 
					* create custom type tile
					*/
 
					customtiles[0] =  CustomMapType({
						name		: 'AGS Geology',
						alt			: 'Geologic Map Custom Tile',
						tileSize	: 256,
						BaseUrl		: "http://www.geology.ar.gov/geology/",
						minZoom		: 7,
						maxZoom		: 15
					});
					
					
					 
					setTiles(opacity);
					
					
					
					var filterDiv = document.createElement('DIV');
					var mControl = new FilterControl(filterDiv, map);
					filterDiv.index = 1;
					filterDiv.style.cssText="position:absolute;right:7px;";
					map.controls[google.maps.ControlPosition.RIGHT_TOP].push(filterDiv);
	
				  					  
					resize();
					   
				}//end load()
				
				
				/** 
				* change tile type
				*/
				function setTiles(_opacity){	
				
					for(var i in customtiles){
						map.overlayMapTypes.setAt(i, customtiles[i]);
						customtiles[i].setOpacity(_opacity);
					}					
					
				} 
				
				
								
				/** 
				* change tile opacity
				*/
				function changeMapTileOpacity(_opacity){
					for(var i in customtiles){
						customtiles[i].setOpacity(_opacity);
					}
				}
				
				 
				/** 
				* custom type tile function
				*/
				function CustomMapType(args){
					var opts = { 
						  getTileUrl: function(coord, zoom) { 
							if ((zoom < mapMinZoom) || (zoom > mapMaxZoom)) {
			                  return args.BaseUrl + "datatiles/none.png";
							} 
							var ymax = 1 << zoom;
							var zFactor=Math.pow(2,zoom);
							var y = ymax - coord.y -1;
							
							var tileBounds = new google.maps.LatLngBounds(								
								map.getProjection().fromPointToLatLng( new google.maps.Point( (coord.x)*args.tileSize/zFactor, (coord.y+1)*args.tileSize/zFactor ) ),
								map.getProjection().fromPointToLatLng( new google.maps.Point( (coord.x+1)*args.tileSize/zFactor, (coord.y)*args.tileSize/zFactor ) )
							 );
				
							if (mapBounds.intersects(tileBounds)){
								return args.BaseUrl + "datatiles/COGEO/" + zoom + "/x" + coord.x + "_y" + coord.y + ".png" ;
							}else{
								return args.BaseUrl + "datatiles/none.png";
							}
						},
						tileSize: new google.maps.Size(args.tileSize, args.tileSize),
						isPng: true,
						maxZoom:  args.maxZoom,
						minZoom:  args.minZoom
					};
					var map_type = new google.maps.ImageMapType(opts);
					map_type.name = args.name;
					map_type.alt = args.alt;
				 
					return map_type;		
				}
				
				
				/** 
				* tile Opacity slider control
				*/
				function FilterControl(controlDiv, map) {
					controlDiv.style.padding = '4px';
					var controlUI = document.createElement('DIV');
					controlUI.id = "zoomContainer";
					controlUI.style.cssText="position:absolute;right:7px;width: 70px; height: 21px; z-index: 0; top: 10px;";
					
					
					var controlzoom = document.createElement('DIV');
					controlzoom.id = "zoom";
					controlzoom.style.cssText="height: 21px; width: 13px; background-image: url(http://www.geology.ar.gov/images/opacity-slider.png); left: 22px; top: 0px; position: absolute; cursor: pointer; background-position: -70px 0px;";
					
					var controlzoomSlider = document.createElement('DIV');
					controlzoomSlider.id = "zoomSlider";
					controlzoomSlider.style.cssText="height:21px; width:70px; background-image: url(http://www.geology.ar.gov/images/opacity-slider.png)";	
					
					controlzoomSlider.appendChild(controlzoom);
					controlUI.appendChild(controlzoomSlider);
					controlDiv.appendChild(controlUI);
					
					var zoomSlider = new ExtDraggableObject(controlzoom, { restrictY:true, container:controlzoomSlider});
					zoomSlider.setValueX(opacity*57);
					
					var dragEndEvent = google.maps.event.addListener(zoomSlider, "dragend", function(e) {
					  var val = zoomSlider.valueX();
					  changeMapTileOpacity(val/57);
					});
					
				}
			    </script>
                
</head>



<body onload="load()">
			      
			      
	<div id="map"></div>
    
</body>

</html>

Open in new window

0
 
LVL 3

Expert Comment

by:CvD
ID: 39742577
Fine with me
0
 

Author Closing Comment

by:Nate_LR
ID: 39749625
I found the solution on my own.
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now