Minecraft-Overviewer/template.html at master · arrai/Minecraft-Overviewer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
<!DOCTYPE html>
<html>
<head>
<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 ; background-color: #000; }
  #mcmap { height: 100% }
</style>
<script type="text/javascript" src="markers.js"></script>
<script type="text/javascript" src="regions.js"></script>
<script type="text/javascript"
    src="http://maps.google.com/maps/api/js?file=api&amp;v=1&amp;sensor=false">

</script>
<script type="text/javascript">
  var config = {
    path:        'tiles',
    fileExt:     '{imgformat}',
    tileSize:     384,
    defaultZoom:  1,
    maxZoom:      {maxzoom},
    cacheMinutes: 0, // Change this to have browsers automatically request new images every x minutes
    debug:        false
  };

  // our custom projection maps Latitude to Y, and Longitude to X as normal,
  // but it maps the range [0.0, 1.0] to [0, tileSize] in both directions
  // so it is easier to position markers, etc. based on their position
  // (find their position in the lowest-zoom image, and divide by tileSize)
  function MCMapProjection() {
    this.inverseTileSize = 1.0 / config.tileSize;
  }

  MCMapProjection.prototype.fromLatLngToPoint = function(latLng) {
    var x = latLng.lng() * config.tileSize;
    var y = latLng.lat() * config.tileSize;
    return new google.maps.Point(x, y);
  };

  MCMapProjection.prototype.fromPointToLatLng = function(point) {
    var lng = point.x * this.inverseTileSize;
    var lat = point.y * this.inverseTileSize;
    return new google.maps.LatLng(lat, lng);
  };

  // helper to get map LatLng from world coordinates
  // takes arguments in X, Y, Z order
  // (arguments are *out of order*, because within the function we use
  // the axes like the rest of Minecraft Overviewer -- with the Z and Y
  // flipped from normal minecraft usage.)
  function fromWorldToLatLng(x, z, y)
  {
    // the width and height of all the highest-zoom tiles combined, inverted
    var perPixel = 1.0 / (config.tileSize * Math.pow(2, config.maxZoom));

    // This information about where the center column is may change with a different
    // drawing implementation -- check it again after any drawing overhauls!

    // point (0, 0, 127) is at (0.5, 0.0) of tile (tiles/2 - 1, tiles/2)
    // so the Y coordinate is at 0.5, and the X is at 0.5 - ((tileSize / 2) / (tileSize * 2^maxZoom))
    // or equivalently, 0.5 - (1 / 2^(maxZoom + 1))
    var lng = 0.5 - (1.0 / Math.pow(2, config.maxZoom + 1));
    var lat = 0.5;

    // the following metrics mimic those in ChunkRenderer.chunk_render in "chunk.py"

    // each block on X axis adds 12px to x and subtracts 6px from y
    lng += 12 * x * perPixel;
    lat -= 6 * x * perPixel;

    // each block on Y axis adds 12px to x and adds 6px to y
    lng += 12 * y * perPixel;
    lat += 6 * y * perPixel;

    // each block down along Z adds 12px to y
    lat += 12 * (128 - z) * perPixel;

    // add on 12 px to the X coordinate and 18px to the Y to center our point
    lng += 12 * perPixel;
    lat += 18 * perPixel;

    return new google.maps.LatLng(lat, lng);
  }

  var MCMapOptions = {
    getTileUrl: function(tile, zoom) {
      var url = config.path;
      if(tile.x < 0 || tile.x >= Math.pow(2, zoom) || tile.y < 0 || tile.y >= Math.pow(2, zoom)) {
        url += '/blank';
      } else if(zoom == 0) {
        url += '/base';
      } else {
        for(var z = zoom - 1; z >= 0; --z) {
          var x = Math.floor(tile.x / Math.pow(2, z)) % 2;
          var y = Math.floor(tile.y / Math.pow(2, z)) % 2;
          url += '/' + (x + 2 * y);
        }
      }
      url = url + '.' + config.fileExt;
      if(config.cacheMinutes > 0) {
        var d = new Date();
        url += '?c=' + Math.floor(d.getTime() / (1000 * 60 * config.cacheMinutes));
      }
      return(url);
    },
    tileSize: new google.maps.Size(config.tileSize, config.tileSize),
    maxZoom:  config.maxZoom,
    minZoom:  0,
    isPng:    !(config.fileExt.match(/^png$/i) == null)
  };

  var MCMapType = new google.maps.ImageMapType(MCMapOptions);
  MCMapType.name = "MC Map";
  MCMapType.alt = "Minecraft Map";
  MCMapType.projection = new MCMapProjection();

  function CoordMapType() {
  }

  function CoordMapType(tileSize) {
    this.tileSize = tileSize;
  }

  CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
    var div = ownerDocument.createElement('DIV');
    div.innerHTML = "(" + coord.x + ", " + coord.y + ", " + zoom + ")";
    div.innerHTML += "<br />";
    div.innerHTML += MCMapOptions.getTileUrl(coord, zoom);
    div.style.width = this.tileSize.width + 'px';
    div.style.height = this.tileSize.height + 'px';
    div.style.fontSize = '10';
    div.style.borderStyle = 'solid';
    div.style.borderWidth = '1px';
    div.style.borderColor = '#AAAAAA';
    return div;
  };

  var map;

  var markersInit = false;

  function initMarkers() {
    if (markersInit) { return; }

    markersInit = true;

    for (i in markerData) {
      var item = markerData[i];

      var converted = fromWorldToLatLng(item.x, item.y, item.z);
       var marker = new google.maps.Marker({
        position: converted,
        map: map,
        title: item.msg
      });
   }
  }

  var regionsInit = false;
  function initRegions() {
    if (regionsInit) { return; }

    regionsInit = true;

    for (i in regionData) {
      var region = regionData[i];
      var converted = new google.maps.MVCArray();
      for (j in region.path) {
        var point = region.path[j];
        converted.push(fromWorldToLatLng(point.x, point.y, point.z));
      }

      if (region.closed) {
        new google.maps.Polygon({
          clickable: false,
          geodesic: false,
          map: map,
          strokeColor: region.color,
          strokeOpacity: region.opacity,
          strokeWeight: 2,
          fillColor: region.color,
          fillOpacity: region.opacity * 0.25,
          zIndex: i,
          paths: converted
        });
      } else {
        new google.maps.Polyline({
          clickable: false,
          geodesic: false,
          map: map,
          strokeColor: region.color,
          strokeOpacity: region.opacity,
          strokeWeight: 2,
          zIndex: i,
          path: converted
        });
      }
    }
  }
function makeLink() {
    var a=location.href.substring(0,location.href.lastIndexOf("/")+1)
        + "?lat=" + map.getCenter().lat().toFixed(6)
        + "&lng=" + map.getCenter().lng().toFixed(6)
        + "&zoom=" + map.getZoom();
    document.getElementById("link").innerHTML = a;
}

function initialize() {

    var query = location.search.substring(1);

    var lat = 0.5;
    var lng = 0.5;
    var zoom = config.defaultZoom;
    var pairs = query.split("&");
    for (var i=0; i<pairs.length; i++) {
        // break each pair at the first "=" to obtain the argname and value
        var pos = pairs[i].indexOf("=");
        var argname = pairs[i].substring(0,pos).toLowerCase();
        var value = pairs[i].substring(pos+1).toLowerCase();

        // process each possible argname
        if (argname == "lat") {lat = parseFloat(value);}
        if (argname == "lng") {lng = parseFloat(value);}
        if (argname == "zoom") {zoom = parseInt(value);}
    }

    var mapOptions = {
      zoom: zoom,
      center: new google.maps.LatLng(lat, lng),
      navigationControl: true,
      scaleControl: false,
      mapTypeControl: false,
      streetViewControl: false,
      mapTypeId: 'mcmap'
    };
    map = new google.maps.Map(document.getElementById("mcmap"), mapOptions);

    if(config.debug) {
      map.overlayMapTypes.insertAt(0, new CoordMapType(new google.maps.Size(config.tileSize, config.tileSize)));

	  google.maps.event.addListener(map, 'click', function(event) {
	    console.log("latLng; " + event.latLng.lat() + ", " + event.latLng.lng());

	    var pnt = map.getProjection().fromLatLngToPoint(event.latLng);
	    console.log("point: " + pnt);

	    var pxx = pnt.x * config.tileSize * Math.pow(2, config.maxZoom);
	    var pxy = pnt.y * config.tileSize * Math.pow(2, config.maxZoom);
	    console.log("pixel: " + pxx + ", " + pxy);
	  });
    }

    // Now attach the coordinate map type to the map's registry
    map.mapTypes.set('mcmap', MCMapType);

    // We can now set the map to use the 'coordinate' map type
    map.setMapTypeId('mcmap');

	// initialize the markers and regions
	initMarkers();
    initRegions();

    makeLink();

    // Make the link again whenever the map changes
    google.maps.event.addListener(map, 'zoom_changed', function() {
        makeLink();
    });
    google.maps.event.addListener(map, 'center_changed', function() {
        makeLink();
    });

  }
</script>
</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>