Leaflet

This feature provides an integration of the Leaflet library for interactive maps within the application. It includes services for managing map layers, formatting, and UI components to enhance the user experience when working with maps.

Public API

All public exports should be imported from @/features/leaflet. This module is designed to be a standalone library that can be reused across the application.

Basic Usage

import {
  LeafletProvider,
  LeafletMap,
  LeafletMarker,
  LeafletRectangle,
  LeafletVue,
  leafletConfig,
  DefaultLeafletConfig,
} from '@/features/leaflet';

Components

Root Provider:

• LeafletProvider - Root provider that sets up the Leaflet context

Features:

• LeafletMarker - Point marker on the map
• LeafletCircle - Circle shape
• LeafletRectangle - Rectangle shape
• LeafletPolyline - Polyline/path
• LeafletPolygon - Polygon shape
• LeafletCanvas - Canvas-based rendering
• LeafletCanvasGL - WebGL-based rendering

Controls (Standard):

• LeafletZoomControl - Standard zoom in/out buttons
• LeafletLayersControl - Layer selector control

Controls (Measurement):

• LeafletMeasureControl - Base measurement tool
• LeafletPolylineRulerControl - Measure distances (polyline)
• LeafletPolygonRulerControl - Measure areas (polygon)

Controls (Editor):

• LeafletEditorControl - Main editor toolbar
• LeafletAddMarkerTool - Add marker tool
• LeafletAddCircleTool - Draw circle tool
• LeafletAddRectTool - Draw rectangle tool
• LeafletAddPolylineTool - Draw polyline tool
• LeafletAddPolygonTool - Draw polygon tool
• LeafletDirectSelectTool - Select/edit existing features

Styles:

• LeafletStyles - Configure Leaflet styles with Tailwind CSS classes

Services

Access services through the LeafletVue instance:

import { LeafletVue } from '@/features/leaflet';

// Format distances
LeafletVue.formatter.formatDistance(1500, 'metric');

// Measure features
LeafletVue.measures.getFeatureArea(polygon);

// GeoJSON utilities
LeafletVue.geoJson.parseGeoJSON(data);

// Pixel calculations
LeafletVue.pixels.latLngToPixels(latLng, zoom);

// Utility functions
LeafletVue.utils.calculateBounds(coordinates);

// UI interactions
LeafletVue.ui.showTooltip(position, message);

Configuration

import { leafletConfig, DefaultLeafletConfig } from '@/features/leaflet';

// Use default configuration
const config = leafletConfig();

// Override specific values
const customConfig = leafletConfig({
  styles: {
    features: {
      rectangle: {
        shape: {
          color: '#FF5733',
          fillOpacity: 0.3,
        },
      },
    },
  },
});

Types

import type {
  LeafletGlobalConstants,
  LeafletComponentType,
  MeasureUnit,
  LatLngTuple,
  LngLatTuple,
  HandleType,
} from '@/features/leaflet';

Dependencies

• Leaflet: A leading open-source JavaScript library for mobile-friendly interactive maps.
• Turf.js: A JavaScript library for advanced geospatial analysis.
• GeoJSON.js: A format for encoding a variety of geographic data structures.

Services

• LeafletLayersService: Manages the registration and retrieval of map layers.
• LeafletFormatterService: Provides formatting utilities for map data.
• LeafletUiService: Handles UI components and interactions for Leaflet maps.
• LeafletMeasuresService: Offers measurement tools for distances and areas on the map.
• LeafletGeoJsonService: Manages GeoJSON data integration with Leaflet maps.
• LeafletPixelsService: Provides utilities for pixel-based calculations on the map.