Difference between revisions of "MediaWiki:Common.js"

Revision as of 16:19, 20 November 2024

/* Any JavaScript here will be loaded for all users on every page load. */

/* https://github.com/Hitchwiki/hitchwiki/issues/23 */
if ($('body.mw-special-Block').length) { 
  $('#mw-input-wpDisableEmail').click();
  $('#mw-input-wpHardBlock').click();
  $('#mw-input-wpExpiry')[0].value = 'infinite';
}

async function createStaticMap(mapContainer, lat, lon, zoom, width, height) {const TILE_SIZE = 256; const centerX = ((lon + 180) / 360) * Math.pow(2, zoom) * TILE_SIZE; const centerY = ((1 - Math.log(Math.tan(lat * Math.PI / 180) + 1 / Math.cos(lat * Math.PI / 180)) / Math.PI) / 2) * Math.pow(2, zoom) * TILE_SIZE; const topLeftX = centerX - width / 2, topLeftY = centerY - height / 2; const startTileX = Math.floor(topLeftX / TILE_SIZE), startTileY = Math.floor(topLeftY / TILE_SIZE); const xOffset = -(topLeftX % TILE_SIZE), yOffset = -(topLeftY % TILE_SIZE); const xTiles = Math.ceil(width / TILE_SIZE) + 1, yTiles = Math.ceil(height / TILE_SIZE) + 1; mapContainer.style.cssText = `width:${width}px;height:${height}px;position:relative;overflow:hidden`; for (let x = 0; x < xTiles; x++) {for (let y = 0; y < yTiles; y++) {const img = document.createElement("img"); img.src = `https://tile.openstreetmap.org/${zoom}/${startTileX + x}/${startTileY + y}.png`; img.style.cssText = `position:absolute;width:${TILE_SIZE}px;height:${TILE_SIZE}px;left:${(x * TILE_SIZE) + xOffset}px;top:${(y * TILE_SIZE) + yOffset}px`; mapContainer.appendChild(img);}}}

var mapbox = document.querySelector('.infobox-map')

function findFloatAttr(attr) {
     let floatRegex = /\d+(\.\d+)?/
     return +mapbox.innerText.split(attr)[1].match(floatRegex)[0]
}

// Extract the map attributes
var lat = findFloatAttr("lat");
var lon = findFloatAttr("lng");
var zoom = findFloatAttr("zoom");
var width = 300; // Set width for the static map display
var height = 300; // Set height for the static map display

// Create a container div for the static map
var mapContainer = document.createElement("div");

// Call the function to create the static map inside the container
createStaticMap(mapContainer, lat, lon, zoom, width, height);

// Create an anchor element that wraps the map container
var mapLink = document.createElement("a");
mapLink.href = `https://hitchmap.com/#location,${lat},${lon},${zoom}`;
mapLink.appendChild(mapContainer);

// Replace the original <map> element with the link containing the map container
mapbox.innerHTML = '';
mapbox.appendChild(mapLink);