import { map as LMap, tileLayer } from 'leaflet'
import 'leaflet/dist/leaflet.css'

export const map = LMap('map')
map.setView([0, 0], 1)

// background tilelayer (OSM)
tileLayer('https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png', {
  maxZoom: 18,
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
  opacity: 0.9
}).addTo(map)
// wundertiles tilelayer
tileLayer('/tiles/{z}/{x}/{y}', {
  attribution: '',
  maxZoom: 22
}).addTo(map)

// compute Tile Coordinates
const toRad = (num) => num * Math.PI / 180
const getTileCoords = (lat, lon, zoom) => {
  let xtile = parseInt(Math.floor((lon + 180) / 360 * (1 << zoom)))
  let ytile = parseInt(Math.floor((1 - Math.log(Math.tan(toRad(lat)) + 1 / Math.cos(toRad(lat))) / Math.PI) / 2 * (1 << zoom)))
  return { x: xtile, y: ytile, z: zoom }
}

// demo: how to get tile coords on click
map.on('click', (e) => { console.log(getTileCoords(e.latlng.lat, e.latlng.lng, map.getZoom())) })