font rendering

by jseppi

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Render font previews</title>
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.js"></script>
    <link
      href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.css"
      rel="stylesheet"
    />

    <link
      href="https://api.mapbox.com/mapbox-assembly/v0.24.0/assembly.min.css"
      rel="stylesheet"
    />
    <script
      async
      defer
      src="https://api.mapbox.com/mapbox-assembly/v0.24.0/assembly.js"
    ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.2/immutable.min.js"></script>

    <style>
      body {
        margin: 0;
        padding: 0;
        background: lightblue;
      }
    </style>
  </head>
  <body>
    <div id="render_map_1" class="border border--red" style="width:300px;height:120px"></div>
  </body>
 </html>

JavaScript

mapboxgl.accessToken = "pk.eyJ1IjoianNlcHBpbWJ4IiwiYSI6ImNqbGU1ODdtMzBpZjUzcG1pMWJnaHB2aHgifQ.xGVwKUpyJ-S5iyaLq7GFLA";

const ownerId = 'jseppimbx';

const state = {};
state.fontsToRender = new Set();
state.renderedFonts = {};

function makeFontKey(name, color, text) {
  return `${name}^${color}^${text}`;
}

function extractFontParamsFromKey(key) {
  const parts = key.split('^');
  return {
    name: parts[0],
    color: parts[1],
    text: parts[2]
  };
}


function addFontToRender(name, color, text) {
  const key = makeFontKey(name, color, text);
  state.fontsToRender.add(key);
}

function getParamsForFontsAwaitingRender() {
  const toRender = [];
  state.fontsToRender.forEach((key) => {
    const params = extractFontParams(key);
    toRender.push(params);
  });
}


function generateFontPreviewStyle({ ownerId, text, fontName, fontColor }) {
  return {
    version: 8,
    glyphs: `mapbox://fonts/${ownerId}/{fontstack}/{range}.pbf`,
    sources: {
      font: {
        type: "geojson",
        data: {
          type: "FeatureCollection",
          features: [
            {
              type: "Feature",
              geometry: {
                type: "Point",
                coordinates: [0, 0]
              },
              properties: {}
            }
          ]
        }
      }
    },
    layers: [
      {
        id: "preview",
        source: "font",
        type: "symbol",
        layout: {
          "text-justify": "left",
          "text-anchor": "top-left",
          "text-field": text,
          "text-font": [fontName],
          "text-line-height": 5,
          "text-max-width": 20,
          "text-size": 18
        },
        paint: {
          "text-color": fontColor,
          "text-halo-color": fontColor,
          "text-halo-width": 0.3,
          "text-halo-blur": 0
        }
      }
    ]
  };
}

addFontToRender('Arial', '#ff00ff', 'Arial');
console.log(getParamsForFontsAwaitingRender());