@rural-environmental-registry/map_component 1.0.0

package/dist/types/index.d.ts

@@ -0,0 +1,162 @@
+import { MapOptions, Layer, PathOptions, ControlOptions, ControlPosition } from 'leaflet';
+import { GeoJsonObject } from 'geojson';
+import { PM } from '@geoman-io/leaflet-geoman-free';
+export type FaIconName = 'check' | 'xmark' | 'chevron-right' | 'chevron-left' | 'terminal' | 'file-lines' | 'upload' | 'pencil' | 'trash' | 'chevron-down';
+export type DrawnArea = {
+    m2: number;
+    km2: number;
+    ha: number;
+};
+export type IncrementedLayer = Layer & {
+    drawnArea: DrawnArea;
+};
+export type LayerData = {
+    baseUrl: string;
+    geojson?: GeoJsonObject | GeoJsonObject[];
+    layers: string;
+    format: string;
+    transparent: boolean;
+    name: string;
+    activeDefault: boolean;
+    cqlFilter?: string;
+    active: boolean;
+    key: string;
+    toggle: {
+        active: string;
+        inactive: string;
+    };
+    style: {
+        color: string;
+        fillColor: string;
+    };
+    options?: any;
+};
+export type GroupLayerData = {
+    name: string;
+    key: string;
+    toggle: {
+        active: string;
+        inactive: string;
+    };
+    layers: LayerData[];
+};
+export type LayersConfig = GroupLayerData[];
+export type DrawingEvent = {
+    type: 'created' | 'edited' | 'deleted';
+    layer: IncrementedLayer;
+};
+export type BaseMapLayer = {
+    name: string;
+    key: string;
+    default: boolean;
+    url: string;
+};
+export type BaseMapLayers = BaseMapLayer[];
+export type MapLayers = {
+    mapLayers: BaseMapLayers;
+    customLayers?: LayersConfig;
+};
+export type MapConfigConfig = MapOptions & {
+    id: string;
+    removeControlLayers?: boolean;
+    zoomControlPosition?: ControlPosition;
+};
+export type MapConfig = {
+    config?: MapConfigConfig;
+};
+export type LayersMenuConfig = {
+    size: 'small' | 'medium' | 'large';
+    removeMenu?: boolean;
+};
+export type MemorialConfig = {
+    show: boolean;
+    config?: any;
+    controlTexts?: any;
+};
+export type MapOptionsConfig = {
+    layersMenu?: LayersMenuConfig;
+    map: MapConfig;
+    drawing?: DrawingConfig;
+};
+export type DrawingConfig = DrawingControlOptions & DisplayDrawingControl;
+export type TranslationConfig = {
+    lang?: PM.SupportLocales;
+    customTexts?: PM.Translations;
+};
+export type GeomanDrawingEvent = {
+    shape: PM.SUPPORTED_SHAPES;
+    layer: Layer;
+    [key: string]: any;
+};
+export type ToolbarOptions = {
+    [K in PM.ToolbarOptions]: ControlOptions | PM.BlockPositions | boolean | PathOptions | undefined;
+};
+export type PMToolbarOptions = PM.ToolbarOptions;
+export type DrawingControlOptions = {
+    options: ToolbarOptions;
+    translation: TranslationConfig;
+};
+type DisplayDrawingControl = {
+    show: boolean;
+};
+export type PMSupportedShapes = PM.SUPPORTED_SHAPES;
+export type CoordinatePanelTexts = {
+    title?: string;
+    addPoint?: string;
+    editPoint?: string;
+    removePoint?: string;
+    actions?: string;
+    clearGeometries?: string;
+    index?: string;
+    x?: string;
+    y?: string;
+    azimuth?: string;
+    distance?: string;
+    noPoints?: string;
+    addPointTitle?: string;
+    editPointTitle?: string;
+    removePointTitle?: string;
+    clearGeometriesTitle?: string;
+    addPointDescription?: string;
+    editPointDescription?: string;
+    removePointDescription?: string;
+    clearGeometriesDescription?: string;
+    memorialDescriptive?: string;
+    referenceSystem?: string;
+    selectSystem?: string;
+    sirgas2000?: string;
+    coordinateFormat?: string;
+    selectFormat?: string;
+    decimalDegrees?: string;
+    degreesMinutesSeconds?: string;
+    manualInput?: string;
+    insertCoordinates?: string;
+    xLongitude?: string;
+    yLatitude?: string;
+    degrees?: string;
+    minutes?: string;
+    seconds?: string;
+    addedPoints?: string;
+    finalizeGeometry?: string;
+    csvUpload?: string;
+    csvFileUpload?: string;
+    dragCsvFile?: string;
+    csvColumnsInfo?: string;
+    applyCsvCoordinates?: string;
+    placeholderLongitude?: string;
+    placeholderLatitude?: string;
+    placeholderAzimuth?: string;
+    placeholderDistance?: string;
+    placeholderDegrees?: string;
+    placeholderMinutes?: string;
+    placeholderSeconds?: string;
+    errorXYRequired?: string;
+    errorDegreesRequired?: string;
+    errorFirstRowXY?: string;
+    errorProvideCoordinatesOrAzimuthDistance?: string;
+};
+export type DescriptiveMemorial = {
+    show: boolean;
+    customTexts?: CoordinatePanelTexts;
+};
+export {};

package/dist/utils/CoordinateConverter.d.ts

@@ -0,0 +1,16 @@
+export declare class CoordinateConverter {
+    static dmsToDD(degrees: number, minutes: number, seconds: number): number;
+    static ddToDMS(decimalDegrees: number): {
+        degrees: number;
+        minutes: number;
+        seconds: number;
+    };
+    static dmmToDD(degrees: number, decimalMinutes: number): number;
+    static ddToDMM(decimalDegrees: number): {
+        degrees: number;
+        decimalMinutes: number;
+    };
+    static formatDMS(degrees: number, minutes: number, seconds: number): string;
+    static formatDMM(degrees: number, decimalMinutes: number): string;
+    static formatDD(decimalDegrees: number): string;
+}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@rural-environmental-registry/map_component",
+  "version": "1.0.0",
+  "description": "Map component for Vue.js applications",
+  "main": "dist/index.mjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vite build && tsc",
+    "prepublishOnly": "npm run build"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "keywords": ["vue", "map", "leaflet", "component", "dataprev"],
+  "author": "Dataprev",
+  "license": "GPL-3.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Rural-Environmental-Registry/map_component.git",
+    "directory": "map_component"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "6.7.2",
+    "@fortawesome/free-solid-svg-icons": "6.7.2",
+    "@fortawesome/vue-fontawesome": "3.0.8",
+    "@geoman-io/leaflet-geoman-free": "2.18.3",
+    "@turf/turf": "7.2.0",
+    "element-plus": "2.9.3",
+    "leaflet": "1.9.4",
+    "leaflet-draw": "1.0.4",
+    "papaparse": "5.5.3"
+  },
+  "devDependencies": {
+    "@types/geojson": "7946.0.16",
+    "@types/leaflet": "1.9.16",
+    "@types/papaparse": "5.3.16",
+    "@vitejs/plugin-vue": "5.2.1",
+    "typescript": "5.7.3",
+    "unplugin-element-plus": "0.9.1",
+    "vite": "6.3.5",
+    "vue": "3.5.17"
+  }
+}

package/readme.md

@@ -0,0 +1,215 @@
+# RER - Map Component
+
+[![Vue.js](https://img.shields.io/badge/Vue.js-3-green.svg)](https://vuejs.org/) [![TypeScript](https://img.shields.io/badge/TypeScript-5-blue.svg)](https://www.typescriptlang.org/) [![Leaflet](https://img.shields.io/badge/Leaflet-1.9-green.svg)](https://leafletjs.com/) [![Vite](https://img.shields.io/badge/Vite-5-purple.svg)](https://vitejs.dev/)
+
+## 📑 Table of Contents
+
+- [🎯 About the Module](#-about-the-module)
+- [Installation](#installation)
+- [Usage](#usage)
+- [Properties](#properties)
+- [Events](#events)
+- [Instances](#instances)
+- [Side Menu Injection](#side-menu-injection)
+- [Configuration Examples](#configuration-examples)
+- [Technologies](#technologies)
+- [License](#license)
+- [Contribution](#contribution)
+- [Support](#support)
+
+---
+
+## 🎯 About the Module
+
+The **RER** (Rural Environmental Registry) is a modern, comprehensive solution for managing rural environmental registrations, developed as a digital public good. This project provides a robust and scalable architecture for systems that register rural land properties with support for geospatial data. The **Map Component** module is part of RER project as a submodule from it.
+
+It is an interactive map component for Vue.js applications that allows customization of layers, map options, and drawing tools. The library is based on Leaflet.js and offers support for multiple layers, custom drawing tools, and an adaptable interface.
+
+*Note: This library can only be used for Vue.js 3 projects.*
+
+### Main Features
+
+- 🗺️ Interactive map based on Leaflet.js
+- 🎨 Customizable layers and drawing tools
+- 🔧 Flexible configuration options
+- 📐 Drawing and measurement tools
+- 🌐 Support for WMS, GeoJSON, and custom vectors
+- 📍 Side menu content injection
+- ⚡ Built with Vite for optimal performance
+
+---
+
+## Installation
+
+### Prerequisites
+
+- **Node.js** version 18+
+- **Vue.js** version 3
+- **Git** credentials for private repository access
+
+### Global Registration
+
+In your `main.js`:
+
+```js
+import { createApp } from 'vue'
+import MapaDpg from 'node_modules/dpg-mapa/dist'
+
+const app = createApp({})
+
+app.component('MapaDpg', MapaDpg)
+
+app.mount('#app')
+```
+
+### Local Registration
+
+```vue
+<template>
+  <MapaDpg />
+</template>
+
+<script setup>
+  import MapaDpg from 'node_modules/dpg-mapa/dist'
+</script>
+```
+
+### Import Styles
+
+In both cases, you need to import the map styles:
+
+```css
+@import 'node_modules/dpg-mapa/dist/index.css';
+```
+
+---
+
+## Usage
+
+The component accepts parameters and emits events. It also exposes instances through refs.
+
+```vue
+<MapaDpg
+  :layers="layers"
+  :options="options"
+  :showLoading="showLoading"
+  :disableLoading="disableLoading"
+  :descriptiveMemorial="descriptiveMemorial"
+  @onChildLayerToggle="onChildLayerToggle"
+  @onGroupLayerToggle="onGroupLayerToggle"
+  @onDrawing="onDrawing"
+  ref="mapRef"
+/>
+```
+
+```js
+const mapRef = ref(null)
+
+const mapRefInstances = computed(() => {
+  return {
+    map: mapRef.value?.map,
+    layerControl: mapRef.value?.layerControl,
+    drawItemsGroup: mapRef.value?.drawItemsGroup,
+    leaflet: mapRef.value?.leaflet
+  }
+})
+```
+
+---
+
+## Properties
+
+| Name                | Type                                      | Required | Description                                                                  |
+|---------------------|-------------------------------------------|----------|------------------------------------------------------------------------------|
+| showLoading         | boolean                                   | Optional | Controls the visibility of the loading animation                             |
+| layers              | [MapLayers](docs/properties.md)           | Optional | Defines base layers and custom layers                                        |
+| options             | [MapOptionsConfig](docs/properties.md)    | Optional | Defines map settings, layer menu, and drawing tools                          |
+| disableLoading      | boolean                                   | Optional | Disables the loading animation                                               |
+| descriptiveMemorial | [DescriptiveMemorial](docs/properties.md) | Optional | Controls the visibility of the descriptive memorial                          |
+
+For detailed property documentation, see [Properties Documentation](docs/properties.md).
+
+---
+
+## Events
+
+| Name               | Description                                                                                                                                 |
+|--------------------|---------------------------------------------------------------------------------------------------------------------------------------------|
+| onChildLayerToggle | Emits data of the layer added/removed from the map                                                                                          |
+| onGroupLayerToggle | Emits data of the group and its layers added/removed from the map                                                                           |
+| onDrawing          | Emits data of the drawing(s) added/removed from the map. Polygons and rectangles are incremented with the "drawnArea" property              |
+
+---
+
+## Instances
+
+| Name           | Description                                                                          |
+|----------------|--------------------------------------------------------------------------------------|
+| map            | Leaflet map. Used for map manipulation                                               |
+| layerControl   | Leaflet layer control. Used for layer manipulation                                   |
+| drawItemsGroup | Leaflet drawing group. Used for drawing manipulation                                 |
+| leaflet        | Leaflet instance                                                                     |
+
+---
+
+## Side Menu Injection
+
+These points allow consuming applications to inject their own content into the MapaDPG side menu.
+
+| Name        | ID                         | Menu Position | Description                                                         |
+|-------------|----------------------------|---------------|---------------------------------------------------------------------|
+| Top menu    | `external-id-top-menu`     | top           | Container to insert content before the layer listing                |
+| Bottom menu | `external-id-bottom-menu`  | bottom        | Container to insert content after the layer listing                 |
+
+For examples, see the guide: [Content Injection](docs/contentInjection.md)
+
+---
+
+## Configuration Examples
+
+For complete configuration examples including layers, drawing tools, and map options, see the original README or refer to the [Properties Documentation](docs/properties.md).
+
+---
+
+## Technologies
+
+- **Vue.js 3** - Progressive JavaScript framework
+- **TypeScript** - Typed superset of JavaScript
+- **Leaflet.js** - Open-source JavaScript library for interactive maps
+- **Vite** - Next generation frontend tooling
+- **Geoman** - Leaflet plugin for drawing and editing
+
+---
+
+## License
+
+This project is distributed under the [GPL-3.0](https://github.com/Rural-Environmental-Registry/core/blob/main/LICENSE).
+
+---
+
+## Contribution
+
+Contributions are welcome! To contribute:
+
+1. Fork the repository
+2. Create a branch for your feature (`git checkout -b feature/AmazingFeature`)
+3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
+4. Push to the branch (`git push origin feature/AmazingFeature`)
+5. Open a Pull Request
+
+By submitting a pull request or patch, you affirm that you are the author of the code and that you agree to license your contribution under the terms of the GNU General Public License v3.0 (or later) for this project. You also agree to assign the copyright of your contribution to the Ministry of Management and Innovation in Public Services (MGI), the owner of this project.
+
+---
+
+## Support
+
+For technical support or project-related questions:
+
+- **Documentation:** Check the individual READMEs for each submodule
+- **Issues:** Report problems via the repository issue tracker
+
+---
+
+Copyright (C) 2024-2025 Ministry of Management and Innovation in Public Services (MGI), Government of Brazil.
+
+This program was developed by Dataprev as part of a contract with the Ministry of Management and Innovation in Public Services (MGI).

package/readme.ptbr.md

@@ -0,0 +1,215 @@
+# RER - Componente de Mapa
+
+[![Vue.js](https://img.shields.io/badge/Vue.js-3-green.svg)](https://vuejs.org/) [![TypeScript](https://img.shields.io/badge/TypeScript-5-blue.svg)](https://www.typescriptlang.org/) [![Leaflet](https://img.shields.io/badge/Leaflet-1.9-green.svg)](https://leafletjs.com/) [![Vite](https://img.shields.io/badge/Vite-5-purple.svg)](https://vitejs.dev/)
+
+## 📑 Índice
+
+- [🎯 Sobre o Módulo](#-sobre-o-módulo)
+- [Instalação](#instalação)
+- [Uso](#uso)
+- [Propriedades](#propriedades)
+- [Eventos](#eventos)
+- [Instâncias](#instâncias)
+- [Injeção de Menu Lateral](#injeção-de-menu-lateral)
+- [Exemplos de Configuração](#exemplos-de-configuração)
+- [Tecnologias](#tecnologias)
+- [Licença](#licença)
+- [Contribuição](#contribuição)
+- [Suporte](#suporte)
+
+---
+
+## 🎯 Sobre o Módulo
+
+O **RER** (Registro Eletrônico Rural) é uma solução moderna e abrangente para gerenciamento de registros ambientais rurais, desenvolvida como um bem público digital. Este projeto fornece uma arquitetura robusta e escalável para sistemas que registram propriedades rurais com suporte para dados geoespaciais. O módulo **Componente de Mapa** faz parte do projeto RER como um submódulo.
+
+É um componente de mapa interativo para aplicações Vue.js que permite personalização de camadas, opções de mapa e ferramentas de desenho. A biblioteca é baseada em Leaflet.js e oferece suporte para múltiplas camadas, ferramentas de desenho personalizadas e uma interface adaptável.
+
+*Nota: Esta biblioteca só pode ser usada para projetos Vue.js 3.*
+
+### Principais Funcionalidades
+
+- 🗺️ Mapa interativo baseado em Leaflet.js
+- 🎨 Camadas e ferramentas de desenho personalizáveis
+- 🔧 Opções de configuração flexíveis
+- 📐 Ferramentas de desenho e medição
+- 🌐 Suporte para WMS, GeoJSON e vetores personalizados
+- 📍 Injeção de conteúdo no menu lateral
+- ⚡ Construído com Vite para desempenho otimizado
+
+---
+
+## Instalação
+
+### Pré-requisitos
+
+- **Node.js** versão 18+
+- **Vue.js** versão 3
+- Credenciais **Git** para acesso ao repositório privado
+
+### Registro Global
+
+No seu `main.js`:
+
+```js
+import { createApp } from 'vue'
+import MapaDpg from 'node_modules/dpg-mapa/dist'
+
+const app = createApp({})
+
+app.component('MapaDpg', MapaDpg)
+
+app.mount('#app')
+```
+
+### Registro Local
+
+```vue
+<template>
+  <MapaDpg />
+</template>
+
+<script setup>
+  import MapaDpg from 'node_modules/dpg-mapa/dist'
+</script>
+```
+
+### Importar Estilos
+
+Em ambos os casos, você precisa importar os estilos do mapa:
+
+```css
+@import 'node_modules/dpg-mapa/dist/index.css';
+```
+
+---
+
+## Uso
+
+O componente aceita parâmetros e emite eventos. Ele também expõe instâncias através de refs.
+
+```vue
+<MapaDpg
+  :layers="layers"
+  :options="options"
+  :showLoading="showLoading"
+  :disableLoading="disableLoading"
+  :descriptiveMemorial="descriptiveMemorial"
+  @onChildLayerToggle="onChildLayerToggle"
+  @onGroupLayerToggle="onGroupLayerToggle"
+  @onDrawing="onDrawing"
+  ref="mapRef"
+/>
+```
+
+```js
+const mapRef = ref(null)
+
+const mapRefInstances = computed(() => {
+  return {
+    map: mapRef.value?.map,
+    layerControl: mapRef.value?.layerControl,
+    drawItemsGroup: mapRef.value?.drawItemsGroup,
+    leaflet: mapRef.value?.leaflet
+  }
+})
+```
+
+---
+
+## Propriedades
+
+| Nome                | Tipo                                      | Obrigatório | Descrição                                                                    |
+|---------------------|-------------------------------------------|-------------|------------------------------------------------------------------------------|
+| showLoading         | boolean                                   | Opcional    | Controla a visibilidade da animação de carregamento                         |
+| layers              | [MapLayers](docs/properties.md)           | Opcional    | Define camadas base e camadas personalizadas                                 |
+| options             | [MapOptionsConfig](docs/properties.md)    | Opcional    | Define configurações do mapa, menu de camadas e ferramentas de desenho       |
+| disableLoading      | boolean                                   | Opcional    | Desabilita a animação de carregamento                                        |
+| descriptiveMemorial | [DescriptiveMemorial](docs/properties.md) | Opcional    | Controla a visibilidade do memorial descritivo                              |
+
+Para documentação detalhada das propriedades, consulte [Documentação de Propriedades](docs/properties.md).
+
+---
+
+## Eventos
+
+| Nome               | Descrição                                                                                                                                   |
+|--------------------|---------------------------------------------------------------------------------------------------------------------------------------------|
+| onChildLayerToggle | Emite dados da camada adicionada/removida do mapa                                                                                           |
+| onGroupLayerToggle | Emite dados do grupo e suas camadas adicionadas/removidas do mapa                                                                          |
+| onDrawing          | Emite dados do(s) desenho(s) adicionado(s)/removido(s) do mapa. Polígonos e retângulos são incrementados com a propriedade "drawnArea"     |
+
+---
+
+## Instâncias
+
+| Nome           | Descrição                                                                            |
+|----------------|--------------------------------------------------------------------------------------|
+| map            | Mapa Leaflet. Usado para manipulação do mapa                                         |
+| layerControl   | Controle de camadas Leaflet. Usado para manipulação de camadas                      |
+| drawItemsGroup | Grupo de desenhos Leaflet. Usado para manipulação de desenhos                       |
+| leaflet        | Instância Leaflet                                                                    |
+
+---
+
+## Injeção de Menu Lateral
+
+Estes pontos permitem que aplicações consumidoras injetem seu próprio conteúdo no menu lateral do MapaDPG.
+
+| Nome        | ID                         | Posição no Menu | Descrição                                                           |
+|-------------|----------------------------|-----------------|---------------------------------------------------------------------|
+| Menu topo   | `external-id-top-menu`     | topo            | Container para inserir conteúdo antes da listagem de camadas        |
+| Menu rodapé | `external-id-bottom-menu`  | rodapé          | Container para inserir conteúdo após a listagem de camadas          |
+
+Para exemplos, consulte o guia: [Injeção de Conteúdo](docs/contentInjection.md)
+
+---
+
+## Exemplos de Configuração
+
+Para exemplos completos de configuração incluindo camadas, ferramentas de desenho e opções de mapa, consulte o README original ou a [Documentação de Propriedades](docs/properties.md).
+
+---
+
+## Tecnologias
+
+- **Vue.js 3** - Framework JavaScript progressivo
+- **TypeScript** - Superconjunto tipado de JavaScript
+- **Leaflet.js** - Biblioteca JavaScript de código aberto para mapas interativos
+- **Vite** - Ferramenta de frontend de próxima geração
+- **Geoman** - Plugin Leaflet para desenho e edição
+
+---
+
+## Licença
+
+Este projeto é distribuído sob a [GPL-3.0](https://github.com/Rural-Environmental-Registry/core/blob/main/LICENSE).
+
+---
+
+## Contribuição
+
+Contribuições são bem-vindas! Para contribuir:
+
+1. Faça um fork do repositório
+2. Crie uma branch para sua funcionalidade (`git checkout -b feature/FuncionalidadeIncrivel`)
+3. Faça commit das suas alterações (`git commit -m 'Adiciona FuncionalidadeIncrivel'`)
+4. Faça push para a branch (`git push origin feature/FuncionalidadeIncrivel`)
+5. Abra um Pull Request
+
+Ao enviar um pull request ou patch, você afirma que é o autor do código e que concorda em licenciar sua contribuição sob os termos da Licença Pública Geral GNU v3.0 (ou posterior) para este projeto. Você também concorda em atribuir os direitos autorais de sua contribuição ao Ministério da Gestão e da Inovação em Serviços Públicos (MGI), proprietário deste projeto.
+
+---
+
+## Suporte
+
+Para suporte técnico ou questões relacionadas ao projeto:
+
+- **Documentação:** Consulte os READMEs individuais de cada submódulo
+- **Issues:** Reporte problemas através do rastreador de issues do repositório
+
+---
+
+Copyright (C) 2024-2025 Ministério da Gestão e da Inovação em Serviços Públicos (MGI), Governo do Brasil.
+
+Este programa foi desenvolvido pela Dataprev como parte de um contrato com o Ministério da Gestão e da Inovação em Serviços Públicos (MGI).