How do I get the tiles URL path?

[ryanginn]

I want to create a lightweight Leaflet wrapper for a server mapping. Basically I want to be able to create markers pointing back to a central DB. I am unsure how to pull the tiles correctly. I got this far but not working still. Any help would be appreciated!

[Varo95]

Hi @ryanginn, I’d like to share my personal approach to rendering Dynmap. I’m using Spring Boot as the backend with Kotlin (and there are Kotlin-to-Java converters available online if you prefer Java). On the frontend, I’m working with TypeScript and the Angular framework. I hope the structure is clear and helpful. I’ve stopped researching further for now, as I haven’t been able to find additional results and I don’t have much experience with mapping technologies.

Angular Dynmap Render

[ryanginn]

Thanks! I eventually found out how to pull from it in HTML. I'll see if I can find the code, and if it's any use let me know

…

On Wed, 17 Dec 2025 at 07:04, Álvaro Pérez Urbano ***@***.***> wrote: *Varo95* left a comment (webbukkit/dynmap#4232) <#4232 (comment)> Hi @ryanginn <https://github.com/ryanginn>, I’d like to share my personal approach to rendering Dynmap. I’m using Spring Boot as the backend with Kotlin (and there are Kotlin-to-Java converters available online if you prefer Java). On the frontend, I’m working with TypeScript and the Angular framework. I hope the structure is clear and helpful. I’ve stopped researching further for now, as I haven’t been able to find additional results and I don’t have much experience with mapping technologies. Angular Dynmap Render <https://gist.github.com/Varo95/a164c3940d84eebc6748558a185fd3f6> — Reply to this email directly, view it on GitHub <#4232 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AXQFX47MYDWYCJW5PYBQQZD4CD6AXAVCNFSM6AAAAACB42IVHWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZTMNRTHE3DEMRYG4> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[Varo95]

Yes, I'm quite interested. If you find it, I’d really appreciate it if you could share it with me. I’m also attaching an image of the code I mentioned earlier so you can see that it’s not too bad.

[ryanginn]

Hi, sorry @Varo95 I've been away from my main computer for a while. Here is the code I had working. Just remember to plug in the server address in the code.

Let me know if this helps!

mapviewer.html

[Varo95]

Many thanks for your reply. Now I'd like to share my code after all this in case anyone is interested in my setup.

I served the images statically and then applied your logic, @ryanginn .

Here's my TypeScript code; it's divided into two classes: an Angular page that serves the map and another class that inherits from TileLayer.

Dynmap.ts Typescript class

import {Coords, DoneCallback, TileLayer, TileLayerOptions, Util} from 'leaflet';

export class Dynmap extends TileLayer {
  private readonly url: string;

  constructor(urlTemplate: string, options?: TileLayerOptions) {
    super(urlTemplate, options);
    this.url = urlTemplate;
  }

  override getTileUrl(coords: Coords): string {
    const dynmapZoomDiff: number = this.options.maxNativeZoom! - coords.z;
    const prefix: string = dynmapZoomDiff > 0 ? 'z'.repeat(dynmapZoomDiff) + '_' : '';
    const multiplier: number = 1 << dynmapZoomDiff;
    const x: number = coords.x * multiplier;
    const y: number = -(coords.y * multiplier);
    const regionX: number = Math.floor(x / 32);
    const regionY: number = Math.floor(y / 32);
    return Util.template(this.url, {regionX, regionY, prefix, x, y});
  }

  override createTile(coords: Coords, done: DoneCallback): HTMLElement {
    const tile: HTMLElement = super.createTile.call(this, coords, done);
    tile.onerror = function (): void {
      this.style.display = 'none';
      done(undefined, tile);
    }
    return tile;
  }
}

Map.component.ts class

import {Component} from '@angular/core';
import {IonicModule} from '@ionic/angular';
import {TranslatePipe} from '@ngx-translate/core';
import {control, Control, CRS, DomUtil, Layer, LayersControlEvent, LeafletMouseEvent, Map, map, TileLayer} from 'leaflet';
import {Dynmap} from './Dynmap';
import 'leaflet/dist/leaflet.css';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss'],
  imports: [IonicModule, TranslatePipe],
  standalone: true,
})
export class MapComponent {

  public ionViewDidEnter(): void {
    this.createMap();
  }

  private createMap(): void {
    const dynMap: Map = map('map', {
      crs: CRS.Simple,
      attributionControl: true,
      center: [0, 0],
      zoom: 0,
      minZoom: 0,
      maxZoom: 5,
      zoomControl: false
    });
    const flat: TileLayer = new Dynmap('{your ip with port}/world/flat/{regionX}_{regionY}/{prefix}{x}_{y}.png', {
      tileSize: 2048,
      attribution: 'Plano',
      crossOrigin: false,
      maxZoom: 5,
      maxNativeZoom: 5,
      noWrap: true
    }).addTo(dynMap);
    const surface: TileLayer = new Dynmap('{your ip with port}/world/t/{regionX}_{regionY}/{prefix}{x}_{y}.png', {
      tileSize: 2048,
      attribution: '3D',
      crossOrigin: false,
      maxZoom: 5,
      maxNativeZoom: 5,
      noWrap: true
    });
    const layersControl: Control.Layers = control.layers({"Plano": flat, "3D": surface});
    const coordControl = new Control({position: 'bottomleft'});
    coordControl.onAdd = (map: Map): HTMLDivElement => {
      const div: HTMLDivElement = DomUtil.create('div', 'coordinate-hud');
      div.id = 'coord-display';
      div.innerHTML = "X: 0 | Z: 0";
      return div;
    };
    dynMap.addControl(layersControl);
    dynMap.addControl(coordControl);
    dynMap.attributionControl.setPrefix(false);
    let currentLayer: Layer | undefined = undefined;
    dynMap.on('baselayerchange', function (e: LayersControlEvent): void {
      console.log(e.layer);
      currentLayer = e.layer;
    });
    dynMap.on('mousemove', (e: LeafletMouseEvent): void => {
      const ptw: number[] = [0.0625, -3.827021247335479e-18, 0, 0, 0, 1, -3.827021247335479e-18, -0.0625, 0];
      const lat: number = 128 + -e.latlng.lat * 32;
      const lng: number = e.latlng.lng * 32;
      const x: number = ptw[0] * lng + ptw[1] * lat + ptw[2] * 64;
      const zDiff: number = currentLayer != undefined && currentLayer.options.attribution === '3D' ? 105 : 137;
      const z: number = ((ptw[6] * lng + ptw[7] * lat + ptw[8] * 64) + zDiff);
      coordControl.getContainer()!.innerHTML = `X: ${Math.round(x)} | Z: ${Math.round(-z)}`;
    });
  }
}

And finally my dynmap world configuration:

worlds:
-   name: world
    title: Normal
    enabled: true
    protected: false
    sendposition: true
    sendhealth: true
    bigworld: false
    extrazoomout: 0
    visibilitylimits: [
        ]
    hiddenlimits: [
        ]
    hidestyle: stone
    maps:
    -   class: org.dynmap.hdmap.HDMap
        name: flat
        title: Plano
        prefix: flat
        perspective: iso_S_90_hires
        shader: stdtexture
        lighting: shadows
        image-format: default
        mapzoomin: 0
        boostzoom: 0
        append_to_world: ''
        protected: false
    -   class: org.dynmap.hdmap.HDMap
        name: surface
        title: 3D
        prefix: t
        perspective: iso_SE_60_hires
        shader: stdtexture
        lighting: shadows
        image-format: default
        mapzoomin: 0
        boostzoom: 0
        append_to_world: ''
        protected: false
-   name: world_nether
    title: Nether
    enabled: false
    extrazoomout: 0
    maps:
    -   class: org.dynmap.hdmap.HDMap
        name: flat
        title: Plano
        prefix: flat
        perspective: iso_S_90_hires
        shader: stdtexture
        lighting: nethershadows
        background: '#300806'
        mapzoomin: 0
    -   class: org.dynmap.hdmap.HDMap
        name: nether
        title: 3D
        prefix: nt
        perspective: iso_SE_60_hires
        shader: stdtexture
        lighting: nethershadows
        background: '#300806'
        mapzoomin: 0
-   name: world_the_end
    title: End
    enabled: false
    extrazoomout: 0
    maps:
    -   class: org.dynmap.hdmap.HDMap
        name: flat
        title: Plano
        prefix: flat
        perspective: iso_S_90_hires
        shader: stdtexture
        lighting: brightnight
        mapzoomin: 0
    -   class: org.dynmap.hdmap.HDMap
        name: the_end
        title: 3D
        prefix: st
        perspective: iso_SE_60_hires
        shader: stdtexture
        lighting: brightnight
        mapzoomin: 0

On configuration file i have the following:

deftemplatesuffix: hires
defaulttilescale: 512