jeudi 2 avril 2020

Leaflet with Customs Tiles seems to not be working

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 &copy; <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