How to show self-hosted tiles using MVtLayer?

This may be in the series of dumb questions, but when I look at, I do not understand how to make a MVTLayer that fetches self-hosted tiles without React pieces. Can someone help? This would feel to be even large interest now that buildless is also becoming a thing in web programming.

What I would like to achieve is a simple HTML (e.g. index.html) file that uses a script tag like <script src=""></script> and the example from the aforementioned that looks like (I changed the URL)

import DeckGL from '';
import {MVTLayer} from '';

function App({viewState}) {
  const layer = new MVTLayer({
    data: `https://<selfhostedurl>/{z}/{x}/{y}.pbf`,

    minZoom: 0,
    maxZoom: 23,
    getLineColor: [192, 192, 192],
    getFillColor: [140, 170, 180],

    getLineWidth: f => {
      switch ( {
        case 'street':
          return 6;
        case 'motorway':
          return 10;
          return 1;
    lineWidthMinPixels: 1

  return <DeckGL viewState={viewState} layers={[layer]} />;

but instead make this a without React. I see it requires a bit more code on how to define a canvas HTML element and use it. Maplibre example would be OK too. 🙂 There is one Maplibre example at

8 thoughts on “How to show self-hosted tiles using MVtLayer?”

  1. You can use the Scripting API for more ‘simple’ examples, here you have an example of using MVTLayer. offers a standalone bundled version of the library – a native JavaScript scripting interface like that of d3.js.

    As simple as:

    const deckgl = new deck.DeckGL({
      container: 'map',
      mapStyle: '',
      initialViewState: {
        latitude: 41.4,
        longitude: 2.18,
        zoom: 12,
      controller: true,
      layers: [
        new deck.MVTLayer({
          data: '{z}/{x}/{y}.mvt',
          getLineColor: [192, 192, 192],
          lineWidthMinPixels: 1

Leave a Comment