vue-leaflet-rotate-marker

📍 vue-leaflet-rotate-marker 📍

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

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

© 2024 Source code & plugin under MIT license.