npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@facility-latam/geoportal-components

v1.2.0

Published

small react components styled with styled-components

Downloads

3

Readme

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.