ArcGIS Legend from JSON

Simple script to build legend from ArcGIS JSON legend

by fxi

HTML

<script src="https://cdn.jsdelivr.net/npm/@fxi/[email protected]/dist/el.umd.min.js"></script>

JavaScript

const url = "https://geoportal.bafg.de/arcgis3/rest/services/GEMSTAT/Mean_Annual_Total_Phosphorus_Concentration/MapServer/legend?f=pjson"
const el = El.el;



fetchLayers(url).then(ls => {

  const legend = ls.forEach(l => {
    const elLegend = buildLegend(l);

    document.body.appendChild(elLegend);
  })

})



async function fetchLayers(url) {
  const r = await fetch(url);
  const d = await r.json();
  return d.layers;



}

function buildLegend(layer) {
  const leg = layer.legend;
  const title = layer.layerName;
  return el('div',
    el('h3', title),
    leg.map(l => {
      return el('div',
        el('img', {
          style: {
            width: `${l.width}px`,
            height: `${l.height}px`
          },
          src: `data:image/png;base64,${l.imageData}`
        }),
        el('span', l.label)
      )
    })
  )

}