mapa-interactivo-geo2
TypeScript icon, indicating that this package has built-in type declarations

0.1.54 • Public • Published

Mapa Interactivo

Una forma rápida y sencilla utilizar un mapa de la Ciudad Autónoma de Buenos Aires utilizando la librería Leaflet

Instalación

npm install mapa-interactivo-geo2

Configuración

Estilos

Importar los estilos del paquete

import "mapa-interactivo-geo2/dist/assets/css/main.css";

Crear una instancia de la clase MapaInteractivo

Importar la clase MapaInteractivo

import "mapa-interactivo-geo2/dist/index";

El constructor del MapaInteractivo recibe un parámetro obligatorio, que representa el id del elemento HTML donde se insertará el mapa.

const map = new MapaInteractivo("mapa");

Etiqueta HTML contenedora de mapa

Crear la etiqueta donde se insertará el mapa (el valor de id debe coincidir con el parámetro obligatorio del paso anterior). Además, se deberán agregar los estilos de altura y ancho (height y width) para poder ver el mapa.

<div id="mapa"></div>
#mapa {
  height: 500px;
  width: 800px;
}

Mapa Interactivo

Opciones

La instancia del MapaInteractivo puede recibir un segundo parámetro options que permite definir ciertas configuraciones y funcionalidades del mapa. Estas opciones se dividen en params, language, texts, reverseOptions, showScaleControl y showLoadingControl.

Parámetro options:

Opción Tipo Default Descripción
params object Ver sección params Definir las caraceterísticas del mapa
reverseOptions object Ver sección reverse Definir las opciones para el reversegeocoding
language string es Definir idioma (es o en)
texts object Ver sección texts Definir los mensajes a mostrar
showScaleControl boolean false Mostrar escala de mapa
showLoadingControl boolean false Mostrar mensaje de carga

Opción params

Opción Tipo Default Descripción
center Array [-34.606, -58.435] Centro del mapa
zoom Number 12 Nivel de zoom
zoomControl Boolean true Control de zoom
dragging Boolean true Arrastre de mapa
scrollWheelZoom Boolean true Zoom con rueda
attributionControl Boolean false Control de atribución
doubleClickZoom Boolean false Zoom con doble click
touchZoom Boolean true Zoom táctil
tap Boolean true Tocar para zoom
attributionControl Boolean false Control de atribución
minZoom Number - Zoom mínimo permitido
maxZoom Number - Zoom máximo permitido
onClick function null Callback al hacer click en el mapa
onDblClick function null Callback al hacer doble click en el mapa

Opción reverseOptions

Opción Tipo Default Descripción
active boolean false Activar reversegeocoding
type string address Definir el tipo de reverse (address o places)
radius number 100 Definir el radio de búsqueda cuando el type es places

Opción texts

Valores por defecto para el objeto texts

texts: {
    es: {
      loadingLayers: "Cargando capas...",
      loadingMaps: "Cargando Mapa Base...",
      loadingInformation: "Cargando información...",
      errorLoadingInformation:
        "Se produjo un error al acceder a la información. Reintente más tarde.",
    },
    en: {
      loadingLayers: "Loading layers...",
      loadingMaps: "Loading Base Map...",
      loadingInformation: "Loading information...",
      errorLoadingInformation: "An error ocurred. Please try again later.",
    },
  },

Métodos

getParamsOptions()

Retorna las opciones del atributo params

setParamsOptions(options)

Método Setter de los parámetros de params.

getReverseOptions()

Retorna las opciones de reverseOptions

setReverseOptions(options)

Método Setter de las opciones de reverseOptions

setLanguage(language)

Método Setter del idioma para los mensajes de texts. Valores permitidos para language: "en" o "es"

setMarkerView(lat, lng, popup?) Este método permite georeferenciar y agregar un marcador de acuerdo a las coordenadas ingresadas. La opción popup permite agregar un cuadro de diálogo informativo en formato html.

getMap()

Retorna la instancia interna del mapa

getOptions()

Retorna las todas configuraciones del Mapa

cleanMap() Limpia los marcadores del Mapa

Ejemplos

Mapa Interactivo en Angular

Creación del Proyecto

Utilizar Angular CLI para crear un nuevo proyecto. Abrir una consola de comando y ejecutar:

ng new map-app

Seguir las instrucciones para configurar el proyecto. Una vez creado, navegar hacia la raiz del proyecto:

cd map-app

Instalación del Paquete

Instalar el mapa-mapainteractivo-geo2:

npm install mapa-mapainteractivo-geo2

Importación e Instancia del MapaInteractivo

En src/app/app.component.ts se deberá agregar las siguientes líneas de código:

  • Importar la clase MapaInteractivo y sus estilos:
import "mapa-interactivo-geo2/dist/assets/css/main.css";
import MapaInteractivo from "mapa-interactivo-geo2/dist/index"
  • Incializar e instanciar un objeto de la clase MapaInteractivo dentro del método ngAfterViewInit
ngAfterViewInit() {
    this.map = new MapaInteractivo("mapa");
  }

En src/app/app.component.html se deberá agregar el la etiqueta div con su correspondiente id:

<div style="text-align:center">
  <h1> {{ title }} </h1>
  <div id="mapa"></div>
</div>

En src/app/app.component.css se deberá agregar estilos para visualizar el mapa:

#mapa {
    height: 500px;
    width: 800px;
    margin: 0 auto;
}

Mapa Interactivo en ReactJs

Creación del Proyecto

Crear un proyecto con CRA o Vite. Abrir una consola de comando y ejecutar:

npm create vite@latest map-app

Seguir las instrucciones para configurar el proyecto. Una vez creado, navegar hacia la raiz del proyecto:

cd map-app

Instalación del Paquete

Instalar el mapa-mapainteractivo-geo2:

npm install mapa-mapainteractivo-geo2

Importación e Instancia del MapaInteractivo

En src/App.jsx se deberá agregar las siguientes líneas de código:

  • Importar la clase MapaInteractivo y sus estilos:
import "mapa-interactivo-geo2/dist/assets/css/main.css";
import MapaInteractivo from "mapa-interactivo-geo2/dist/index"
  • Incializar e instanciar un objeto de la clase MapaInteractivo dentro de un hook useEffect en un componente React (ejemplo App):
  let mapaInicializado = false;
  useEffect(() => {
    if (!mapaInicializado) {
      new MapaInteractivo("mapa"); 
      mapaInicializado = true;
    }
  }, []);

En el return del componente, se deberá agregar una etiqueta div con su correspondiente id:

return (
    <>
      <h1>Mapa Interactivo</h1>
      <div id="mapa"></div>
    </>
  );

En App.css se deberá agregar estilos para visualizar el mapa:

#mapa {
    height: 500px;
    width: 800px;
    margin: 0 auto;
}

Readme

Keywords

Package Sidebar

Install

npm i mapa-interactivo-geo2

Weekly Downloads

16

Version

0.1.54

License

ISC

Unpacked Size

66.2 kB

Total Files

27

Last publish

Collaborators

  • ppagano91