!Built With Stencil


!Platform - Platform Free Web

Live JSFiddle Example

Installation

$3

- Publish to NPM
- Put a script tag similar to this in the head of your index.html
- Then you can use the element anywhere in your template, JSX, html etc

$3

- 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

``html
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"
}
]
}
]'
>
`

Javascript Way

`html

`

`js
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, haldun.yildiz@paraboly.com | haldun313@gmail.com

* FreakyCoder, kuray.ogun@paraboly.com | kurayogun@gmail.com

* starikcetin, tarik.cetin@paraboly.com | cetinsamedtarik@gmail.com

License

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