homedecor wrote:Is there a way to look at your saved map with all the pictures put together into one map? Havent played for a while so i've forgotten if there is a way!
For ... I use:
-
Merging tile-maps. Those sub folders in the client "map" folders.
salem_forum: "MapMerger. Maps optimizer."-- Drop exe in your main map folder. (
So the parent folder of your saved tile-map folders.)
-- Saves merged maps to a new "merged" folder.
-- Note: Any still lingering "merged" maps are cleared.
-- No changes are made to the source maps.
-- Works ok for all map types. (
normal, cave & simple)
...
Don't enter the HnH map-world without it ...
-
Viewing a particular saved tile-map: (Save as html file, lets call it Map2 for the moment.)
-- Drop Map2.html inside the folder containing the tile-map you like to view, and run it. That's it.
Code: Select all
<!DOCTYPE html>
<html>
<head>
<title>H&H session map</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="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var currentSession = '.';
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 = 'yellow';
div.style.color = 'yellow';
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))
});
}
function GridControl(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 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(100, 100),
minZoom: 9,
maxZoom: 9,
getTileUrl: function(coord, zoom) {
return currentSession + '/tile_' + coord.x + '_' + coord.y + '.png';
},
isPng: true
});
myMapType.projection = new myProjection();
var mapOptions = {
center: new google.maps.LatLng(0, 0),
mapTypeControl: false,
backgroundColor: '#E0C191',
zoom: 9
}
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);
}
</script>
<script type="text/javascript" src="currentsession.js"></script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
That should get you started.
For more links, see/search forum.
... or wait for a replay from Borka.
)