Live Codepen Example

Installation

Script tag

• Put two script tags similar to this in the head of your index.html:

<script
  type="module"
  src="https://unpkg.com/@paraboly/pwc-zoom-control@latest/dist/pwc-zoom-control/pwc-zoom-control.esm.js"
></script>
<script
  nomodule
  src="https://unpkg.com/@paraboly/pwc-zoom-control@latest/dist/pwc-zoom-control/pwc-zoom-control.js"
></script>

• Then you can use the element anywhere in your template, JSX, html etc

Node Modules

• Run npm install @paraboly/pwc-zoom-control --save
• Put a script tag similar to this <script src='node_modules/@paraboly/pwc-zoom-control/dist/pwc-zoom-control.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-zoom-control --save
• Add an import to the npm packages import @paraboly/pwc-zoom-control;
• Then you can use the element anywhere in your template, JSX, html etc

Usage

<pwc-zoom-control zoom="10"></pwc-zoom-control>

const pwcZoomControl = document.querySelector("pwc-zoom-control");
pwcZoomControl.addEventListener("controlTriggered", event =>
  console.log(event.details)
);

Details

Properties

Property	Attribute	Description	Type	Default
maxZoom	max-zoom	Max zoom for the zoom control.	string	"18"
minZoom	min-zoom	Min zoom for the zoom control.	string	"1"
zoom	zoom	Current zoom of the zoom control.	string	"10"
zoomRangeStep	zoom-range-step	Zoom step for zoom range.	string	"0.1"
zoomStep	zoom-step	Zoom step for zoom-in zoom-out buttons.	string	"1"

Events

Event	Description	Type
controlTriggered	Event which is triggered when there is any change on the zoom and pan controls.	CustomEvent<any>

Authors

SchemeSonic, haldun.yildiz@paraboly.com | haldun313@gmail.com

License

WebComponent PWC README Boilerplate is available under the MIT license.

See the LICENSE file for more info.