mapa-interactivo-geo2
v0.1.54
Published
Mapa Interactivo
Downloads
44
Readme
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;
}