tile!!!

front/index.js

@@ -2,13 +2,24 @@ import L from 'leaflet';
 import 'leaflet/dist/leaflet.css';
 import * as marker from './marker.js';
 
+let bounds = [[0,0], [-3840, 3840]];
+
 let map = L.map('map', {
   crs: L.CRS.Simple,
-  minZoom: -4
+  minZoom: -1,
+  maxZoom: 3
 });
 
-let bounds = [[0,0], [15360, 15360]];
-let image = L.imageOverlay('./maps/Tanoa.png', bounds).addTo(map);
+L.tileLayer('./maps/build/{z}/x{x}_y{y}.jpg', {
+  minZoom: -1,
+  maxZoom: 3,
+  minNativeZoom: 1,
+  maxNativeZoom: 3,
+  tileSize: 1000,
+  bounds: [[0,0], [-3840, 3840]]
+}).addTo(map);
+
+// let image = L.imageOverlay('./maps/Tanoa.png', bounds).addTo(map);
 map.fitBounds(bounds);
 
 let UNITS_POS_MARKER = [];

front/marker.js

@@ -18,6 +18,8 @@ function makeMarker(coord=[0, 0], icon='loc_blue', text='') {
   });
 
   let [x, y] = coord;
+  y = y/8 - (15360/8);
+  x = x/8;
   let marker = L.marker(L.latLng(y, x), {icon: markerIcon});
   // https://gis.stackexchange.com/questions/59571/how-to-add-text-only-labels-on-leaflet-map-with-no-icon
   marker.bindTooltip(text, {permanent: true, offset: [15, 0]});
@@ -32,6 +34,8 @@ function makeUnitPos(coord=[0, 0], icon='purple') {
   });
 
   let [x, y] = coord;
+  y = y/8 - (15360/8);
+  x = x/8;
   let marker = L.marker(L.latLng(y, x), {icon: markerIcon});
   return marker;
 }

static/maps/build/build.sh

@@ -0,0 +1,23 @@
+#!/bin/bash
+
+set -x
+
+convert ../Tanoa.png -resize '25%' x1.png
+convert ../Tanoa.png -resize '50%' x2.png
+cp ../Tanoa.png x3.png
+
+function tile_image {
+	local num=$1;
+	mkdir ${num};
+	convert x${num}.png -crop 1000x1000 \
+		-background none \
+		-gravity northwest -extent 1000x1000 \
+		-set filename:tile "x%[fx:floor(page.x/1000+0.1)]_y%[fx:floor(page.y/1000+0.1)]" \
+		-quality '85%' \
+		+repage  +adjoin \
+		"./${num}/%[filename:tile].jpg";
+}
+
+tile_image 1
+tile_image 2
+tile_image 3