https://github.com/paraboly/pwc-map-legend
Fully customizable map legend view for Web with StencilJS via Paraboly
https://github.com/paraboly/pwc-map-legend
pwc-map-legend web-component
Last synced: over 1 year ago
JSON representation
Fully customizable map legend view for Web with StencilJS via Paraboly
- Host: GitHub
- URL: https://github.com/paraboly/pwc-map-legend
- Owner: Paraboly
- License: mit
- Created: 2019-10-08T20:54:59.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2020-11-25T13:38:37.000Z (over 5 years ago)
- Last Synced: 2025-03-17T09:26:50.717Z (over 1 year ago)
- Topics: pwc-map-legend, web-component
- Language: TypeScript
- Homepage: https://paraboly.com
- Size: 453 KB
- Stars: 5
- Watchers: 1
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/Paraboly/pwc-map-legend)
[](https://www.npmjs.com/package/@paraboly/pwc-map-legend)
[](https://www.npmjs.com/package/@paraboly/pwc-map-legend)
[](https://opensource.org/licenses/MIT)
## [Live JSFiddle Example](https://jsfiddle.net/starikcetin/y7j28rvs/18/)
## Installation
### Script tag
- [Publish to NPM](https://docs.npmjs.com/getting-started/publishing-npm-packages)
- 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
### 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
```html
```
## 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](/LICENSE) file for more information.