0

Tweaked the viewstate link GUI

Moved it to the bottom of the screen, as it was in the way of the
existing controls on the top-right.  Added it as a map conrol instead of
a simple div.  Improved the styling a bit
This commit is contained in:
Andrew Chin
2010-12-11 23:15:02 -05:00
parent 33a03213c4
commit e70bafb453
3 changed files with 28 additions and 3 deletions

View File

@@ -17,6 +17,17 @@ function prepareSignMarker(marker, item) {
function drawMapControls() {
// viewstate link
var viewStateDiv = document.createElement('DIV');
//<div id="link" style="border:1px solid black;background-color:white;color:black;position:absolute;top:5px;right:5px"></div>
viewStateDiv.id="link";
map.controls[google.maps.ControlPosition.BOTTOM_RIGHT].push(viewStateDiv);
// compass rose, in the top right corner
var compassDiv = document.createElement('DIV');
@@ -222,7 +233,7 @@ function initMarkers() {
function makeLink() {
var a=location.href.substring(0,location.href.lastIndexOf("/")+1)
var a=location.href.substring(0,location.href.lastIndexOf(location.search))
+ "?lat=" + map.getCenter().lat().toFixed(6)
+ "&lng=" + map.getCenter().lng().toFixed(6)
+ "&zoom=" + map.getZoom();
@@ -287,7 +298,7 @@ function initialize() {
initRegions();
drawMapControls();
makeLink();
//makeLink();
// Make the link again whenever the map changes
google.maps.event.addListener(map, 'zoom_changed', function() {

View File

@@ -14,6 +14,5 @@
</head>
<body onload="initialize()">
<div id="mcmap" style="width:100%; height:100%"></div>
<div id="link" style="border:1px solid black;background-color:white;color:black;position:absolute;top:5px;right:5px"></div>
</body>
</html>

View File

@@ -40,3 +40,18 @@ body { height: 100%; margin: 0px; padding: 0px ; background-color: #000; }
display: none;
}
#link {
background-color: #fff; /* fallback */
background-color: rgba(255,255,255,0.55);
border: 1px solid rgb(0, 0, 0);
font-size: 9pt;
padding-left: 2px;
padding-right: 2px;
margin-bottom: 1px;
}
#link:hover {
background-color: #fff; /* fallback */
background-color: rgba(255,255,255,0.8);
}