@watergis/legend-symbol

Note: This is a work in progress

Usage no npm install needed!

<script type="module">
  import watergisLegendSymbol from 'https://cdn.skypack.dev/@watergis/legend-symbol';
</script>

README

legend-symbol

Note: This is a work in progress

An expressive map symbol (<svg/> icon) to represent a layer styled on a mapbox-gl-js map.

Supports the following layers types

  • circle
  • fill
  • line
  • symbol - as icon or text

screenshot of library in action

Usage

Here is an example using react. In the example below map is a instance of a mapbox-gl map and layer is the JSON representation of the layer you want to get a map symbol for.

import LegendSymbol from '@mgljs-contrib/legend-symbol/react';

function Foo () {
  // Where `map` is a mapbox-gl map instance.
  const style = map.getStyle();
  const layer = style.layers[2];
  const sprite = style.sprite;

  return (
    <LegendSymbol
      sprite={sprite}
      zoom={zoom}
      layer={layer}
    />
  );
}