@facility-latam/geoportal-components

Geoportal Components

Los componentes que se encuentran en este repositorio fueron creado con el fín de ser reutilizados en diferentes proyectos que incorporan mapas con la librería MapLibre.

Esta es la lista de componentes implementados:

• Layers
• Layer
• useLayer
• useOrderLayers
• Button
• Select

Layers

Este componente recibe una lista de objetos, donde cada objeto se corresponde con una capa. La información contenida en el objeto es la requerida por MapLibre para crear la capa. Con dicha información el componente creá una abstracción que permite desde el proyecto principal un uso más declarativo y de simple lectura como si se tratase de un simple componente de React. La alternativa era interactuar directamente con la librería MapLibre que esta diseñada para ser usada con JS y eso genera un código una lectura muy difícil.

• map: la instancia de MapLibre
• orderLayers: Opcional, defecto es True. Indica si el componente debe o no debe mantener el orden especificado en el array layers. Se recomiendo no incluirlo y mantener su valor por defecto en true.
• layers: Es una lista, donde cada item representa una capa. Cada item se correspondera con un componente Layer

nota: este componente utiliza de manera interna el componente Layer y el hook useOrderLayers

Layer

Este componente es el encargado de reflejar los cambios en la visualización de una capa. Además de manera interna utiliza el hook useLayer para la creación, destrucción de la capa. Esta pensado para ser utilizado dentro de Layers, pero puede ser utilizado de manera independiente.

Cada Layer debe contener las siguientes propiedades: - id: Identificador único de la capa. En generar puede usarse el mismo que se encuentra como id dentro de la propiedad layer. - source: La data necesaria para el origen de datos de la capa. Más información en MapLibre - Sources - layer: La data necesaria para la representación visual de la capa. Más información en MapLibre - Style Specification Es importante que es el idSource se corresponda con el id indicado dentro del source, y si bien esta permitido usar el mismo id, se recomienda usar id diferentes, con un sufijo indicando a quien corresponde. Por ejemplo idCountriesSource se corresponde con idCountriesLayer.

useLayer

Es un hook para la creación y destrucción de una capa. Permite la creación de varias capas utilizando un mismo origen de datos.

useOrderLayers

Hook que mantiene ordenadas las capas en base a la posición que ocupan en la lista enviada al componente Layers

Button

Un simple boton que contiene alguns detalles esteticos como por ejemplo una onda que comienza en el punto donde se hace click.

Select

Muestra una lista de opciones con sus etiquetas y al hacer click en una de ellas llama al evento onClick enviendo su valor.