Fully customizable map legend view for Web with StencilJS via Paraboly
npm install @paraboly/pwc-map-legend



!Platform - Platform Free Web





- 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
- 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
``html`
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"
}
]
}
]'
>
`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"
}
]
}
];
* 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.
* SchemeSonic, haldun.yildiz@paraboly.com | haldun313@gmail.com
* FreakyCoder, kuray.ogun@paraboly.com | kurayogun@gmail.com
* starikcetin, tarik.cetin@paraboly.com | cetinsamedtarik@gmail.com
WebComponent PWC Map Legend is available under the MIT license. Refer to the LICENSE file for more information.