> **⚠️ WARNING ⚠️**
> This package is **BETA** version.
> If you find any bugs or missing features please open the issue or create a PR.

📍 vue-leaflet-rotate-marker 📍

Rotated marker extension for @vue-leaflet/vue-leaflet package. Inspired by mudin/vue2-leaflet-rotatedmarker. Based on bbecquet/Leaflet.RotatedMarker.

[![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.md) [![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)

DEMO

In progress - Coming Soon 🔜

❗Pre Requirements

vue | v3.3.4 or higher
leaflet | v1.9.4 or higher
@vue-leaflet/vue-leaflet | v0.10.1 or higher

🚀 Quick Installation

npm i -D vue-leaflet-rotate-marker

Quickstart

<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

🌱 Contribute

- Coming Soon 🔜

Versioning

Semantic Versioning Specification (SemVer) 2.0.0.

📄 License

Author: @bagasnur

littleimagine / vue-leaflet-rotate-marker

readme