🧩 LHotline

A polyline with colored gradients.

🧪 Demo

<script setup lang="ts">
import { LMap, LTileLayer } from '@maxel01/vue-leaflet'
import { LHotline } from '@maxel01/vue-leaflet-plugins'
</script>

<template>
    <LMap :zoom="9" :center="[47.31322, -1.319482]">
        <LTileLayer
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            layer-type="base"
            name="OpenStreetMap"
        />
        <LHotline
            :lat-lngs="[
                [47.334852, -1.509485, 150],
                [47.342596, -1.328731, 250],
                [47.241487, -1.190568, 350],
                [47.234787, -1.358337, 250]
            ]"
            :min="150"
            :max="350"
        />
    </LMap>
</template>

⚙️ Props

Prop name	Description	Type	Reactive	Default	Required
min	Minimum z value	number	true	-	false
max	Maximum z value	number	true	-	false
outlineWidth	The width of the outline	number	true	-	false
outlineColor	The color of the outline	string	true	-	false
palette	The color palette	ColorPalette	true	-	false

🔗 Inherited props

from PolylineProps

Prop name	Description	Type	Reactive	Default	Required
latLngs	Array of coordinates objects that represent the polyline.	LatLngExpression[]	true	-	true
---	---	---	---	---	---
smoothFactor	How much to simplify the polyline on each zoom level. More means better performance and smoother looks, and less means more accurate representation.	`number	undefined`	true	-
noClip	Disable polyline clipping.	`boolean	undefined`	true	-

from PathProps

Prop name	Description	Type	Reactive	Default	Required
stroke	Whether to draw stroke along the path. Set it to false to disable borders on polygons or circles.	`boolean	undefined`	true	-
color	Stroke color	`string	undefined`	true	-
weight	Stroke width in pixels	`number	undefined`	true	-
opacity	Stroke opacity	`number	undefined`	true	-
lineCap	A string that defines shape to be used at the end of the stroke.	`LineCapShape	undefined`	true	-
lineJoin	A string that defines shape to be used at the corners of the stroke.	`LineJoinShape	undefined`	true	-
dashArray	A string that defines the stroke dash pattern.	`string	undefined`	true	-
dashOffset	A string that defines the distance into the dash pattern to start the dash.	`string	undefined`	true	-
fill	Whether to fill the path with color. Set it to false to disable filling on polygons or circles.	`boolean	undefined`	true	-
fillColor	Fill color	`string	undefined`	true	-
fillOpacity	Fill opacity	`number	undefined`	true	-
fillRule	A string that defines how the inside of a shape is determined.	`FillRule	undefined`	true	-
className	Custom class name set on an element. Only for SVG renderer.	`string	undefined`	true	-

from InteractiveLayerProps

Prop name	Description	Type	Reactive	Default	Required
interactive	If false, the layer will not emit pointer events and will act as a part of the underlying map.	`boolean	undefined`	initOnly	-
bubblingPointerEvents	When true, a pointer event on this path will trigger the same event on the map (unless DomEvent.stopPropagation is used).	`boolean	undefined`	initOnly	-

from LayerProps

Prop name	Description	Type	Reactive	Default	Required
pane	By default, the layer will be added to the map's overlay pane. Overriding this option will cause the layer to be placed on another pane by default. Not effective if the renderer option is set (the renderer option will override the pane option).	`string	undefined`	initOnly	-
attribution	String to be shown in the attribution control, e.g. "© OpenStreetMap contributors". It describes the layer data and is often a legal obligation towards copyright holders and tile providers.	`string	undefined`	true	-
name	-	`string	undefined`	true	-
layerType	-	`LayerType	undefined`	true	-
visible	-	`boolean	undefined`	true	-

from ComponentProps

Prop name	Description	Type	Reactive	Default	Required
options	Leaflet options to pass to the component constructor.	`T	undefined`	initOnly	-

🎯 Slots

Name	Description
default	Used to inject Leaflet child components like <LPopup> or <LTooltip> into the LHotline.

🧭 Exposes

Name	Type	Description
ready	Ref<boolean>	Indicates whether the component and its underlying Leaflet object are fully initialized.
leafletObject	Ref<Hotline | undefined>	The underlying Leaflet instance. Can be used to directly interact with the Leaflet API (e.g. calling methods or accessing internal state).