mapa-interactivo-geo2

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-gcba

Configuración

Estilos

Importar los estilos del paquete

import "mapa-gcba/dist/assets/css/main.css";

Crear una instancia de la clase MapaInteractivo

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. Además se deberán agregar estilos (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 reversgeocoding
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.657, -58.678]	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

Ejemplo