1.0.3 • Published 11 months ago
vue-leaflet-ellipse v1.0.3
Vue Leaflet Ellipse
An addon for Leaflet.Ellipse to use with vue-leaflet. Basically, adding ellipse functionality to leaflet.
Installation
# npm
npm install -D vue-leaflet-ellipse
# yarn
yarn add -D vue-leaflet-ellipse
# pnpm
pnpm install -D vue-leaflet-ellipse
Usage
<template>
<l-map :zoom="10" :center="[0, 0]">
<l-ellipse
:lat-lng="[0, 0]"
:radius="[3000, 5000]"
:tilt="90"
color="green"
/>
</l-map>
</template>
<script>
import "leaflet/dist/leaflet.css";
import { LMap } from "@vue-leaflet/vue-leaflet";
import LEllipse from "vue-leaflet-ellipse";
export default {
components: {
LMap,
LEllipse,
},
};
</script>
or
<script setup>
import "leaflet/dist/leaflet.css";
import { LMap } from "@vue-leaflet/vue-leaflet";
import LEllipse from "vue-leaflet-ellipse";
</script>
<template>
<l-map :zoom="10" :center="[0, 0]">
<l-ellipse
:lat-lng="[0, 0]"
:radius="[3000, 5000]"
:tilt="90"
color="green"
/>
</l-map>
</template>
NOTE: Not Typescript comptable since upstream dependency vue-leaflet is not, see https://github.com/vue-leaflet/vue-leaflet/issues/1.
Props
Base props inherited from circle, see base leaflet docs and vue2 leaflet docs.
lat-lng
[Number, Number]
True
radius
[Number, Number]
True
tilt
Number
False
0
SSR
This addon is not SSR compatible, this may change in the future. This means that if you are before version 0.8.4
then you need to set :use-global-leaflet="true"
in LMap
, see vue-leaflet/b08f533
.