@paraboly/pwc-map-legend NPM

Live JSFiddle Example

Installation

Script tag

Publish to NPM
Put a script tag similar to this <script type="module" src="https://unpkg.com/@paraboly/pwc-map-legend@latest/dist/pwc-map-legend/pwc-map-legend.esm.js"></script> in the head of your index.html
Then you can use the element anywhere in your template, JSX, html etc

In a stencil-starter app

Run npm install @paraboly/pwc-map-legend --save
Add an import to the npm packages import @paraboly/pwc-map-legend;
Then you can use the element anywhere in your template, JSX, html etc

Usage

HTML Tag Prop Way

<pwc-map-legend
  title-text="Custom Legend Title"
  entries='[
    {
      "name": "Foo",
      "count": 1512,
      "color": "red"
    },
    {
      "name": "Road",
      "count": 8,
      "color": "#222123",
      "svgStyle": { "stroke-opacity": 0.8, "stroke-width": 15 },
      "roadLines": [
        {
          "color": "white",
          "svgStyle": { "stroke-dasharray": 6 }
        },
        {
          "color": "white"
        }
      ]
    }
  ]'
></pwc-map-legend>

Javascript Way

<pwc-map-legend></pwc-map-legend>

var pwcMapLegend = document.querySelector("pwc-map-legend");
pwcMapLegend.titleText = "Legend";
pwcMapLegend.entries = [
  {
    name: "Foo",
    count: 1512,
    color: "red"
  },
  {
    name: "Triple Lane Road",
    count: 8,
    color: "#222123",
    svgStyle: { "stroke-opacity": 0.8, "stroke-width": 15 },
    roadLines: [
      {
        color: "white",
        svgStyle: { "stroke-dasharray": 6 }
      },
      {
        color: "white"
      }
    ]
  }
];

Caveats

stroke-width of svgStyle overrides has to be of type number only. This is enforced in TypeScript interfaces, but there is no type enforcement when used from JavaScript code or from plain HTML.