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 <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>
<meta name="zoom" content="min=0,max=23" />
<extent units="OSMTILE">
<input name="zoomLevel" type="zoom" min="0" max="23" value="1" />
<input name="row" type="location" axis="row" units="tilematrix" min="0" max="2" />
<input name="col" type="location" axis="column" units="tilematrix" min="0" max="2" />
<!-- listen for the tileloadstart event on this element -->
<link rel="tile" title="" tref="" />
</extent>
</layer->
</mapml-viewer>

The JavaScript for creating custom tiles:

let layer = document.querySelector("body > mapml-viewer > layer- > extent > 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.