I am trying to use Leaflet in Combination with Custom Tiles to make a fictional Map, but it seems to not be working even when I set the Error Tile URL to a completely different image, it doesn't even show that.
My JS Code looks like this:
axios.get("https://crugg.de/udumap/map1/tiles/tiles.json").then((result) => {
let tilesData = JSON.parse(result.data.replace(/(\/\/)[A-Z a-z,:'()\/.#0-9]*/gm, ""));
console.log(tilesData.center);
let map = L.map('map', {
center: [tilesData.center[0], tilesData.center[1]],
zoom: tilesData.center[2]
}).setView([tilesData.center[0], tilesData.center[1]], tilesData.center[2]);
L.tileLayer('https://crugg.de/udumap/map1/tiles/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="https://www.openstreetmap.org/">UD:RP Map</a> contributors',
minZoom: tilesData.minzoom,
maxZoom: tilesData.maxzoom,
zoomOffset: -1,
bounds: L.latLngBounds(L.latLng(tilesData.bounds[0], tilesData.bounds[1]), L.latLng(tilesData.bounds[2], tilesData.bounds[3])),
errorTileUrl: "https://crugg.de/udumap/map1/tiles/17/107729/82841.png"
}).addTo(map);
});
JSFiddle: https://jsfiddle.net/5xprc6n3/1/
This is my first time using Leaflet and I have no Idea why this isn't working.
Aucun commentaire:
Enregistrer un commentaire