<div align="center">

> **⚠️ WARNING ⚠️** <br>
> This package is **BETA** version. <br>
> If you find any bugs or missing features please open the issue or create a PR.

</div>

<h1 align="center"> 📍 vue-leaflet-rotate-marker 📍</h1>

Rotated marker extension for [@vue-leaflet/vue-leaflet](https://github.com/vue-leaflet/vue-leaflet) package. Inspired by [mudin/vue2-leaflet-rotatedmarker](https://github.com/mudin/vue2-leaflet-rotatedmarker). Based on [bbecquet/Leaflet.RotatedMarker](https://github.com/bbecquet/Leaflet.RotatedMarker).

<div align="center">

[![Support for Vue 3](https://img.shields.io/badge/VUE%203-Support-lightgreen?style=for-the-badge&logo=vuedotjs)](https://v3.vuejs.org/guide/introduction.html)

[![License](https://img.shields.io/github/license/littleimagine/vue-leaflet-rotate-marker?style=flat-square)](https://github.com/littleimagine/vue-leaflet-rotate-marker/blob/main/LICENSE)
[![NPM Version](https://img.shields.io/npm/v/vue-leaflet-rotate-marker?style=flat-square)](https://www.npmjs.com/package/vue-leaflet-rotate-marker)
![GitHub Release Date](https://img.shields.io/github/release-date/littleimagine/vue-leaflet-rotate-marker?label=release&style=flat-square)
![Install NPM](https://img.shields.io/npm/dt/vue-leaflet-rotate-marker?style=flat-square)
![CodeFactor Grade](https://img.shields.io/codefactor/grade/github/littleimagine/vue-leaflet-rotate-marker?style=flat-square)
![Snyk Vulnerabilities NPM](https://img.shields.io/snyk/vulnerabilities/npm/vue-leaflet-rotate-marker?style=flat-square)

</div>

---

<h2 align="center"> DEMO </h2>

_In progress - Coming Soon_ 🔜

---

<h2 align="center"> ❗Pre Requirements </h2>

- [vue](https://github.com/vue-leaflet/vue-leaflet) | v3.3.4 or higher
- [leaflet](https://github.com/Leaflet/Leaflet) | v1.9.4 or higher
- [@vue-leaflet/vue-leaflet](https://github.com/vue-leaflet/vue-leaflet) | v0.10.1 or higher

---

<h2 align="center"> 🚀 Quick Installation </h2>

``` sh
npm i -D vue-leaflet-rotate-marker
```

<h2 align="center"> Quickstart </h2>

``` vue
<template>
  <div style="height: 600px; width: 100%">
    <l-map :zoom="5" :center="[-2.5, 118]">
      <l-tile-layer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        layer-type="base"
        name="OpenStreetMap"
      />
      <l-marker-rotate
        :lat-lng="[-3, 115]"
        rotationOrigin="top center"
      />
      <l-marker-rotate
        :lat-lng="[-3.5, 117]"
        rotationAngle="100"
      />
      <l-marker-rotate
        :lat-lng="[-4, 120]"
        rotationOrigin="bottom center"
        rotationAngle="172"
      >
        <l-tooltip>
          Tooltip
        </l-tooltip>
      </l-marker-rotate>
    </l-map>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import { LMap, LTileLayer, LTooltip } from '@vue-leaflet/vue-leaflet';
import { LMarkerRotate } from 'vue-leaflet-rotate-marker';

import 'leaflet/dist/leaflet.css';

export default defineComponent({
  name: 'SamplePage',
  components: {
    LMap,
    LTileLayer,
    LTooltip,
    LMarkerRotate
  }
});
</script>
```

### Support extensions:

This package includes support for the following packages:

- [veitbjarsch/vue-leaflet-markercluster](https://github.com/veitbjarsch/vue-leaflet-markercluster)

---

<h2 align="center"> 🌱 Contribute </h2>

_- Coming Soon_ 🔜

### Versioning

[Semantic Versioning Specification (SemVer) 2.0.0](https://semver.org/spec/v2.0.0.html).

---

<h2 align="center"> 📄 License </h2>

Author: [@bagasnur](https://github.com/bagasnur)

**&copy; 2024**
Source code & plugin under [MIT license](https://github.com/littleimagine/vue-leaflet-rotate-marker/blob/main/LICENSE).
