@dmpbxo/mapa-gardenias v1.0.8
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);
});
});