- Code: Select all
<!DOCTYPE html>
<html>
<head>
<title>Maps - Roanoke</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var currentSession = 0;
var salemserver = 'roa';
</script>
<script type="text/javascript" src="smap.js"></script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
And the smap.js file:
- Code: Select all
function myProjection() {
var MAP_RANGE = 51200;
this.worldOrigin_ = new google.maps.Point(0, 0);
this.pixelsPerLonDegree_ = MAP_RANGE / 360;
this.pixelsPerLatDegree_ = MAP_RANGE / 180;
};
myProjection.prototype.fromLatLngToPoint = function(latLng) {
var origin = this.worldOrigin_;
var x = origin.x + latLng.lng() * this.pixelsPerLonDegree_;
var y = origin.y + latLng.lat() * this.pixelsPerLatDegree_;
return new google.maps.Point(x, y);
};
myProjection.prototype.fromPointToLatLng = function(point) {
var origin = this.worldOrigin_;
var lng = (point.x - origin.x) / this.pixelsPerLonDegree_;
var lat = (point.y - origin.y) / this.pixelsPerLatDegree_;
return new google.maps.LatLng(lat, lng);
};
function CoordMapType(tileSize) {
this.tileSize = tileSize;
}
CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
var div = ownerDocument.createElement('DIV');
div.innerHTML = coord;
div.style.width = this.tileSize.width + 'px';
div.style.height = this.tileSize.height + 'px';
div.style.fontSize = '16px';
div.style.borderStyle = 'solid';
div.style.borderWidth = '1px';
div.style.borderColor = '#999999';
div.style.color = '#999';
return div;
};
function HomeControl(controlDiv, map) {
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 = 'Click to go to start point';
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 = 'Go to start point';
controlUI.appendChild(controlText);
google.maps.event.addDomListener(controlUI, 'click', function() {
map.setCenter(new google.maps.LatLng(0, 0))
});
}
CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
switch(zoom) {
case 6:
default:
var factor = Math.pow(3,(6-zoom))
var grid_div = ownerDocument.createElement("DIV");
grid_div.style.outlineStyle = "dotted";
grid_div.style.outlineWidth = "1px";
grid_div.style.outlineColor = "#AAA";
grid_div.innerHTML = "<span class=\"coords\">("+coord.x*factor+", "+coord.y*factor+")</span>";
grid_div.style.width = this.tileSize.width + "px";
grid_div.style.height = this.tileSize.height + "px";
grid_div.my_x = coord.x;
grid_div.my_y = coord.y;
grid_div.zoom = zoom;
return grid_div;
break;
}
};
function GridControl(controlDiv, map) {
controlDiv.style.padding = '5px';
var controlUI = document.createElement('DIV');
controlUI.style.backgroundColor = '#666';
controlUI.style.borderStyle = 'solid';
controlUI.style.borderWidth = '1px';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Click to show or hide grid';
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 = 'Show/Hide grid';
controlUI.appendChild(controlText);
google.maps.event.addDomListener(controlUI, 'click', function() {
if (map.overlayMapTypes.getLength()) {
map.overlayMapTypes.pop();
}
else {
map.overlayMapTypes.push(new CoordMapType(new google.maps.Size(100, 100)))
}
});
}
function initialize() {
var map;
var myMapType = new google.maps.ImageMapType({
tileSize: new google.maps.Size(256, 256),
minZoom: 3,
maxZoom: 6,
getTileUrl: function(coord, zoom) {
return './maps/' + salemserver + '/'+ zoom + '/' + 'tile_' + coord.x + '_' + coord.y + '.png';
},
isPng: true
});
myMapType.projection = new myProjection();
var mapOptions = {
center: new google.maps.LatLng(0, 0),
mapTypeControl: false,
backgroundColor: '#212121',
zoom: 6
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.mapTypes.set('myMapType', myMapType);
map.setMapTypeId('myMapType');
var homeControlDiv = document.createElement('DIV');
var homeControl = new HomeControl(homeControlDiv, map);
homeControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);
var gridControlDiv = document.createElement('DIV');
var gridControl = new GridControl(gridControlDiv, map);
gridControlDiv.index = 2;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(gridControlDiv);
}
*clears sleepy gunk out of the corners of her eyes* Ugh, so tired, almost forgot. In the JS, find this line:
- Code: Select all
tileSize: new google.maps.Size(256, 256),
Change it to match the size of your images - 100, 100 for 100px, 500, 500 for 500px and so on. I was experimenting with sizing to see how it affected load time and overall performance, and have not marked up and commented anything in the HTML and Javascript yet.
The grid works nicely now, and regardless of image size, is 100 by 100 (minimap tile sizes, coordinates would coincide with ingame sizing this way).
I may change more things in the JS later on to allow for settings variables for all of this. More user friendly that way.
Need more hours in a day.
I was supposed to return home on the 26th, but 
