vue-leaflet-rotate-marker
v0.1.0
Published
Rotated marker extension for @vue-leaflet/vue-leaflet package. Developed under Little Imagine. Inspired by mudin/vue2-leaflet-rotatedmarker. Based on bbecquet/Leaflet.RotatedMarker (leaflet-rotatedmarker)
Downloads
212
Maintainers
Readme
⚠️ WARNING ⚠️ This package is BETA version. If you find any bugs or missing features please open the issue or create a PR.
Rotated marker extension for @vue-leaflet/vue-leaflet package. Inspired by mudin/vue2-leaflet-rotatedmarker. Based on bbecquet/Leaflet.RotatedMarker.
In progress - Coming Soon 🔜
- vue | v3.3.4 or higher
- leaflet | v1.9.4 or higher
- @vue-leaflet/vue-leaflet | v0.10.1 or higher
npm i -D vue-leaflet-rotate-marker
<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:
- Coming Soon 🔜
Versioning
Semantic Versioning Specification (SemVer) 2.0.0.
Author: @bagasnur
© 2024 Source code & plugin under MIT license.