-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
12 lines (12 loc) · 6.17 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title></title>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script> var map; var mapBounds = new google.maps.LatLngBounds( new google.maps.LatLng(40.440235437105123,-79.947656066602860), new google.maps.LatLng(40.444960303533918,-79.937366192369353)); var mapMinZoom =15; var mapMaxZoom =21; function createOverlay(percent){ var pix4tiler = 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 zoom + "/" + coord.x + "/" + (Math.pow(2,zoom)-coord.y-1) + ".png"; else return "http://none.png"; }, tileSize: new google.maps.Size(256, 256), isPng: true, opacity: parseFloat(percent)/100.0 }); return pix4tiler; } function label(controlDiv) { controlDiv.style.padding = '5px'; var controlUI = document.createElement('DIV'); controlUI.style.backgroundColor = 'white'; controlUI.style.borderStyle = 'solid'; controlUI.style.borderWidth = '2px'; controlUI.style.cursor = 'pointer'; controlUI.style.textAlign = 'center'; controlUI.title = 'Orthomosaic opacity:'; controlDiv.appendChild(controlUI); var controlText = document.createElement('DIV'); controlText.style.fontFamily = 'Arial,sans-serif'; controlText.style.fontSize = '12px'; controlText.style.paddingLeft = '4px'; controlText.style.paddingRight = '4px'; controlText.innerHTML = 'Orthomosaic opacity:'; controlUI.appendChild(controlText); } function HomeControl(controlDiv, map, percent) { controlDiv.style.padding = '5px'; var controlUI = document.createElement('DIV'); controlUI.style.backgroundColor = 'white'; controlUI.style.borderStyle = 'solid'; controlUI.style.borderWidth = '2px'; controlUI.style.cursor = 'pointer'; controlUI.style.textAlign = 'center'; controlUI.title = 'opacity of the orthomosaic'; controlDiv.appendChild(controlUI); var controlText = document.createElement('DIV'); controlText.style.fontFamily = 'Arial,sans-serif'; controlText.style.fontSize = '12px'; controlText.style.paddingLeft = '4px'; controlText.style.paddingRight = '4px'; controlText.innerHTML = percent; controlUI.appendChild(controlText); google.maps.event.addDomListener(controlUI, 'click', function() { map.overlayMapTypes.clear(); var pix4tiler = createOverlay(percent); map.overlayMapTypes.insertAt(0, pix4tiler); }); } function initialize() { var myOptions = { minZoom: 15, maxZoom: 21, mapTypeId: google.maps.MapTypeId.ROADMAP, streetViewControl:false }; map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); map.fitBounds(mapBounds); var pix4tiler = createOverlay('100'); map.overlayMapTypes.insertAt(0, pix4tiler); var homeControlDiv = document.createElement('DIV'); var homeControl1 = new HomeControl(homeControlDiv, map,'100%'); var homeControlDiv2 = document.createElement('DIV'); var homeControl2 = new HomeControl(homeControlDiv2, map,'60%'); var homeControlDiv3 = document.createElement('DIV'); var homeControl3 = new HomeControl(homeControlDiv3, map,'30%'); var homeControlDiv4 = document.createElement('DIV'); var homeControl4 = new HomeControl(homeControlDiv4, map,'0%'); var homeControlDiv5 = document.createElement('DIV'); var homeControl5 = new label(homeControlDiv5); homeControlDiv.index = 1; map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv); map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv2); map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv3); map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv4); map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv5); }
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>