Website/template/map.twig

{% include 'includes/head.twig' with {'pageTitle': 'Map'} %}

<div id="map"></div>
<a id="homeLink" href="/">Go Home</a>

<script>
  L.TileLayer.CRSSLayer = L.TileLayer.extend({
    getTileUrl: function(coordinate) {
      console.log(coordinate);

      const tileX = coordinate.x;
      const tileY = coordinate.y;

      const url = ('https://cdn.theclashfruit.me/crss/map_new/{xd}/{yd}/tile.{x}.{y}.png')
        .replace('{yd}', Math.floor(tileY / 10))
        .replace('{xd}', Math.floor(tileX / 10))
        .replace('{y}', tileY)
        .replace('{x}', tileX);

      return url;
    }
  });

  L.tileLayer.crssLayer = function(templateUrl, options) {
    return new L.TileLayer.CRSSLayer(templateUrl, options);
  }

  let mapLayer = L.tileLayer.crssLayer('https://cdn.theclashfruit.me/crss/map_new/{xd}/{yd}/tile.{x}.{y}.png', {
    attribution: '&copy; <a href="https://crss.blurryface.xyz/">CRSS</a> players',

    tileSize: 256,

    noWrap: true,

    maxNativeZoom: 0,
    minNativeZoom: 0,

    minZoom: -2,
    maxZoom: -2 + 12,

    zoomOffset: -12
  });

  const worldMinX = -3 * 512;
  const worldMinY = -7 * 512;
  const worldWidth = (8 + 1 - (-3)) * 512;
  const worldHeight = (4 + 1 - (-7)) * 512;

  const worldTileSize = 256;

  const worldMaxZoomFactor = Math.pow(2, 0);

  let ropMarkers = L.layerGroup([
    L.marker([-75.5, 49.5])
      .bindPopup('Info Centre')
  ]);

  let rorMarkers = L.layerGroup([

  ]);

  let miscMarkers = L.layerGroup([
    L.marker([0.5, 0.5])
      .bindPopup('0; 0'),
    L.marker([1302.5, -661.5])
      .bindPopup('The Dropper'),
  ]);

  console.log(L.CRS.Simple.infinite)

  let map = L.map('map', {
    layers: [mapLayer, miscMarkers, ropMarkers, rorMarkers],
    preferCanvas: true,
    crs: L.Util.extend(L.CRS.Simple, {
      transformation: new L.Transformation(1, 0, 1, 0),
      projection: L.Projection.LonLat
    }),
  }).setView([0, 0], 2);

  let baseMaps = {
    "Overworld": mapLayer
  };

  let overlayMaps = {
    "Miscellaneous Markers": miscMarkers,
    "Markers in RoP": ropMarkers,
    "Markers in DRoR": rorMarkers,
  };

  let layerControl = L.control.layers(baseMaps, overlayMaps).addTo(map);

  L.control.mousePosition({
    position: 'bottomright',
    separator: '; ',
    lngFormatter: (x) => {
      return Math.floor(x)
    },
    latFormatter: (y) => {
      return Math.floor(y)
    },
    wrapLng: false,
    lngFirst: true
  }).addTo(map);
</script>

{% include 'includes/foot.twig' %}