mixmap-pmtiles v1.0.0

mixmap-pmtiles

This package exports the MixmapPMTiles class that can be used to render a PMTiles archive with mixmap, using georender compatible data and shaders.

MixmapPMTiles is written to be extended with alternative shaders and data processing pipelines. In additional all functions that are used within this class are exposed to be composed in other tiled data sets. Its possible a future version of this is refactored to pull out all common processes for tiled data sets to be maintained in a common package, and this pmtiles specific implementation could plugin or otherwise extend that.

Usage

This package can be used to render raster or vector PMTiles archives. At the moment there is only a PNG decoder for the raster tiles.

This is a basic setup for rendering raster and vector tile archives, this comes from my pr-mie sketch (source code).

const mixmap = require('@rubenrodriguez/mixmap')
const regl = require('regl')
const resl = require('resl')
const {
  default: MixmapPMTiles,
  TileType,
  GeorenderShaders,
  RasterShaders,
} = require('mixmap-pmtiles')

const mix = mixmap(regl, {
  extensions: [
    'oes_element_index_uint',
    'angle_instanced_arrays',
  ],
  attributes: {
    stencil: true,
  },
})

const map = mix.create({
  viewbox,
  backgroundColor: [0.5, 0.5, 0.5, 1.0],
  clear: {
    color: [0.5, 0.5, 0.5, 1.0],
    depth: 1,
    stencil: 0,
  },
})

function addRaster () {
  const { raster } = RasterShaders(map)

  new MixmapPMTiles(map, {
    source: 'https://rr-studio-assets.nyc3.digitaloceanspaces.com/pr-sketch/mie-prefecture/pr-shore-buffered.pmtiles',
    tileType: TileType.Png,
    shaders: {
      raster,
    },
  })
}

function addVector () {
  resl({
    manifest: {
      // These are georender-style2png outputs
      // - https://github.com/rubillionaire/georender-style2png
      style: {
        type: 'binary',
        src: 'http://rubenrodriguez.me/sketches/pr-mie-03-04/style-textures/pr-mie.png',
        parser: (data) => {
          return decodePng(data)
        },
      },
      labels: {
        type: 'text',
        parser: JSON.parse,
        src: 'http://rubenrodriguez.me/sketches/pr-mie-03-04/style-textures/pr-mie.json',
      }
    },
    onDone: ready,
  })
  function ready ({ style, labels }) {
    const shaders = GeorenderShaders(map)
    labels.shader = shaders.label
    labels.update = {
      labelFeatureTypes: ['point'],
    }
    new MixmapPMTiles(map, {
      source: 'https://rr-studio-assets.nyc3.digitaloceanspaces.com/pr-sketch/mie-prefecture/pr-mvt.pmtiles',
      tileType: TileType.Mvt,
      style,
      labels,
      shaders,
    })
  }
}

addRaster()
addVector()

window.addEventListener('resize', () => {
  map.resize(window.innerWidth, window.innerHeight)
})
document.body.style.margin = '0'
document.body.appendChild(mix.render())
document.body.appendChild(map.render({
  width: window.innerWidth,
  height: window.innerHeight,
}))