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 vue-leaflet/vue-leaflet#1.

Props

Base props inherited from circle, see base leaflet docs and vue2 leaflet docs.

Name	About	Type	Required	Default
lat-lng	latitude and longitude of center point	[Number, Number]	True	n/a
radius	radii of semi-major and semi-minor axis	[Number, Number]	True	n/a
tilt	rotation in degrees from west	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.