@pallari/vue-italian-address-map

Vue 3 component for Leaflet integration with ANNCSU API. Provides a visual layer for @pallari/vue-italian-address-picker or standalone usage.

Installation

npm install @pallari/vue-italian-address-map leaflet

Usage

<template>
  <AnncsuiMap 
    :client="anncsuClient"
    v-model="selectedAddress"
    :street-id="currentStreetId"
    height="500px"
    @address-selected="onMapPick"
  />
</template>

<script setup>
import { ref } from 'vue';
import { ItalianAddressClient } from '@pallari/italian-address-client';
import { AnncsuiMap } from '@pallari/vue-italian-address-map';
import '@pallari/vue-italian-address-map/dist/style.css';

const anncsuClient = new ItalianAddressClient();
const selectedAddress = ref(null);
const currentStreetId = ref(null);

const onMapPick = (addr) => {
  console.log("Selected from map:", addr);
};
</script>

Features

• Pick Mode: Safe address selection via a toggleable map control.
• Reverse Geocoding: High-performance nearest address search on map click.
• Layer Separation: Distinct visual styles for current selection, street house numbers, and search candidates.
• V-Model Support: Reactive sync with your address state.

License

MIT