Introducción

Comenzar el viaje de aprender programación webGIS puede ser un desafío, especialmente si somos nuevos en el mundo de HTML, CSS y JavaScript. Afortunadamente, con herramientas como Replit podemos empezar a aprender de una forma sencilla y directa. Este artículo lo guiará a través de los pasos básicos para crear una aplicación WebGIS simple usando MapTiler. Con este tutorial aprenderemos a crear mapas interactivos a los que se puede acceder desde cualquier lugar, simplemente usando nuestro navegador.

Paso 1. Crea una cuenta y un proyecto en Replit

1. Regístrate para Replit:

• Abrir Replit
• Haz clic en el botón "Registrarse" en la esquina superior derecha.
• Seleccione el método de registro deseado (Google, GitHub o correo electrónico).
• Después de un registro exitoso, seremos dirigidos al panel de Replit.

2. Creando un nuevo proyecto:

• En el panel de Replit, haz clic en el botón "Crear respuesta".
• En la sección Plantilla, seleccione "HTML, CSS, JS".
• Nombre nuestro proyecto, por ejemplo "WebGIS-Simple".
• Haga clic en "Crear respuesta" para crear un proyecto. Una vez creado el proyecto, veremos tres archivos principales: index.html, style.css y script.js. Estos archivos se utilizarán para crear nuestra página web.

Paso 2: Configurar la estructura HTML

1. Comprensión de la estructura HTML básica:

• Abra el archivo index.html en Replit.
• index.html es un archivo que determina la estructura y contenido básico de nuestras páginas web.

2. Agregar elementos al mapa:

• Reemplace el contenido de index.html con el siguiente código:

    
    
    
    
    
    


    
WebGIS Sederhana Menggunakan MapTiler
    

    

Explicación:

• : Muestra el título de la página.

• : El lugar donde se mostrará el mapa.
• Maplibre GL: Se utiliza para mostrar mapas de MapTiler.



Paso 3: Agregar estilos con CSS

1. Agregar CSS para la vista de mapa:

• Abre el archivo style.css.
• Reemplace el contenido del archivo style.css con el siguiente código:

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: Arial, sans-serif;
}

#map {
  width: 100%;
  height: 500px;
  margin-top: 20px;
}

h1 {
  text-align: center;
  color: #333;
}

Explicación:

• body, html: establece márgenes y relleno para que el mapa pueda usar toda la pantalla.
• #map: establece el tamaño del mapa en ancho completo y 500 px de alto.
• h1: establece la visualización del título en el medio de la página.



Nota: esta sección de estilo se puede ajustar según su propio diseño y necesidades consultando el código de estilo aquí W3 Schools

Paso 4: Integrar MapTiler con JavaScript

1. Obteniendo clave API de MapTiler

• Abrir MapTiler.
• Haz clic en "Registrarse" en la esquina superior derecha.
• Rellene el formulario de registro con correo electrónico o regístrese utilizando una cuenta de Google.
• Después de registrarnos, se nos dirigirá al panel de MapTiler.



2. Obteniendo clave API:

• En el panel de MapTiler, haz clic en la pestaña "Claves API".
• Verá la clave API predeterminada proporcionada por MapTiler.
• Si desea crear una nueva clave API, haga clic en el botón "Crear una nueva clave".
• Asigne un nombre a la nueva clave API, por ejemplo "WebGIS-Simple" y haga clic en "Crear".
• Copia la clave API que acabamos de crear. Esta clave API se utilizará para acceder al mapa de nuestro proyecto.

3. Creando un mapa interactivo:

• Abra el archivo script.js.
• Agregue el siguiente código en script.js:

const map = new maplibregl.Map({
  container: 'map', // ID dari elemen div tempat peta akan dirender
  style: 'https://api.maptiler.com/maps/basic/style.json?key=YOUR_MAPTILER_API_KEY', // URL ke gaya peta dari MapTiler dan bagian API KEY masukan API KEY anda
  center: [106.8272, -6.1751], // Koordinat pusat peta (Jakarta)
  zoom: 10 // Level zoom peta
});

Explicación:

• contenedor: se refiere al elemento con el mapa de identificación en index.html.
• estilo: URL al estilo del mapa de MapTiler. Reemplace YOUR_MAPTILER_API_KEY con su clave API.
• center: Coordenadas geográficas del centro del mapa (Yakarta).
• zoom: el nivel de zoom inicial del mapa.



4. Agregar marcadores al mapa (opcional):

• Si desea agregar un marcador al mapa, agregue el siguiente código en inicialización del mapa.
• El marcador se mostrará en las coordenadas especificadas.

const marker = new maplibregl.Marker()
  .setLngLat([106.8272, -6.1751]) // Koordinat Jakarta
  .addTo(map);



Paso 5: Ejecutar y probar el proyecto

1. Proyecto en ejecución:

• Una vez que hayamos terminado de escribir el código, haga clic en el botón "Ejecutar" en Replit. Replit abrirá una página web que contiene el mapa que hemos creado. Observando los resultados:



• Se mostrará un mapa interactivo de MapTiler en la página web.
• podemos acercar, alejar y desplazar el mapa para ver diferentes partes.



Aquí tenéis los resultados del Replit que hemos realizado:

Hemos completado este sencillo proyecto WebGIS y puedes ver los resultados en el siguiente enlace Simple WebGIS Source.

Este proyecto muestra cómo utilizar HTML, CSS, JavaScript y la API MapTiler para crear una aplicación WebGIS sencilla. Puedes probarlo tú mismo o utilizarlo como base para un proyecto más complejo.

Al seguir estos pasos, hemos creado con éxito una aplicación WebGIS simple utilizando Replit y MapTiler. Esta guía está diseñada para que los principiantes comprendan los conceptos básicos del desarrollo web con HTML, CSS y JavaScript mientras aprenden a crear mapas interactivos.

Ánimo y gracias, ¡espero que esto sea útil!