125 lines
4.2 KiB
JavaScript
125 lines
4.2 KiB
JavaScript
const TILE_SIZE = 1024;
|
|
|
|
|
|
// Set up the map
|
|
var map = L.map('map', {
|
|
crs: L.CRS.Simple,
|
|
minZoom: -3,
|
|
maxZoom: 3,
|
|
backgroundColor: '#000000',
|
|
});
|
|
map.attributionControl.addAttribution('With help from: DraconicNEO');
|
|
|
|
// Create storage for the tile layers
|
|
var layers = {
|
|
"Caves": L.layerGroup(),
|
|
"Surface": L.layerGroup().addTo(map),
|
|
};
|
|
|
|
// Make a request to discover cave tiles
|
|
fetch('/map-data/minecraft/mc-sdf-org/tiles/caves/tiles.json')
|
|
.then(response => response.json())
|
|
.then(tiles => {
|
|
// Add each tile
|
|
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/caves/${tile.image}`, bounds).addTo(layers.Caves);
|
|
});
|
|
});
|
|
fetch('/map-data/minecraft/mc-sdf-org/tiles/surface/tiles.json')
|
|
.then(response => response.json())
|
|
.then(tiles => {
|
|
// Add each tile
|
|
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/surface/${tile.image}`, bounds).addTo(layers.Surface);
|
|
});
|
|
});
|
|
|
|
// Create overlay layers
|
|
var overlayLayers = {
|
|
"Subway Stations": L.layerGroup().addTo(map),
|
|
"Subway Lines": L.layerGroup().addTo(map),
|
|
}
|
|
var clickable_areas = L.layerGroup().addTo(map);
|
|
|
|
// Add markers
|
|
fetch('/map-data/minecraft/mc-sdf-org/markers.json')
|
|
.then(response => response.json())
|
|
.then(markers => {
|
|
// Subway Stations
|
|
markers.waypoints.subway_stations.forEach(waypoint => {
|
|
var marker = L.marker([waypoint.z * -1, waypoint.x], { icon: L.icon({ iconUrl: '/map-data/icons/subway.png', iconSize: [16, 16], }) }).addTo(overlayLayers["Subway Stations"]);
|
|
marker.bindPopup(waypoint.name);
|
|
});
|
|
|
|
// Subway Lines
|
|
markers.lines.subway_lines.forEach(line => {
|
|
// Iterate over each point pair
|
|
line.point_pairs.forEach(pair => {
|
|
var map_line_obj = L.polyline([
|
|
[pair.from.z * -1, pair.from.x],
|
|
[pair.to.z * -1, pair.to.x],
|
|
], {
|
|
color: line.color,
|
|
opacity: 0.5,
|
|
|
|
}).addTo(overlayLayers["Subway Lines"]);
|
|
map_line_obj.bindPopup(line.name);
|
|
});
|
|
});
|
|
|
|
// Areas
|
|
markers.areas.forEach(area => {
|
|
var bounds = [
|
|
[area.top_left.z * -1, area.top_left.x],
|
|
[area.bottom_right.z * -1, area.bottom_right.x],
|
|
];
|
|
var area_obj = L.rectangle(bounds, {color:"#00000000", fillOpacity: 0.2 }).addTo(clickable_areas);
|
|
area_obj.bindPopup(area.name);
|
|
});
|
|
});
|
|
|
|
// Add the layers to the map
|
|
L.control.layers(layers, overlayLayers).addTo(map);
|
|
|
|
// Make the viewport look at the center of the map
|
|
map.fitBounds([
|
|
[-TILE_SIZE, -TILE_SIZE],
|
|
[TILE_SIZE, TILE_SIZE]
|
|
]);
|
|
|
|
// Add a CSS rule to pixelate the image only when zoomed in
|
|
map.on('zoomend', function (e) {
|
|
let element = document.querySelector('#leaflet-pixelator');
|
|
if (map.getZoom() >= 2) {
|
|
if (element) return;
|
|
document.head.insertAdjacentHTML('beforeend', '<style id="leaflet-pixelator">.leaflet-image-layer { image-rendering: pixelated; }</style>');
|
|
} else {
|
|
if (element) {
|
|
element.remove();
|
|
}
|
|
}
|
|
});
|
|
|
|
// Create a mouse position display
|
|
var mousePosition = L.control({ position: 'bottomleft' });
|
|
mousePosition.onAdd = function (map) {
|
|
this._div = L.DomUtil.create('div', 'mouse-position');
|
|
this._div.style.padding = '5px';
|
|
this._div.style.backgroundColor = 'rgba(255, 255, 255, 0.5)';
|
|
this._div.style.border = '1px solid #000000';
|
|
this._div.style.borderRadius = '5px';
|
|
this._div.style.display = 'none';
|
|
return this._div;
|
|
};
|
|
mousePosition.addTo(map);
|
|
|
|
// Update the mouse position display
|
|
map.on('mousemove', function (e) {
|
|
var x = Math.floor(e.latlng.lng);
|
|
var z = Math.floor(e.latlng.lat * -1);
|
|
mousePosition._div.innerHTML = `X: ${x}, Z: ${z}`;
|
|
mousePosition._div.style.display = '';
|
|
});
|