@dmpbxo/mapa-gardenias
v1.0.8
Published
El mapa las gardenias muestra un canvas del proyecto de Inmobitec
Downloads
10
Readme
Mapa Gardenias
Mapa Gardenias es un proyecto que muestra el area en 3D del proyecto Gardenias. En este documento se explicará la forma de usar el paquete.
🏗 Instalación
npm i @dmpbxo/mapa-gardenias🏁 Getting Started
Plantilla
Solo necesitamos un elemento div con un id donde se renderizará el mapa.
Y tambien es importante obtener el css de mapbox, para ello se deberá de establecer <link href='https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css' rel='stylesheet' />
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mapa</title>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css' rel='stylesheet' />
</head>
<body>
<div id="map" style="width:100%; height: 100vh;"></div>
<script src="main.js"></script>
</body>
</html>
Instancia
El paquete usa mapbox, por tanto, se deberá de registrar una cuenta en mapbox. Y deberá de generar un token y un estilo para el canvas.
MapaGardenias necesita de un token, style, container y onLote callback.
| Parametros | Descripción | | :------------ | :------------ | | token | Token generado en mapbox | | style | Es el codigo de estilo generado en mapbox | | container | El ID donde se generará el canvas | | onLote | Callback que se acciona cuando se selecciona un lote |
import MapaGardenias from "@dmpbxo/mapa-gardenias";
// Instancia
const mapaGardenias = new MapaGardenias({
token: "pk.eyJ1IjoiZG1wYiIsImEiOiJjbDBobHJ0eHQwOXN4M2ltbmoycm5qMzh5In0.hOuywcDqCkpcuYzEDn0nbA",
style: "mapbox://styles/dmpb/cl0key28d002q15muz3944tt7",
container: "map",
onLote: (result: any) => {
console.log(result);
},
});go
Para redirigirse hasta el centro del mapa, el método go nos ayudará para hacer ese efecto.
const go = <HTMLButtonElement>document.getElementById("go");
go.addEventListener("click", () => {
mapaGardenias.go();
});search
MapaGardenias consume la API de MiPortal para buscar un lote. Y una vez encontrado el lote, se redirigira en la ubicación exacta dentro del canvas. El método search recibe como parametros la manzana y el lote. Y devuelve una Promise
const mzInput = <HTMLInputElement>document.getElementById("mz");
const loteInput = <HTMLInputElement>document.getElementById("lote");
const search = <HTMLButtonElement>document.getElementById("search");
search.addEventListener("click", () => {
const mz = mzInput.value;
const lote = loteInput.value;
const result = mapaGardenias.search(mz, lote);
result.then((data: any) => {
console.log(data);
});
});