Skip to main content

Custom Rendering API

The Custom Rendering API allows developers to circumvent MapML's rendering and draw anything within HTML's domain onto the map.

Custom Tiles​

To render custom tiles using JavaScript, listen for the tileloadstart event on a templated layer's <map-link rel="tile"> element.

tileloadstart Event​

This event is fired when a tile is first being created, the event contains the following structure in its detail property:

{
  x: 1,    // tilematrix x value of the tile loaded
  y: 2,    // tilematrix y value of the tile loaded
  zoom: 3, // zoom level of the tile loaded
  appendTile: function appendTile ( customTile ) {...} // pass custom tile as an argument to function
}

Example​

The map:

<mapml-viewer projection="OSMTILE" zoom="0" lat="45" lon="-75" controls>
  <layer- label="Custom Tiles" checked>
    <map-meta name="zoom" content="min=0,max=23" ></map-meta>
    <map-extent units="OSMTILE">
      <map-input name="zoomLevel" type="zoom" min="0" max="23" value="1" ></map-input>
      <map-input name="row" type="location" axis="row" units="tilematrix" min="0" max="2" ></map-input>
      <map-input name="col" type="location" axis="column" units="tilematrix" min="0" max="2" ></map-input>
      <!-- listen for the tileloadstart event on this element -->
      <map-link rel="tile" title="" tref="" ></map-link>
    </map-extent>
  </layer->
</mapml-viewer>

The JavaScript for creating custom tiles:

let layer = document.querySelector("body > mapml-viewer > layer- > map-extent > map-link");
    layer.addEventListener("tileloadstart", (e) => {
      let customTile = document.createElement("p");
      customTile.innerHTML = `x: {e.detail.x} y: {e.detail.y} zoom: {e.detail.zoom}`;
      e.detail.appendTile(customTile);
    });

In this example the customTile is an HTML <p>, but you can use any HTML Element. Simply append the created element using the (tileloadstart event).detail.appendTile() function, passing the custom tile as an argument of the function.

Custom Image​

important

Needs to be implemented.