Map alignment

content/maps/minecraft/mc-rsninja-dev.md

@@ -0,0 +1,8 @@
+---
+title: "Minecraft Map Archive: mc.rsninja.dev"
+template: map.html
+extra:
+    bg_color: black
+---
+
+<script src="/map-data/minecraft/mc-rsninja-dev/map.js"></script>

content/maps/minecraft/mc-sdf-org.md

@@ -0,0 +1,8 @@
+---
+title: "Minecraft Map Archive: mc.sdf.org"
+template: map.html
+extra:
+    bg_color: black
+---
+
+<script src="/map-data/minecraft/mc-sdf-org/map.js"></script>

static/map-data/minecraft/mc-rsninja-dev/generate_tile_list.py

@@ -0,0 +1,27 @@
+import re
+import json
+from pathlib import Path
+
+TILES_DIR = Path(__file__).parent / "tiles"
+tiles = list(TILES_DIR.glob("*.png"))
+
+TILE_PARTS_RE = re.compile(r"([\d\-]+)_([\d\-]+)_x([\d\-]+)_z([\d\-]+).png")
+
+for tile in tiles:
+    tile_name = tile.name
+    match = TILE_PARTS_RE.match(tile_name)
+    
+    if match:
+        chunk_x, chunk_z, x, z = match.groups()
+        
+        print(
+            json.dumps(
+                {
+                    "chunk_x": int(chunk_x),
+                    "chunk_z": int(chunk_z),
+                    "x": int(x),
+                    "z": int(z),
+                    "image": tile_name
+                }
+            ) + ","
+        )

static/map-data/minecraft/mc-rsninja-dev/map.js

@@ -0,0 +1,80 @@
+
+const TILE_SIZE = 1024;
+const TILES = [
+    { "chunk_x": 0, "chunk_z": 965, "x": -14848, "z": -21504, "image": "0_965_x-14848_z-21504.png" },
+    { "chunk_x": 0, "chunk_z": 966, "x": -14848, "z": -20480, "image": "0_966_x-14848_z-20480.png" },
+    { "chunk_x": 5, "chunk_z": 992, "x": -9728, "z": 6144, "image": "5_992_x-9728_z6144.png" },
+    { "chunk_x": 12, "chunk_z": 985, "x": -2560, "z": -1024, "image": "12_985_x-2560_z-1024.png" },
+    { "chunk_x": 12, "chunk_z": 986, "x": -2560, "z": 0, "image": "12_986_x-2560_z0.png" },
+    { "chunk_x": 13, "chunk_z": 982, "x": -1536, "z": -4096, "image": "13_982_x-1536_z-4096.png" },
+    { "chunk_x": 13, "chunk_z": 983, "x": -1536, "z": -3072, "image": "13_983_x-1536_z-3072.png" },
+    { "chunk_x": 13, "chunk_z": 984, "x": -1536, "z": -2048, "image": "13_984_x-1536_z-2048.png" },
+    { "chunk_x": 13, "chunk_z": 985, "x": -1536, "z": -1024, "image": "13_985_x-1536_z-1024.png" },
+    { "chunk_x": 13, "chunk_z": 986, "x": -1536, "z": 0, "image": "13_986_x-1536_z0.png" },
+    { "chunk_x": 13, "chunk_z": 987, "x": -1536, "z": 1024, "image": "13_987_x-1536_z1024.png" },
+    { "chunk_x": 13, "chunk_z": 988, "x": -1536, "z": 2048, "image": "13_988_x-1536_z2048.png" },
+    { "chunk_x": 13, "chunk_z": 990, "x": -1536, "z": 4096, "image": "13_990_x-1536_z4096.png" },
+    { "chunk_x": 14, "chunk_z": 982, "x": -512, "z": -4096, "image": "14_982_x-512_z-4096.png" },
+    { "chunk_x": 14, "chunk_z": 983, "x": -512, "z": -3072, "image": "14_983_x-512_z-3072.png" },
+    { "chunk_x": 14, "chunk_z": 984, "x": -512, "z": -2048, "image": "14_984_x-512_z-2048.png" },
+    { "chunk_x": 14, "chunk_z": 985, "x": -512, "z": -1024, "image": "14_985_x-512_z-1024.png" },
+    { "chunk_x": 14, "chunk_z": 986, "x": -512, "z": 0, "image": "14_986_x-512_z0.png" },
+    { "chunk_x": 14, "chunk_z": 987, "x": -512, "z": 1024, "image": "14_987_x-512_z1024.png" },
+    { "chunk_x": 14, "chunk_z": 988, "x": -512, "z": 2048, "image": "14_988_x-512_z2048.png" },
+    { "chunk_x": 14, "chunk_z": 990, "x": -512, "z": 4096, "image": "14_990_x-512_z4096.png" },
+    { "chunk_x": 15, "chunk_z": 985, "x": 512, "z": -1024, "image": "15_985_x512_z-1024.png" },
+    { "chunk_x": 15, "chunk_z": 986, "x": 512, "z": 0, "image": "15_986_x512_z0.png" },
+    { "chunk_x": 15, "chunk_z": 988, "x": 512, "z": 2048, "image": "15_988_x512_z2048.png" },
+    { "chunk_x": 17, "chunk_z": 983, "x": 2560, "z": -3072, "image": "17_983_x2560_z-3072.png" },
+    { "chunk_x": 23, "chunk_z": 991, "x": 8704, "z": 5120, "image": "23_991_x8704_z5120.png" },
+    { "chunk_x": 24, "chunk_z": 991, "x": 9728, "z": 5120, "image": "24_991_x9728_z5120.png" },
+    { "chunk_x": 24, "chunk_z": 992, "x": 9728, "z": 6144, "image": "24_992_x9728_z6144.png" },
+    { "chunk_x": 24, "chunk_z": 993, "x": 9728, "z": 7168, "image": "24_993_x9728_z7168.png" },
+    { "chunk_x": 25, "chunk_z": 993, "x": 10752, "z": 7168, "image": "25_993_x10752_z7168.png" },
+    { "chunk_x": 28, "chunk_z": 986, "x": 13824, "z": 0, "image": "28_986_x13824_z0.png" }
+]
+
+// Set up the map
+var map = L.map('map', {
+    crs: L.CRS.Simple,
+    minZoom: -3,
+    maxZoom: 3,
+    backgroundColor: '#000000',
+});
+
+// Create two empty layers
+var base_layer = L.layerGroup();
+var chunked_layer = L.layerGroup();
+
+// Add each tile to the map
+TILES.forEach(tile => {
+    var bounds = [[tile.z * -1, tile.x], [(tile.z + TILE_SIZE) * -1, tile.x + TILE_SIZE]];
+    var image = L.imageOverlay(`/map-data/minecraft/mc-rsninja-dev/tiles/${tile.image}`, bounds).addTo(chunked_layer);
+});
+
+// Add the old export to the base layer
+var base_offset = [-4887, -2651];
+var bounds = [[0 + base_offset[0], 0 + base_offset[1]], [8983 + base_offset[0], 6205 + base_offset[1]]];
+var image = L.imageOverlay(`/map-data/minecraft/mc-rsninja-dev/world.png`, bounds).addTo(base_layer);
+
+map.fitBounds(bounds);
+
+// Add the layers to the map
+base_layer.addTo(map);
+chunked_layer.addTo(map);
+
+// Add a control to toggle the layers (allow both to be on at the same time)
+L.control.layers({}, {
+    "Base Layer": base_layer,
+    "Chunked Layer": chunked_layer
+}).addTo(map);
+
+// Add a CSS rule to pixelate the image only when zoomed in 
+map.on('zoomend', function (e) {
+    if (map.getZoom() >= 2) {
+        if (document.querySelector('#leaflet-pixelator')) return;
+        document.head.insertAdjacentHTML('beforeend', '<style id="leaflet-pixelator">.leaflet-image-layer { image-rendering: pixelated; }</style>');
+    } else {
+        document.querySelector('#leaflet-pixelator').remove();
+    }
+});

static/map-data/minecraft/mc-sdf-org/generate_tile_list.py

@@ -0,0 +1,27 @@
+import re
+import json
+from pathlib import Path
+
+TILES_DIR = Path(__file__).parent / "tiles"
+tiles = list(TILES_DIR.glob("*.png"))
+
+TILE_PARTS_RE = re.compile(r"([\d\-]+)_([\d\-]+)_x([\d\-]+)_z([\d\-]+).png")
+
+for tile in tiles:
+    tile_name = tile.name
+    match = TILE_PARTS_RE.match(tile_name)
+    
+    if match:
+        chunk_x, chunk_z, x, z = match.groups()
+        
+        print(
+            json.dumps(
+                {
+                    "chunk_x": int(chunk_x),
+                    "chunk_z": int(chunk_z),
+                    "x": int(x),
+                    "z": int(z),
+                    "image": tile_name
+                }
+            ) + ","
+        )

static/map-data/minecraft/mc-sdf-org/map.js

@@ -0,0 +1,62 @@
+
+const TILE_SIZE = 1024;
+const TILES = [
+    { "chunk_x": 0, "chunk_z": 4, "x": -4096, "z": -512, "image": "0_4_x-4096_z-512.png" },
+    { "chunk_x": 1, "chunk_z": 1, "x": -3072, "z": -3584, "image": "1_1_x-3072_z-3584.png" },
+    { "chunk_x": 1, "chunk_z": 2, "x": -3072, "z": -2560, "image": "1_2_x-3072_z-2560.png" },
+    { "chunk_x": 1, "chunk_z": 3, "x": -3072, "z": -1536, "image": "1_3_x-3072_z-1536.png" },
+    { "chunk_x": 1, "chunk_z": 4, "x": -3072, "z": -512, "image": "1_4_x-3072_z-512.png" },
+    { "chunk_x": 2, "chunk_z": 0, "x": -2048, "z": -4608, "image": "2_0_x-2048_z-4608.png" },
+    { "chunk_x": 2, "chunk_z": 1, "x": -2048, "z": -3584, "image": "2_1_x-2048_z-3584.png" },
+    { "chunk_x": 2, "chunk_z": 2, "x": -2048, "z": -2560, "image": "2_2_x-2048_z-2560.png" },
+    { "chunk_x": 2, "chunk_z": 3, "x": -2048, "z": -1536, "image": "2_3_x-2048_z-1536.png" },
+    { "chunk_x": 2, "chunk_z": 4, "x": -2048, "z": -512, "image": "2_4_x-2048_z-512.png" },
+    { "chunk_x": 2, "chunk_z": 5, "x": -2048, "z": 512, "image": "2_5_x-2048_z512.png" },
+    { "chunk_x": 3, "chunk_z": 0, "x": -1024, "z": -4608, "image": "3_0_x-1024_z-4608.png" },
+    { "chunk_x": 3, "chunk_z": 1, "x": -1024, "z": -3584, "image": "3_1_x-1024_z-3584.png" },
+    { "chunk_x": 3, "chunk_z": 2, "x": -1024, "z": -2560, "image": "3_2_x-1024_z-2560.png" },
+    { "chunk_x": 3, "chunk_z": 3, "x": -1024, "z": -1536, "image": "3_3_x-1024_z-1536.png" },
+    { "chunk_x": 3, "chunk_z": 4, "x": -1024, "z": -512, "image": "3_4_x-1024_z-512.png" },
+    { "chunk_x": 3, "chunk_z": 5, "x": -1024, "z": 512, "image": "3_5_x-1024_z512.png" },
+    { "chunk_x": 4, "chunk_z": 2, "x": 0, "z": -2560, "image": "4_2_x0_z-2560.png" },
+    { "chunk_x": 4, "chunk_z": 3, "x": 0, "z": -1536, "image": "4_3_x0_z-1536.png" },
+    { "chunk_x": 4, "chunk_z": 4, "x": 0, "z": -512, "image": "4_4_x0_z-512.png" },
+    { "chunk_x": 4, "chunk_z": 5, "x": 0, "z": 512, "image": "4_5_x0_z512.png" },
+    { "chunk_x": 5, "chunk_z": 4, "x": 1024, "z": -512, "image": "5_4_x1024_z-512.png" },
+    { "chunk_x": 5, "chunk_z": 5, "x": 1024, "z": 512, "image": "5_5_x1024_z512.png" }
+]
+
+// Set up the map
+var map = L.map('map', {
+    crs: L.CRS.Simple,
+    minZoom: -3,
+    maxZoom: 3,
+    backgroundColor: '#000000',
+});
+
+// Add each tile to the map
+TILES.forEach(tile => {
+    var bounds = [[tile.z * -1, tile.x], [(tile.z + TILE_SIZE) * -1, tile.x + TILE_SIZE]];
+    var image = L.imageOverlay(`/map-data/minecraft/mc-sdf-org/tiles/${tile.image}`, bounds).addTo(map);
+});
+
+// Find the top left and bottom right of the map
+var min_x = Math.min.apply(null, TILES.map(tile => tile.x));
+var max_x = Math.max.apply(null, TILES.map(tile => tile.x));
+var min_z = Math.min.apply(null, TILES.map(tile => tile.z));
+var max_z = Math.max.apply(null, TILES.map(tile => tile.z));
+
+map.fitBounds([
+    [min_z, min_x],
+    [max_z + TILE_SIZE, max_x + TILE_SIZE]
+]);
+
+// Add a CSS rule to pixelate the image only when zoomed in 
+map.on('zoomend', function (e) {
+    if (map.getZoom() >= 2) {
+        if (document.querySelector('#leaflet-pixelator')) return;
+        document.head.insertAdjacentHTML('beforeend', '<style id="leaflet-pixelator">.leaflet-image-layer { image-rendering: pixelated; }</style>');
+    } else {
+        document.querySelector('#leaflet-pixelator').remove();
+    }
+});

templates/map.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <!--noformat-->
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{page.title}} | {{config.title}}</title>
+    <link rel="shortcut icon" type="image/jpg" href="{{config.extra.profile_photo | safe}}" />
+
+    {% if current_url %}<link rel="canonical" href="{{current_url | safe}}" />{% endif %}
+
+    {# OpenGraph #}
+    <meta name="twitter:card" content="summary" />
+    <meta name="og:site" content="{{config.extra.domain_name}}" />
+    <meta name="og:site_name" content="{{config.title}}" />
+    <meta name="og:image" content="{{config.extra.profile_photo | safe}}" />
+    <meta property="og:title" content="{{page.title}} - {{config.title}}" />
+    <!--noformat-->
+
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+        integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
+    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
+        integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
+
+</head>
+
+<body style="margin:0;padding:0;">
+
+
+    {# Page Content #}
+    <main>
+        <div id="map" style="width:100vw;height:100vh;"></div>
+
+        {{page.content | safe}}
+    </main>
+
+    {# A bit of a hack to get VSCode to format this document correctly #}
+    {% if page.extra.bg_color %}
+    <script>
+        document.head.insertAdjacentHTML('beforeend', '<style>.leaflet-container { background-color: {{page.extra.bg_color}} !important; }</style>');
+    </script>
+    {% endif %}
+
+    {# Goatcounter #}
+    <script data-goatcounter="https://analytics.ewpratten.com/count" async src="//gc.zgo.at/count.js"></script>
+
+</body>
+
+</html>