Qwik — Integrar Mapas con Leaflet
Claves para entender los conceptos de como integrar mapas en Leaflet con Qwik
--
Comenzamos un nuevo artículo en el que vamos a trabajar consumiendo desde un paquete NPM para poder añadir mapas Leaflet dentro de Qwik.
Os recomiendo leer los artículos anteriores en orden y si practicáis, ¡¡mucho mejor!!.
Recordad, que si hay dudas, aun leyéndolo, podéis preguntarlo en los comentarios.
Todos los artículos publicados del curso los encontraréis en la siguiente lista que iré actualizando semanalmente y estableciendo el orden natural recomendado:
Los requisitos a tener en cuenta son los mismos que en todos los artículos y para trabajar en este artículo crearemos un nuevo proyecto en una versión más actual de la que hemos estado trabajando hasta este mismo instante.
Referencias que se usarán
- Documentación / Tutoriales oficiales de Leaflet: https://leafletjs.com/
- Documentación oficial de Qwik (crear proyecto y hook useBrowserVisibletask$) (Actualmente en la versión 1.0.0 — Mayo de 2023 utiliza ya useVisibleTask$)
- Ciclos de Vida en Qwik, muy importante para poder trabajar aquí con los conceptos más claros.
Referencias a tener en cuenta:
- Curso de Mapas Leaflet (+ de 8 horas de video bajo demanda) GRATIS
- Artículo sobre que es Leaflet y recursos.
El artículo lo vamos a dividir en estos apartados
Para poder trabajar con mapas en Qwik con Leaflet debemos de realizar unos pasos desde la creación del proyecto hasta la integración de los mapas mediante un componente y sus estilos.
- Iniciar proyecto y arrancarlo
- Primeros pasos con Leaflet: Instalaciones y primeros configuraciones
- Implementar Leaflet en Qwik
Iniciar proyecto y arrancarlo
1.- Iniciar consola en el directorio donde queremos crear el proyecto
2.- Vamos a la página oficial de Qwik
3.- Pinchamos en la opción npm create qwik@latest
4.- Ejecutamos el comando con la versión 0.18.1 que es la versión que uso en este tutorial con npm create qwik@0.18.1. Seguimos el asistente que se inicia y respondemos las siguientes preguntas:
- Y (para proceder a instalar los paquetes indispensables para crear el proyecto de Qwik)
- Introducimos el nombre de nuestro proyecto (por defecto qwik-app). Añadimos el nombre qwik-leaflet para que sea lo más descriptivo posible aunque podéis poner el que más os guste.
- Elegir tipo de proyecto: Basic App (QwikCity)
- Y a instalar las dependencias
5.- Esperamos un instante a que se instalen las dependencias.
6.- Ejecutamos npm start después de haber accedido al proyecto con cd qwik-leaflet. Comprobad que se inicia bien.
7.- Eliminamos las rutas flowers y todolist.
8.- Eliminamos el contenido de src/routes/index.tsx dejando <><h1>Leaflet en Qwik</h1></>
Con esto ya tenemos los primeros pasos dados y a partir de ahora vamos a implementar la integración de Leaflet en nuestro proyecto de Qwik.
Primeros pasos con Leaflet: Instalaciones y primeros configuraciones
Vamos a dar los pasos para integrar Leaflet en base a seguir la guía básica de arranque de Leaflet.
La guía la encontramos en el siguiente enlace, accediendo desde Leaflet => Tutorials => Start Quick guide
Instalar paquetes necesarios
Integrar la parte de Javascript mediante la instalación de paquetes que son compatibles con la versión de Qwik que estamos trabajando. Estas dependencias sería lo mismo a utilizar directamente el enlace siguiente:
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
crossorigin=""></script>Para facilitar el trabajo dentro de Qwik, añadimos los paquetes mediante la instalación:
- Paquete principal:
npm install leaflet@1.9.3 - Types para trabajar en Typescript:
npm install -D @types/leaflet@1.9.1
Implementar Leaflet
A continuación realizaremos todos los pasos hasta terminar de completar el objetivo del artículo, que será integrar mapas de Leaflet en Qwik.
Crear el componente Leaflet y añadirlo a ruta principal
Después de instalar los paquetes, vamos a src/componentsy creamos un directorio nuevo con un componente que serán los mapas mediante el fichero index.tsx
import { component$ } from '@builder.io/qwik';
export const LeafletMap = component$(() => {
// Returns JSX
return (
<p>Hola Mundo mapas</p>
);
});Implementar ese componente en src/routes/index.tsx
import { component$ } from '@builder.io/qwik';
import { LeafletMap } from '~/components/leaflet';
export default component$(() => {
return (
<>
<h1>Leaflet en Qwik</h1>
<LeafletMap />
</>
);
});Y aquí tendremos el resultado de lo aplicado:
- 1: h1 con el título Leaflet en Qwik
- 2: Componente
<LeafletMap />con su contenido.
Añadir estilos
Añadiremos los estilos de manera global con la función useStyles$ (visto más al detalle en el siguiente artículo) en el componente.
Esto lo aplicaremos para añadir lo correspondiente a lo siguiente expuesto en el tutorial con el que estamos trabajando:
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
crossorigin=""/>Para añadir los estilos, tenemos que hacer referencia al fichero leaflet.css dentro de node_modules que se encuentra en node_modules/leaflet/dist/leaflet.css y lo tenemos que importar dentro del componente donde trabajaremos con los mapas:
import { component$ } from '@builder.io/qwik';
import leafletCSS from './../../../node_modules/leaflet/dist/leaflet.css?inline`;
export const LeafletMap = component$(() => {
useStyles$(leafletCSS); // <====
return (
<p>Hola Mundo mapas</p>
);
});Al reiniciar la ejecución del proyecto, tenemos que comprobar que se cogen los estilos (dentro del apartado del componente) al usar ese componente (Inspeccionar elemento => Elementos)
1.- Seleccionamos el elemento del componente <Leaflet />
2.- Se refleja el contenido HTML
3.- Donde se están cargando los estilos, si desplegamos su contenido hay que ver algo como lo siguiente:
Si todo está ok, seguimos. Si no, comprobad bien si habéis completado correctamente los pasos y quizás necesitéis reiniciar, si no lo coge aun habiendo seguido bien los pasos.
Integrando el contenedor del mapa Leaflet
Para poder añadir la ejecución y renderizado de nuestros mapas Leaflet, debemos de tener en cuenta el tema de los ciclos de vida en Qwik, para este caso debemos de usar la función useBrowserVisibletask$, que explicaremos con más detalle en un próximo artículo y dentro de el añadiremos la creación del contenedor del mapa para visualizarlo en la ruta principal.
Lo que tenemos que saber es que esta función la usamos para implementar funcionalidades de elementos del cliente cuando el navegador esté listo y con todo cargado. Lo podremos aplicar a cambios en el DOM, integrar gráficas,…
Se usa en los siguientes casos:
- Ejecute el código ANTES de la interacción del usuario, como animaciones u otra lógica que deba ejecutarse antes de la interacción del usuario.
- Lee el DOM después de renderizar.
- Inicializar algunas animaciones.
- Trabajar con WebGL.
Si realizamos la creación del contenedor fuera de esta función sin respetar el ciclo de vida de la aplicación, no renderizará bien y nos dará error.
Lo primero añadimos en el componente LeafletMap en el apartado de JSX, el siguiente contenido HTML:
<div id="map"></div>
Quedando de la siguiente manera:
import { component$ } from '@builder.io/qwik';
import leafletCSS from './../../../node_modules/leaflet/dist/leaflet.css?inline`;
export const LeafletMap = component$(() => {
useStyles$(leafletCSS);
// Returns JSX
return (
<div id="map"></div>
);
});
Especificamos el CSS para darle unas propiedades al contenedor que se pueda visualizar, por ejemplo en el componente LeafletMap añadimos otra función useStyles$ con el siguiente contenido:
import { component$ } from '@builder.io/qwik';
import leafletCSS from './../../../node_modules/leaflet/dist/leaflet.css?inline`;
export const LeafletMap = component$(() => {
useStyles$(leafletCSS);
useStyles$(`
#map {
height: 250px;
border: 2px solid blue;
}
`);
return (
<div id="map"></div>
);
});
De esta manera podemos visualizar el contenedor con sus propiedades, aunque lo que nos queda es introducir los mapas.
Ahora se visualizará de la siguiente forma:
Lo que nos queda es crear el contenido del mapa que vamos a incrustar en ese elemento div cuyo id es map. Para poder renderizar lo siguiente, tenemos que tener el navegador preparado y eso lo hacemos añadiendo el siguiente código:
import {
component$,
useBrowserVisibleTask$, // <=== Se añade esta función (0.18.0)
useBrowserVisibleTask$, // <=== Se añade esta función (1.0.0 - Mayo 2023)
useStyles$,
} from '@builder.io/qwik';
import leafletCSS from './../../../node_modules/leaflet/dist/leaflet.css?inline';
export const LeafletMap = component$(() => {
useStyles$(leafletCSS);
useStyles$(`
#map {
height: 250px;
border: 2px solid blue;
}
`);
// Se añade lo siguiente
useBrowserVisibleTask$(() =>
console.log('Ejecutando en el navegador', new Date().toISOString())
);
// ATENCIÓN!! Si estás trabajando con la versión >= 1.0.0 debes de añadir
// en vez de useBrowserVisibleTask$ => useVisibleTask$ siendo esto:
useVisibleTask$(() =>
console.log('Ejecutando en el navegador', new Date().toISOString())
);
return <div id='map'></div>;
});Al guardar los cambios si abrimos la pestaña de la consola, nos aparecerá el mensaje Ejecutando en el navegador + la fecha y hora actual
Ahora ya tenemos todo listo y lo único que queda es cargar el mapa dentro de ese contenedor que estamos viendo con bordes azules y lo implementado de Leaflet tiene que se dentro de esta función, fundamental en el ciclo de vida de una aplicación de Qwik.
Aplicamos la creación del contenedor y le añadimos una capa, todo en la ubicación de Londres:
...
import { LatLngExpression, Map, tileLayer } from 'leaflet';
...
export const LeafletMap = component$(() => {
...
useBrowserVisibleTask$(() => {
console.log('Ejecutando en el navegador', new Date().toISOString());
// Implementación de Leaflet
// 1.- Definimos el punto central donde apuntará la cámara
const centerPosition: LatLngExpression = [
51.505,
-0.09,
] as LatLngExpression;
// 2.- Creamos el contenedor del mapa, apuntado la cámara a la posición central
const map = new Map('map').setView(centerPosition, 13);
// 3.- Añadir la capa del mapa que hemos seleccionado
tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution:
'© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
}).addTo(map);
});
return <div id='map'></div>;
});El resultado sería lo siguiente y esto es lo básico y el mínimo para arrancar un mapa Leaflet dentro de Qwik:
Llegados a este punto, hemos cumplido el objetivo de integrar los mapas de Leaflet dentro de Qwik.
¿Y ahora que podemos hacer con los mapas? ¿Cómo podemos ampliar esto con marcadores, polígonos, trazando rutas,…?
Para saber más, os invito a ampliar conocimientos con mi curso GRATUITO de mapas que tengo en Youtube
Conclusión
Llegados a este punto hemos aprendido un nuevo concepto más, sobre el uso que se le da a la función useBrowserVisibleTask$ dentro de Qwik.
En próximos artículos hablaré sobre el funcionamiento de los ciclos de vida para poder entender todo más al detalle con diferentes ejemplos.
En este artículo hemos avanzado más con Qwik y con lo que hemos aprendido hasta el momento, podríamos perfectamente crear proyectos sencillos, sin mucha lógica en el que podríamos ir practicando el tema de layouts, enrutado (Routing), componentes, estilos,… junto con la integración de mapas, que una buena idea en este momento sería crear una web de un negocio local con diferentes rutas, una plantilla y en una de las rutas que fuese contacto y ahí dentro tuviésemos un mapa para mostrar donde se encuentra nuestro negocio.
Me gustaría que en los comentarios dejaseis resultados de cosas que vayáis practicando, ya que cuanta más variedad, todo el mundo nos beneficiamos de ello.
Finalizamos el artículo y en el siguiente os voy a enseñar como trabajar con los estados dentro de un proyecto de Qwik.
Todos los artículos publicados del curso los encontraréis en la siguiente lista que iré actualizando semanalmente y estableciendo el orden natural recomendado:
Todo lo que hemos trabajado lo podéis encontrar en el siguiente repositorio con el resultado en código:
Si por casualidad no queréis trabajar descargando el fichero, os dejo el resultado con lo trabajado en este Stackblitz, para que juguéis y experimentéis:
Presencia en redes sociales
Podéis encontrarme en las siguientes redes.
