### Vue Component: LMap and LTileLayer Example

Source: https://context7.com/nuxt-modules/leaflet/llms.txt

Vue component demonstrating the basic setup of an interactive map using LMap as the container and LTileLayer for displaying OpenStreetMap tiles. Includes map event handling for when the map is ready.

```vue
<template>
  <div style="height:100vh; width:100vw">
    <LMap
      ref="map"
      :zoom="6"
      :max-zoom="18"
      :center="[47.21322, -1.559482]"
      :use-global-leaflet="false"
      @ready="onMapReady"
    >
      <LTileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution="&copy; <a href='https://www.openstreetmap.org/'>OpenStreetMap</a> contributors"
        layer-type="base"
        name="OpenStreetMap"
      />
    </LMap>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const map = ref(null)

const onMapReady = () => {
  console.log('Map is ready')
  // Access Leaflet map instance
  console.log('Max zoom:', map.value.maxZoom)
  // Access underlying Leaflet object
  console.log('Leaflet object:', map.value.leafletObject)
}
</script>
```

--------------------------------

### Development Commands for Nuxt Leaflet

Source: https://github.com/nuxt-modules/leaflet/blob/main/README.md

A collection of npm commands for developing the Nuxt Leaflet module. These include installing dependencies, preparing type stubs, running the development server, building the playground, and running tests.

```bash
# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release
```

--------------------------------

### Install leaflet.heat

Source: https://github.com/nuxt-modules/leaflet/blob/main/docs/guide/heat.md

Install the `leaflet.heat` package using npm. This is a prerequisite for using the heatmap functionality.

```bash
npm install leaflet.heat
```

--------------------------------

### Install @nuxtjs/leaflet Module

Source: https://github.com/nuxt-modules/leaflet/blob/main/README.md

This command installs the @nuxtjs/leaflet module using the Nuxt CLI. It's the primary step to enable Leaflet functionality in your Nuxt project.

```bash
npx nuxi@latest module add @nuxtjs/leaflet
```

--------------------------------

### Install Leaflet.markercluster

Source: https://github.com/nuxt-modules/leaflet/blob/main/docs/guide/marker-cluster.md

Installs the Leaflet.markercluster package using npm. This is the first step in integrating the plugin.

```bash
npm install leaflet.markercluster
```

--------------------------------

### Nuxt Leaflet Dependencies in package.json

Source: https://context7.com/nuxt-modules/leaflet/llms.txt

Example of dependencies to include in package.json for the Nuxt Leaflet module, covering the core package, Leaflet itself, Vue Leaflet, and type definitions. Optional dependencies for advanced features are also listed.

```json
{
  "dependencies": {
    "@nuxtjs/leaflet": "^1.3.2",
    "leaflet": "^1.9.4",
    "@vue-leaflet/vue-leaflet": "^0.10.1",
    "@types/leaflet": "^1.9.20"
  },
  "optionalDependencies": {
    "leaflet.markercluster": "^1.5.3",
    "leaflet.heat": "^0.2.0",
    "@types/leaflet.markercluster": "^1.5.6",
    "@types/leaflet.heat": "^0.2.5"
  }
}
```

--------------------------------

### Configure Nuxt Leaflet Optional Features

Source: https://context7.com/nuxt-modules/leaflet/llms.txt

Configuration example for nuxt.config.ts to enable optional features like marker clustering and heat maps within the Nuxt Leaflet module. These require additional npm packages to be installed.

```typescript
export default defineNuxtConfig({
  modules: ['@nuxtjs/leaflet'],
  leaflet: {
    markerCluster: true,  // Enable marker clustering
    heat: true            // Enable heat map layer
  }
})
```

--------------------------------

### Connect to WMS Services with LWmsTileLayer

Source: https://context7.com/nuxt-modules/leaflet/llms.txt

Demonstrates how to integrate external Web Map Service (WMS) data onto the map. This example shows how to configure the WMS base URL, layers, format, transparency, attribution, and other WMS-specific options.

```vue
<template>
  <LMap :zoom="8" :center="[51.505, -0.09]">
    <LTileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />

    <!-- WMS Tile Layer -->
    <LWmsTileLayer
      :base-url="'https://ows.terrestris.de/osm/service'"
      :layers="'OSM-WMS'"
      :format="'image/png'"
      :transparent="true"
      :attribution="'&copy; OpenStreetMap contributors'"
      :opacity="0.8"
      :version="'1.1.0'"
      :crs="'EPSG:3857'"
    />
  </LMap>
</template>
```

--------------------------------

### Vue Leaflet LImageOverlay Setup

Source: https://github.com/nuxt-modules/leaflet/blob/main/docs/components/l-image-overlay.md

Sets up the LImageOverlay component with Leaflet's CRS.Simple for custom coordinate systems. It defines image overlay properties, marker data, and computed bounds for the overlay. Includes map initialization and event handling.

```vue
<script setup lang="ts">
import "leaflet/dist/leaflet.css";
import { computed, ref, onMounted } from "vue";
import { LMap, LTileLayer, LImageOverlay, LMarker, LPopup } from "@vue-leaflet/vue-leaflet";

const imageOverlayUrl = ref(
  "https://www.printablee.com/postpic/2011/06/blank-100-square-grid-paper_405041.jpg"
);
const width = ref(100);
const height = ref(100);

const markers = ref([
  { coordinates: { lng: 0, lat: 0 } },
  { coordinates: { lng: 100, lat: 0 } },
  { coordinates: { lng: 0, lat: 100 } },
  { coordinates: { lng: 100, lat: 100 } },
  { coordinates: { lng: 0, lat: 50 } },
  { coordinates: { lng: 50, lat: 0 } },
  { coordinates: { lng: 50, lat: 100 } },
  { coordinates: { lng: 100, lat: 50 } },
]);

onMounted(() => {
  import('leaflet')
})

// When map is ready
const mapInitialized = () => {
  crs.value = L.CRS.Simple;
};

const bounds = computed(
  () =>
    [
      [0, 0],
      [height.value, width.value],
    ] as L.LatLngBoundsLiteral
);
const crs = ref(null);
</script>

<LMap
  ref="map"
  @ready="mapInitialized"
  style="height: 350px"
  :zoom="1"
  :crs="crs"
  :center="[height / 2, width / 2]"
  :minZoom="-5"
>
  <LTileLayer
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    attribution="&amp;copy; <a href=\"https://www.openstreetmap.org/\">OpenStreetMap</a> contributors"
    layer-type="base"
    name="OpenStreetMap"
  />
  <LImageOverlay :url="imageOverlayUrl" :bounds="bounds" />

  <LMarker
    v-for="(marker, idx) in markers"
    :key="idx"
    :lat-lng="marker.coordinates"
    ><LPopup>{{ idx }}</LPopup></LMarker
  >
</LMap>

<!-- Map Settings -->
<label for="imageOverlayUrl">Url to render: </label>
<input
  type="text"
  id="imageOverlayUrl"
  placeholder="Url for image overlay"
  v-model="imageOverlayUrl"
/>
<!-- Bounds settings -->
<label for="width">Width: </label>
<input type="number" id="width" placeholder="Width" v-model="width" />
<label for="height">Height: </label>
<input type="number" id="height" placeholder="Height" v-model="height" />

<!-- Marker settings -->
<div class="markers-list">
  <h4>Markers</h4>
  <ul>
    <li v-for="(marker, idx) in markers" :key="idx">
      {{ idx }} - lng (X): {{ marker.coordinates.lng }} - lat (Y):
      {{ marker.coordinates.lat }}
    </li>
  </ul>
</div>
```

```vue
<template>
  <LMap
    style="height: 350px"
    :zoom="1"
    :crs="crs"
    :center="[height / 2, width / 2]"
    :minZoom="-5"
  >
    <LTileLayer
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      attribution="&amp;copy; <a href=&quot;https://www.openstreetmap.org/&quot;>OpenStreetMap</a> contributors"
      layer-type="base"
      name="OpenStreetMap"
    />
    <LImageOverlay :url="imageOverlayUrl" :bounds="bounds" />

    <LMarker
      v-for="(marker, idx) in markers"
      :key="idx"
      :lat-lng="marker.coordinates"
      ><LPopup>{{ idx }}</LPopup></LMarker
    >
  </LMap>

  <!-- Map Settings -->
  <label for="imageOverlayUrl">Url to render: </label>
  <input
    type="text"
    id="imageOverlayUrl"
    placeholder="Url for image overlay"
    v-model="imageOverlayUrl"
  />
  <!-- Bounds settings -->
  <label for="width">Width: </label>
  <input type="number" id="width" placeholder="Width" v-model="width" />
  <label for="height">Height: </label>
  <input type="number" id="height" placeholder="Height" v-model="height" />

  <!-- Marker settings -->
  <div class="markers-list">
    <h4>Markers</h4>
    <ul>
      <li v-for="(marker, idx) in markers" :key="idx">
        {{ idx }} - lng (X): {{ marker.coordinates.lng }} - lat (Y):
        {{ marker.coordinates.lat }}
      </li>
    </ul>
  </div>
<template/>

<script setup lang="ts">
import { CRS } from "leaflet/dist/leaflet-src.esm";
import { computed, ref } from "vue";

const imageOverlayUrl = ref(
  "https://www.printablee.com/postpic/2011/06/blank-100-square-grid-paper_405041.jpg"
);
const width = ref(100);
const height = ref(100);

const markers = ref([
  { coordinates: { lng: 0, lat: 0 } },
  { coordinates: { lng: 100, lat: 0 } },
  { coordinates: { lng: 0, lat: 100 } },
  { coordinates: { lng: 100, lat: 100 } },
  { coordinates: { lng: 0, lat: 50 } },
  { coordinates: { lng: 50, lat: 0 } },
  { coordinates: { lng: 50, lat: 100 } },
  { coordinates: { lng: 100, lat: 50 } },
]);

const bounds = computed(
  () =>
    [
      [0, 0],
      [height.value, width.value],
    ] as L.LatLngBoundsLiteral
);
const crs = CRS.Simple;
</script>
```

--------------------------------

### Vue Component: Multiple LTileLayer Examples

Source: https://context7.com/nuxt-modules/leaflet/llms.txt

Vue component showcasing how to use the LTileLayer component to display different tile layers on the map, such as OpenStreetMap and Esri satellite imagery. Each LTileLayer can have its own URL, attribution, and zoom limits.

```vue
<template>
  <LMap :zoom="10" :center="[51.505, -0.09]">
    <!-- OpenStreetMap tiles -->
    <LTileLayer
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      attribution="&copy; OpenStreetMap contributors"
      layer-type="base"
      name="OpenStreetMap"
      :max-zoom="19"
    />

    <!-- Alternative: Satellite imagery -->
    <LTileLayer
      url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"
      attribution="Tiles &copy; Esri"
      layer-type="base"
      name="Satellite"
      :max-zoom="18"
    />
  </LMap>
</template>
```

--------------------------------

### Vue Leaflet Setup and LPolyline Usage

Source: https://github.com/nuxt-modules/leaflet/blob/main/docs/components/l-polyline.md

Demonstrates how to set up a Vue Leaflet map and add an LPolyline component. It includes importing necessary modules, setting map properties, and defining the polyline's coordinates and color. Dependencies include Vue, Leaflet, and '@vue-leaflet/vue-leaflet'.

```vue
<script setup>
import "leaflet/dist/leaflet.css";
import { LMap, LTileLayer, LPolyline } from '@vue-leaflet/vue-leaflet';
import { onMounted } from 'vue';

onMounted(() => {
  import('leaflet')
})
</script>

<LMap style="height: 350px" :zoom="8" :center="[47.21322, -1.559482]">
  <LTileLayer
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    attribution="&amp;copy; <a href=\"https://www.openstreetmap.org/\">OpenStreetMap</a> contributors"
    layer-type="base"
    name="OpenStreetMap"
  />
  <LPolyline
    :lat-lngs="[
      [47.334852, -1.509485],
      [47.342596, -1.328731],
      [47.241487, -1.190568],
      [47.234787, -1.358337],
    ]"
    color="green"
  />
</LMap>
```

--------------------------------

### Add Map Controls with LControl Components

Source: https://context7.com/nuxt-modules/leaflet/llms.txt

Illustrates how to integrate various interactive map controls using LControl components. This includes zoom, scale, layer switcher, and attribution controls, along with a custom control for resetting the view and getting the user's location.

```vue
<template>
  <LMap :zoom="10" :center="[51.505, -0.09]">
    <LTileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />

    <!-- Zoom control (custom position) -->
    <LControlZoom :position="'topright'" />

    <!-- Scale control -->
    <LControlScale
      :position="'bottomleft'"
      :imperial="true"
      :metric="true"
    />

    <!-- Layer control for switching base layers -->
    <LControlLayers :position="'topright'" />

    <LTileLayer
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      layer-type="base"
      name="Street Map"
    />
    <LTileLayer
      url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"
      layer-type="base"
      name="Satellite"
    />

    <!-- Attribution control -->
    <LControlAttribution
      :position="'bottomright'"
      :prefix="'Custom Attribution'"
    />

    <!-- Custom control -->
    <LControl :position="'topleft'">
      <div style="background: white; padding: 10px; border-radius: 5px;">
        <button @click="resetView">Reset View</button>
        <button @click="getCurrentLocation">My Location</button>
      </div>
    </LControl>
  </LMap>
</template>

<script setup lang="ts">
const resetView = () => {
  console.log('Reset view to default')
}

const getCurrentLocation = () => {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition((position) => {
      console.log('Current location:', position.coords)
    })
  }
}
</script>
```

--------------------------------

### Accessing Leaflet Map Instance via 'ready' Event in Vue

Source: https://github.com/nuxt-modules/leaflet/blob/main/docs/guide/accessing-map-instance.md

This snippet demonstrates how to define the `onMapReady` method, which is triggered when the LMap component is ready. Inside this method, the Leaflet map instance is accessed using `map.value.leafletObject` and logged to the console. This requires the ref to be set up as shown in the previous example.

```vue
<template>
  <div style="height:100vh; width:100vw">
    <LMap
      ref="map"
      :zoom="6"
      :max-zoom="18"
      :center="[47.21322, -1.559482]"
      @ready="onMapReady"
    >
      <LTileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution="&amp;copy; <a href=&quot;https://www.openstreetmap.org/&quot;>OpenStreetMap</a> contributors"
        layer-type="base"
        name="OpenStreetMap"
      />
    </LMap>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const map = ref(null)

// When the map is ready
const onMapReady = () => {
    // Access the Leaflet map instance
    console.log(map.value.leafletObject)
}
</script>
```

--------------------------------

### Vue Leaflet Map with LPopup Integration

Source: https://github.com/nuxt-modules/leaflet/blob/main/docs/components/l-popup.md

This Vue.js code snippet demonstrates how to use the LMap component with various Leaflet layers, each featuring an LPopup. It includes setup for the map, tile layer, markers, polygon, polyline, rectangle, circle, and circle marker, with popups displaying custom messages. Dependencies include '@vue-leaflet/vue-leaflet' and 'leaflet'.

```vue
<script setup>
import "leaflet/dist/leaflet.css";
import {
  LCircle,
  LCircleMarker,
  LLayerGroup,
  LMap,
  LMarker,
  LPolygon,
  LPolyline,
  LPopup,
  LRectangle,
  LTileLayer
} from '@vue-leaflet/vue-leaflet';
import { onMounted } from 'vue';

onMounted(() => {
  import('leaflet')
})
</script>

<LMap style="height: 350px" :zoom="9" :center="[41.8329, -87.7327]">
  <LTileLayer
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    attribution="&amp;copy; <a href=\"https://www.openstreetmap.org/\">OpenStreetMap</a> contributors"
    layer-type="base"
    name="OpenStreetMap"
  />

  <LMarker :lat-lng="[41.8329, -87.7327]">
    <LPopup> Hi! I'm staying here on this location! </LPopup>
  </LMarker>

  <LLayerGroup>
    <LMarker :lat-lng="[41.75, -87.65]" draggable>
      <LPopup> Hi! You can drag me around! </LPopup>
    </LMarker>
  </LLayerGroup>

  <LPolygon
    :lat-lngs="[
      [41.6329, -87.5327],
      [41.5329, -87.2327],
      [41.3329, -87.3327],
      [41.6329, -87.5327],
    ]"
    color="#41b782"
    :fill="true"
    :fillOpacity="0.5"
    fillColor="#41b782"
  >
    <LPopup> Hi! I'm a polygon, nice to meet you! </LPopup>
  </LPolygon>

  <LPolyline
    :lat-lngs="[
      [41.9329, -87.9327],
      [41.8329, -87.8327],
    ]"
    color="green"
  >
    <LPopup> Hey! Polyline here, at your service! </LPopup>
  </LPolyline>

  <LRectangle
    :lat-lngs="[
      [41.734852, -86.809485],
      [41.742596, -86.628731],
      [41.641487, -86.590568],
      [41.634787, -86.658337],
    ]"
    :fill="true"
    color="#35495d"
  >
    <LPopup> Good day! Rectangle is my name! </LPopup>
  </LRectangle>

  <LCircle :lat-lng="[41.4329, -87.7327]" :radius="10000" color="green">
    <LPopup> Hi! I'm a green Circle! </LPopup>
  </LCircle>

  <LCircleMarker :lat-lng="[41.4329, -87.95]" :radius="20">
    <LPopup> Hi! You can call me Circle Marker! </LPopup>
  </LCircleMarker>
</LMap>
```

--------------------------------

### Display Map with LMap and LTileLayer in Vue

Source: https://github.com/nuxt-modules/leaflet/blob/main/docs/getting-started/usage.md

This code snippet demonstrates how to use the LMap and LTileLayer components from Vue Leaflet within a Vue template to display an interactive map. It configures map properties like zoom level, center coordinates, and tile layer source. Dependencies include Vue Leaflet and Leaflet CSS.

```vue
<template>
  <LMap
    style="height: 350px"
    :zoom="6"
    :center="[47.21322, -1.559482]"
    :use-global-leaflet="false"
  >
    <LTileLayer
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      attribution="&amp;copy; <a href=&quot;https://www.openstreetmap.org/&quot;>OpenStreetMap</a> contributors"
      layer-type="base"
      name="OpenStreetMap"
    />
  </LMap>
</template>

<script setup>
import "leaflet/dist/leaflet.css";
import { LMap, LTileLayer } from "@vue-leaflet/vue-leaflet";
import { onMounted } from 'vue';

onMounted(() => {
  import('leaflet')
})
</script>
```

--------------------------------

### Vue Leaflet Map with Feature Group and Marker

Source: https://github.com/nuxt-modules/leaflet/blob/main/docs/components/l-feature-group.md

This Vue.js snippet demonstrates how to set up a Leaflet map using Vue Leaflet components. It includes a tile layer and an LFeatureGroup containing an LMarker. The script setup imports necessary components and Leaflet CSS, and dynamically imports the 'leaflet' library on mount.

```vue
<script setup>
import "leaflet/dist/leaflet.css";
import { LMap, LTileLayer, LFeatureGroup, LMarker } from '@vue-leaflet/vue-leaflet';
import { onMounted } from 'vue';

onMounted(() => {
  import('leaflet')
})
</script>

<LMap style="height: 350px" :zoom="8" :center="[47.21322, -1.559482]">
  <LTileLayer
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    attribution="&amp;copy; <a href=\"https://www.openstreetmap.org/\">OpenStreetMap</a> contributors"
    layer-type="base"
    name="OpenStreetMap"
  />
  <LFeatureGroup>
    <LMarker :lat-lng="[47.21322, -1.559482]" />
  </LFeatureGroup>
</LMap>
```

--------------------------------

### Displaying Map Tiles with LTileLayer in Vue

Source: https://github.com/nuxt-modules/leaflet/blob/main/docs/components/l-tile-layer.md

This code demonstrates how to use the LTileLayer component within an LMap to display different tile layers. It imports necessary components from '@vue-leaflet/vue-leaflet' and Leaflet's CSS. The example shows two LTileLayer instances, one for OpenStreetMap and another for SafeCast tiles, each with specific configurations for URL, attribution, and zoom levels.

```vue
<script setup>
import "leaflet/dist/leaflet.css";
import { LMap, LTileLayer } from '@vue-leaflet/vue-leaflet';
import { onMounted } from 'vue';

onMounted(() => {
  import('leaflet')
})
</script>

<LMap style="height: 350px" :zoom="8" :center="[47.21322, -1.559482]">
  <!-- Base Layer -->
  <LTileLayer
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    attribution="&amp;copy; <a href=\"https://www.openstreetmap.org/\">OpenStreetMap</a> contributors"
    layer-type="base"
    name="OpenStreetMap"
  />

  <!-- Overlay Layer -->
  <LTileLayer
    url="https://s3.amazonaws.com/te512.safecast.org/{z}/{x}/{y}.png"
    attribution="<a href='https://blog.safecast.org/about/'>SafeCast</a> (<a href='https://creativecommons.org/licenses/by-sa/3.0/'>CC-BY-SA</a>"
    :min-zoom="5"
    :max-zoom="12"
  />
</LMap>
```

--------------------------------

### Configure LIcon with Text Content (Vue)

Source: https://github.com/nuxt-modules/leaflet/blob/main/docs/components/l-icon.md

This example demonstrates using the LIcon component to display a marker with custom text content. The text "★" and "Hello, Map!" are directly embedded within the LIcon tag, which is rendered as a div-based icon. This requires the `leaflet-div-icon` CSS class for styling.

```vue
<template>
  <LMap style="height: 350px" :zoom="8" :center="[47.21322, -1.559482]">
    <LTileLayer
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      attribution="&amp;copy; <a href=\"https://www.openstreetmap.org/\">OpenStreetMap</a> contributors"
      layer-type="base"
      name="OpenStreetMap"
    />

    <LMarker :lat-lng="[47.61322, -0.519482]">
      <LIcon :icon-size="[21, 21]">★</LIcon>
    </LMarker>
    <LMarker :lat-lng="[47.61322, -0.519482]" />

    <LMarker :lat-lng="[47, -1]">
      <LIcon class-name="">Hello, Map!</LIcon>
    </LMarker>
    <LMarker :lat-lng="[47, -1]" />
  </LMap>
</template>

<script setup>
import "leaflet/dist/leaflet.css";
import { LMap, LTileLayer, LMarker, LIcon } from '@vue-leaflet/vue-leaflet';
</script>

<style>
.leaflet-div-icon {
  background: steelblue;
  color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  font-weight: bold;
  font-size: large;
  text-align: center;
  line-height: 21px;
}
</style>
```

--------------------------------

### Vue Component: LMarker with LPopup and LTooltip

Source: https://context7.com/nuxt-modules/leaflet/llms.txt

Vue component demonstrating the use of LMarker to place markers on a map. It shows how to add interactive LPopup elements that appear on click and LTooltip elements that appear on hover, along with basic marker configuration.

```vue
<template>
  <LMap :zoom="13" :center="[48.8566, 2.3522]">
    <LTileLayer
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      attribution="&copy; OpenStreetMap contributors"
    />

    <!-- Basic marker -->
    <LMarker :lat-lng="[48.8566, 2.3522]">
      <LPopup>
        <h2>Paris</h2>
        <p>Capital of France</p>
      </LPopup>
      <LTooltip>Hover for info</LTooltip>
    </LMarker>

    <!-- Marker with custom icon -->
    <LMarker
      :lat-lng="[48.8606, 2.3376]"
      :draggable="true"
      @moveend="onMarkerMove"
    >
      <LIcon
        :icon-url="'/custom-marker.png'"
        :icon-size="[32, 32]"
        :icon-anchor="[16, 32]"
      />
      <LPopup>
        <div>Draggable marker</div>
      </LPopup>
    </LMarker>
  </LMap>
</template>

<script setup lang="ts">
const onMarkerMove = (event: any) => {
  const { lat, lng } = event.target.getLatLng()
  console.log(`New position: ${lat}, ${lng}`)
}
</script>
```

--------------------------------

### Create and Manage Heat Maps with useLHeat in Vue

Source: https://context7.com/nuxt-modules/leaflet/llms.txt

This Vue.js component demonstrates how to use the `useLHeat` composable to create a heat map. It includes initialization with data points, event handling for map interactions like drawing, and dynamic updates to the heat map's radius. It relies on the `LMap` and `LTileLayer` components from Nuxt Leaflet.

```vue
<template>
  <div style="height:100vh; width:100vw">
    <h1>Heat Map Example</h1>
    <div class="controls">
      <button @click="updateRadius(25)">Small Radius</button>
      <button @click="updateRadius(50)">Medium Radius</button>
      <button @click="updateRadius(100)">Large Radius</button>
      <label>
        <input type="checkbox" v-model="enableDrawing" />
        Enable Drawing Mode
      </label>
    </div>
    <LMap
      ref="map"
      :zoom="17"
      :max-zoom="22"
      :center="[47.21322, -1.559482]"
      :use-global-leaflet="true"
      @ready="onMapReady"
    >
      <LTileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution="&copy; OpenStreetMap contributors"
        layer-type="base"
        name="OpenStreetMap"
      />
    </LMap>
  </div>
</template>

<script setup lang="ts">
import L from 'leaflet'
import { ref } from 'vue'

const map = ref(null)
const enableDrawing = ref(false)
const heatLayer = ref(null)

// Heat data points with varying intensities
const heatPoints = [
  { lat: 47.21322, lng: -1.559482, intensity: 100.0 },
  { lat: 47.21322, lng: -1.558482, intensity: 50.0 },
  { lat: 47.21322, lng: -1.557482, intensity: 25.0 },
  { lat: 47.21322, lng: -1.556482, intensity: 10.0 },
  { lat: 47.21422, lng: -1.559482, intensity: 75.0 },
  { lat: 47.21222, lng: -1.559482, intensity: 60.0 },
  { lat: 47.21322, lng: -1.560482, intensity: 40.0 },
  { lat: 47.21322, lng: -1.555482, intensity: 30.0 }
]

const onMapReady = async () => {
  // Initialize heat layer
  const heat = await useLHeat({
    leafletObject: map.value.leafletObject,
    heatPoints: heatPoints,
    radius: 50
  })

  heatLayer.value = heat

  // Enable drawing mode - add heat points on mouse move
  map.value.leafletObject.on({
    mousedown: () => {
      if (enableDrawing.value) {
        map.value.leafletObject.dragging.disable()
      }
    },
    mouseup: () => {
      map.value.leafletObject.dragging.enable()
    },
    mousemove: (e) => {
      if (enableDrawing.value && e.originalEvent.buttons === 1) {
        // Add point with medium intensity while drawing
        heat.addLatLng([e.latlng.lat, e.latlng.lng, 0.5])
      }
    }
  })

  // Add points programmatically
  setTimeout(() => {
    console.log('Adding additional heat points')
    heat.addLatLng([47.21372, -1.559532, 0.8])
    heat.addLatLng([47.21272, -1.559432, 0.6])
  }, 2000)
}

const updateRadius = (newRadius) => {
  if (heatLayer.value) {
    // Remove old layer
    map.value.leafletObject.removeLayer(heatLayer.value)

    // Create new layer with updated radius
    useLHeat({
      leafletObject: map.value.leafletObject,
      heatPoints: heatPoints,
      radius: newRadius
    }).then(heat => {
      heatLayer.value = heat
    })
  }
}
</script>

<style scoped>
.controls {
  position: absolute;
  top: 60px;
  left: 10px;
  z-index: 1000;
  background: white;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.controls button {
  margin-right: 5px;
  padding: 5px 10px;
}
</style>
```

--------------------------------

### Display Popups and Tooltips with LPopup and LTooltip - Vue

Source: https://context7.com/nuxt-modules/leaflet/llms.txt

Demonstrates how to use LPopup and LTooltip components to attach contextual information to map markers or specific locations. Supports custom HTML content and styling for popups, and permanent or styled tooltips.

```vue
<template>
  <LMap :zoom="12" :center="[40.7128, -74.0060]">
    <LTileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />

    <LMarker :lat-lng="[40.7128, -74.0060]">
      <!-- Popup with HTML content -->
      <LPopup :options="{ maxWidth: 300, className: 'custom-popup' }">
        <div>
          <h3>New York City</h3>
          <p>Population: 8.3 million</p>
          <button @click="handleClick">More Info</button>
        </div>
      </LPopup>

      <!-- Always visible tooltip -->
      <LTooltip :options="{ permanent: true, direction: 'top' }">
        NYC
      </LTooltip>
    </LMarker>

    <!-- Standalone popup at specific location -->
    <LPopup :lat-lng="[40.7589, -73.9851]">
      <p>Times Square</p>
    </LPopup>
  </LMap>
</template>

<script setup lang="ts">
const handleClick = () => {
  console.log('More info button clicked')
}
</script>
```

--------------------------------

### Vue LGridLayer Map Integration

Source: https://github.com/nuxt-modules/leaflet/blob/main/docs/components/l-grid-layer.md

Demonstrates the integration of LGridLayer within a Vue Leaflet map. It includes basic map setup with LTileLayer and configures LGridLayer to render custom tile content using the `childRender` prop. Requires leaflet and vue-leaflet packages.

```vue
<script setup>
import "leaflet/dist/leaflet.css";
import { LMap, LTileLayer, LGridLayer } from '@vue-leaflet/vue-leaflet';
import { h, onMounted } from 'vue';

onMounted(() => {
  import('leaflet')
})

const childRender = (props) => () => {
  return h(
    "div",
    { style: "border: 1px solid grey; height: 100%;" },
    `x: ${props.coords.x} y: ${props.coords.y} z: ${props.coords.z}`
  );
}
</script>

<LMap style="height: 350px" :zoom="8" :center="[47.21322, -1.559482]">
  <LTileLayer
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    attribution="&amp;copy; <a href=\"https://www.openstreetmap.org/\">OpenStreetMap</a> contributors"
    layer-type="base"
    name="OpenStreetMap"
  />
  <LGridLayer
    :child-render="childRender"
  />
</LMap>
```

--------------------------------

### Initialize Vue-Leaflet Map with Tile Layer

Source: https://github.com/nuxt-modules/leaflet/blob/main/docs/components/l-map.md

This snippet demonstrates how to set up a basic Leaflet map using the LMap and LTileLayer components from Vue-Leaflet. It includes importing necessary CSS and dynamically importing the Leaflet library. The component requires Vue.js and the vue-leaflet package. It outputs an interactive map with a tile layer.

```vue
<script setup>
import "leaflet/dist/leaflet.css";
import { LMap, LTileLayer } from "@vue-leaflet/vue-leaflet";
import { onMounted } from 'vue';

onMounted(() => {
  import('leaflet')
})
</script>

<LMap style="height: 350px" :zoom="6" :center="[47.21322, -1.559482]">
  <LTileLayer
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    attribution="&amp;copy; <a href=\"https://www.openstreetmap.org/\">OpenStreetMap</a> contributors"
    layer-type="base"
    name="OpenStreetMap"
  />
</LMap>
```

--------------------------------

### Overlay Images on Map with LImageOverlay

Source: https://context7.com/nuxt-modules/leaflet/llms.txt

Shows how to display an image layer on the map within specified geographical bounds. This snippet includes setting the image URL, defining the bounding box, and configuring opacity and z-index. It also demonstrates handling click events on the overlay.

```vue
<template>
  <LMap :zoom="13" :center="[40.7128, -74.0060]">
    <LTileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />

    <!-- Image overlay with bounds -->
    <LImageOverlay
      :url="'/overlay-image.png'"
      :bounds="[
        [40.7000, -74.0200],
        [40.7300, -73.9900]
      ]"
      :opacity="0.7"
      :z-index="1000"
      @click="onOverlayClick"
    >
      <LPopup>
        <p>Image overlay info</p>
      </LPopup>
    </LImageOverlay>
  </LMap>
</template>

<script setup lang="ts">
const onOverlayClick = (event: any) => {
  console.log('Image overlay clicked at:', event.latlng)
}
</script>
```

--------------------------------

### Bind Popups to Leaflet Markers using TypeScript

Source: https://github.com/nuxt-modules/leaflet/blob/main/docs/guide/marker-cluster.md

Access Leaflet markers created by `useLMarkerCluster` and bind popups using the Leaflet Marker API. This example requires a Leaflet map object and marker data. It iterates through the generated markers to attach popups with custom HTML content.

```typescript
const locations = [{
  name: 'Nantes',
  lat: 47.218371,
  lng: -1.553621
}];

const { markers } = useLMarkerCluster({
  leafletObject: map.value.leafletObject,
  markers: locations
});
markers.forEach(marker => {
  marker.bindPopup(L.popup().setContent('</h1>Hello marker</h1>'));
});
```

--------------------------------

### Vue Leaflet Map with Zoom Control

Source: https://github.com/nuxt-modules/leaflet/blob/main/docs/components/l-control-zoom.md

This Vue.js code snippet demonstrates how to integrate the LControlZoom component into a Leaflet map using Vue Leaflet. It includes basic map setup, a tile layer, and the zoom control positioned at the bottom right. It requires Vue.js and the '@vue-leaflet/vue-leaflet' package.

```vue
<script setup>
import "leaflet/dist/leaflet.css";
import { LMap, LTileLayer, LControlZoom } from '@vue-leaflet/vue-leaflet';
import { onMounted } from 'vue';

onMounted(() => {
  import('leaflet')
})
</script>

<LMap style="height: 350px" :zoom="8" :center="[47.21322, -1.559482]">
  <LTileLayer
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    attribution="&amp;copy; <a href=&quot;https://www.openstreetmap.org/&quot;>OpenStreetMap</a> contributors"
    layer-type="base"
    name="OpenStreetMap"
  />
  <LControlZoom position="bottomright" />
</LMap>
```