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.

Authors

• SchemeSonic, [email protected] | [email protected]

• FreakyCoder, [email protected] | [email protected]

• starikcetin, [email protected] | [email protected]

License

WebComponent PWC Map Legend is available under the MIT license. Refer to the LICENSE file for more information.