Merge branch 'master' into hotfix/wms-tile-layer

# Changelog

All notable changes to this project will be documented in this file.

The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),

and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

## [Unreleased]

### Fixed

- Debounced event handlers are now cleared on unmount, resolving

  [#231 Possible Regression](https://github.com/vue-leaflet/vue-leaflet/issues/231).

- Reworked attribution update handler to resolve

  [#165 Error when updating attribution prop for tileLayer](https://github.com/vue-leaflet/vue-leaflet/issues/165).

- Default Leaflet icon is replaced by an empty div initially when a Marker has content in its slot that has not

  yet rendered, resolving

  [#170 Blinking default marker when using custom icon component](https://github.com/vue-leaflet/vue-leaflet/issues/170).

## [0.8.1] - 2023-01-29

### Fixed

- Resolved [#265 TypeError: this.getPane() is undefined](https://github.com/vue-leaflet/vue-leaflet/issues/265).

## [0.8.0] - 2023-01-26

### Added

- Import of Leaflet CSS in quickstart.

- Example of using HTML inside an `LIcon` component, to create a `DivIcon`.

### Fixed

- Leaflet component defaults are no longer replaced with `undefined` when not set explicitly.

- Resolved some errors caused by event handlers attempting to run after components had unmounted.

### Changed

- **Breaking:** `LWmsTileLayer` no longer has its own `baseUrl` property in addition to the `url` property it inherits

  from `LTileLayer`.

## [0.7.0] - 2022-12-08

### Breaking changes

- The `<l-map>` component now uses the globally available `window.L` instance of Leaflet by default.

  If you are using SSR in an existing project and relying on the default behaviour, you will now need to pass

  `:useGlobalLeaflet="false"` to your `<l-map>`.

### Added

- This changelog file.

- Quickstart and SSR sections in readme.

### Changed

- Minor additional updates to the readme.

- Code formatting in some playground examples.

- Moved `@types/leaflet` to `devDependencies`.

## Earlier versions

The following releases were created before the addition of this changelog:

* [0.6.1], 2021-06-17

* [0.6.0], 2021-03-01

* [0.5.0], 2020-11-29

* [0.4.2], 2020-11-16

* [0.4.1], 2020-11-16

* [0.4.0], 2020-11-13

* [0.3.0], 2020-10-31

* [0.2.0], 2020-10-30

* [0.1.2], 2020-10-09

[unreleased]: https://github.com/vue-leaflet/vue-leaflet/compare/v0.7.0...HEAD

[0.7.0]: https://github.com/vue-leaflet/vue-leaflet/compare/v0.6.1...v0.7.0

[0.6.1]: https://github.com/vue-leaflet/vue-leaflet/compare/v0.6.0...v0.6.1

[0.6.0]: https://github.com/vue-leaflet/vue-leaflet/compare/v0.5.0...v0.6.0

[0.5.0]: https://github.com/vue-leaflet/vue-leaflet/compare/v0.4.2...v0.5.0

[0.4.2]: https://github.com/vue-leaflet/vue-leaflet/compare/v0.4.1...v0.4.2

[0.4.1]: https://github.com/vue-leaflet/vue-leaflet/compare/v0.4.0...v0.4.1

[0.4.0]: https://github.com/vue-leaflet/vue-leaflet/compare/v0.3.0...v0.4.0

[0.3.0]: https://github.com/vue-leaflet/vue-leaflet/compare/v0.2.0...v0.3.0

[0.2.0]: https://github.com/vue-leaflet/vue-leaflet/compare/v0.1.2...v0.2.0

[0.1.2]: https://github.com/vue-leaflet/vue-leaflet/releases/tag/v0.1.2

 No newline at end of file

[issue](https://github.com/vue-leaflet/vue-leaflet/issues) or on [discord](https://discord.gg/uVZAfUf),

or join the [discussions](https://github.com/vue-leaflet/vue-leaflet/discussions).

## What Works:

## What works

- LCircle

- LCircleMarker

## Installation

`yarn add @vue-leaflet/vue-leaflet`

```bash

yarn add @vue-leaflet/vue-leaflet leaflet

```

or

`npm i -D @vue-leaflet/vue-leaflet`

```bash

npm i -D @vue-leaflet/vue-leaflet leaflet

```

## Usage

Most component props mimic the vanilla [Leaflet options](https://leafletjs.com/reference-1.7.1.html) as closely as

possible, and generally remain the same as in their [Vue2Leaflet counterparts](https://vue2-leaflet.netlify.app/components/).

### Working with Leaflet

### Quickstart

```vue

<template>

  <div style="height:600px; width:800px">

    <l-map ref="map" v-model:zoom="zoom" :center="[47.41322, -1.219482]">

      <l-tile-layer

        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"

        layer-type="base"

        name="OpenStreetMap"

      ></l-tile-layer>

    </l-map>

  </div>

</template>

<script>

import "leaflet/dist/leaflet.css";

import { LMap, LTileLayer } from "@vue-leaflet/vue-leaflet";

export default {

  components: {

    LMap,

    LTileLayer,

  },

  data() {

    return {

      zoom: 2,

    };

  },

};

</script>

<style></style>

```

### Component playground

To see the [component playground](https://github.com/vue-leaflet/vue-leaflet/tree/master/src/playground/views) in action,

clone this repo and run the local devserver, then visit localhost:8080,

```bash

git clone https://github.com/vue-leaflet/vue-leaflet.git

cd vue-leaflet

yarn

yarn serve

```

### Server-side rendering (SSR)

Note that while the vue-leaflet library has the option of enabling SSR, **Leaflet itself does not**.

> **N.B.** Using `import L from "leaflet"` or `import { ... } from "leaflet"` can lead to unexpected errors.

To provide server-side rendering and tree-shaking capabilities, vue-leaflet uses async imports from the Leaflet ESM.

To provide server-side rendering and tree-shaking capabilities, vue-leaflet can be configured to use async imports from the

Leaflet ESM, by disabling the `useGlobalLeaflet` option on the map component, `<l-map :useGlobalLeaflet="false">`.

This can lead to issues when importing additional methods from Leaflet, because the two instances of the Leaflet

classes are technically no longer the same. See [Issue 48](https://github.com/vue-leaflet/vue-leaflet/issues/48) for more.

To avoid these issues, import any Leaflet methods asynchronously in response to the LMap component's `@ready` event:

```vue

<template>

  <l-map style="height:50vh">

  <div style="height:600px; width:800px">

    <p>vue-leaflet SSR Demo</p>

    <l-map :useGlobalLeaflet="false">

      <l-geo-json :geojson="geojson" :options="geojsonOptions" />

    </l-map>

  </div>

</template>

<script>

{

  "name": "@vue-leaflet/vue-leaflet",

  "author": "Nicolò Maria Mezzopera",

  "version": "0.6.1",

  "version": "0.8.1",

  "license": "MIT",

  "private": false,

  "sideEffects": false,

    "docs:build": "vitepress build docs"

  },

  "peerDependencies": {

    "@types/leaflet": "^1.5.7",

    "leaflet": "^1.6.0",

    "vue": "^3.0.0"

  },

  "devDependencies": {

    "@types/leaflet": "^1.5.7",

    "@vue/cli-plugin-babel": "~4.5.0",

    "@vue/cli-plugin-eslint": "~4.5.0",

    "@vue/cli-service": "~4.5.0",

  WINDOW_OR_GLOBAL,

  GLOBAL_LEAFLET_OPT,

} from "../utils.js";

import { props, setup as circleSetup } from "../functions/circle";

import { circleProps, setupCircle } from "../functions/circle";

import { render } from "../functions/layer";

/**

 */

export default {

  name: "LCircle",

  props,

  props: circleProps,

  setup(props, context) {

    const leafletRef = ref({});

    const ready = ref(false);

    const useGlobalLeaflet = inject(GLOBAL_LEAFLET_OPT);

    const addLayer = inject("addLayer");

    const { options, methods } = circleSetup(props, leafletRef, context);

    const { options, methods } = setupCircle(props, leafletRef, context);

    onMounted(async () => {

      const { circle, DomEvent } = useGlobalLeaflet

  WINDOW_OR_GLOBAL,

  GLOBAL_LEAFLET_OPT,

} from "../utils.js";

import { props, setup as circleMarkerSetup } from "../functions/circleMarker";

import {

  circleMarkerProps,

  setupCircleMarker,

} from "../functions/circleMarker";

import { render } from "../functions/layer";

/**

 */

export default {

  name: "LCircleMarker",

  props,

  props: circleMarkerProps,

  setup(props, context) {

    const leafletRef = ref({});

    const ready = ref(false);

    const useGlobalLeaflet = inject(GLOBAL_LEAFLET_OPT);

    const addLayer = inject("addLayer");

    const { options, methods } = circleMarkerSetup(props, leafletRef, context);

    const { options, methods } = setupCircleMarker(props, leafletRef, context);

    onMounted(async () => {

      const { circleMarker, DomEvent } = useGlobalLeaflet