mixmap-tile-grid

Tile grid outlines for mixmap, useful for debugging tile based in data in mixmap.

usage

npm install mixmap-tile-grid

The most straight forward way to use this module is to import the MixmapTileGrid which is effectively a wrapper around map.addLayer and all of the helper functions used to produce the output. These helper functions are all exported individually as well.

const mixmap = require('@rubenrodriguez/mixmap')
const tileGrid = require('mixmap-tile-grid')
const map = mix.create({
  viewbox,
})
tileGrid(map, { zindex: 1 })

API

The following are the typescript definitions for the functions that are exported.

The primary interface into the functionality is through MixmapTileGrid which is a function the following signature.

export default function MixmapTileGrid (map : any, {
  color=[0,1,0,1],
  zindex=10,
  label=true,
  lineWidth=1,
}={} as MixmapTileGridOptions) : void {}

export type MixmapTileGridOptions = {
  color: Color,
  zindex: number,
  label: LabelAtlasOptions, 
  lineWidth: number,
}

export type LabelAtlasOptions = null | false | {
  fontFamily : string,
  fontSize : number ,
  fontWeight : number,
  letterSpacing : number,
  strokeWidth : number,
  pixelRatio : number,
  zindex : number,
  outlinesZindex : number,
  fillColor : Color,
  strokeColor: Color,
}

MixmapTileGrid effectively coordinates the the calling of the following functions that are used to produce data to draw with Mixmap. See the index to see how these functions are used within the context of map.addLayer to coordinate drawing the tile grid.

export function tileGridProps (map : any, {
    zindex,
    color,
    lineWidth,
    label,
  } : MixmapTileGridOptions) : TileGridPropsFns {}

export type TileGridPropsFns = {
  lines: {
    add: (key : TileId, tileBbox : bbox) => TileProps,
    remove: (key : TileId, tileBbox : bbox) => void,
  },
  labels: LabelFns
}

export type LabelFns = null | {
  add: (key : TileId, tileBbox : bbox) => void,
  remove: (key : TileId, tileBbox : bbox) => void,
  prepare: () => {
    text: [stroke : PreparedLabelTextProps, fill : PreparedLabelTextProps],
    outlines: {
      positions : [number],
      count : number,
      zindex : number,
      opacity : number,
    },
  },
  clear: () => void,
}

export type PreparedLabelTextProps = {
  baselineOffset : [number, number],
  letterSpacing : number,
  pixelRatio : number,
  zindex : number,
  fontScale : number,
  glyphsTexture : Regl.Texture,
  labelLonLatDim: [number],
  color: Color,
  buffer: number,
}

export type MixmapTileGridOptions = {
  color: Color,
  zindex: number,
  label: LabelAtlasOptions, 
  lineWidth: number,
}

Example

There is an example that shows the full usage pattern. See this in your browser with by cloning this repo, running npm install && npm run example.