Una forma rápida y sencilla utilizar un mapa de la Ciudad Autónoma de Buenos Aires utilizando la librería Leaflet
npm install mapa-gcba
Importar los estilos del paquete
import "mapa-gcba/dist/assets/css/main.css";
Importar la clase MapaInteractivo
import "mapa-gcba/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");
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;
}
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, etc.
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 |
onClick | function | null | Callback al hacer click en el mapa |
onDblClick | function | null | Callback al hacer doble click en el mapa |
onContextMenu | function | null | Callback al hacer click secundario en el mapa |
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 |
Opción | Tipo | Default | Descripción |
---|---|---|---|
active | boolean | false | Activar reversegeocoding |
type | string | address | Definir el tipo de reverse (address o place/places) |
radius | number | 100 | Definir el radio de búsqueda cuando el type es place/places |
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.",
},
},
getParamsOptions()
Retorna las opciones del atributo params
setOptions(options)
Método Setter de los parámetros del atributo params y los métodos onClick, onDblClick y onContextMenu.
getReverseOptions()
Retorna las opciones del atributo reverseOptions
setReverseOptions(options)
Método Setter de las opciones del atributo reverseOptions
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 o texto plano.
getMap()
Retorna la instancia interna del mapa
getOptions()
Retorna las todas configuraciones del Mapa
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
Instalar el mapa-gcba:
npm install mapa-gcba
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-gcba/dist/assets/css/main.css";
import MapaInteractivo from "mapa-gcba/dist/index"
- Incializar e instanciar un objeto de la clase MapaInteractivo dentro del método ngAfterViewInit de AppComponent
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;
}
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
Instalar el mapa-gcba:
npm install mapa-gcba
En src/App.jsx
se deberá agregar las siguientes líneas de código:
- Importar la clase MapaInteractivo y sus estilos:
import "mapa-gcba/dist/assets/css/main.css";
import MapaInteractivo from "mapa-gcba/dist/index"
- Incializar e instanciar un objeto de la clase MapaInteractivo dentro de un hook useEffect en un componente React (ejemplo App):
const mapaInicializado = useRef(false);
useEffect(() => {
if (!mapaInicializado.current) {
const mapa = new MapaInteractivo("mapa");
mapaInicializado.current = 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;
}