¿Qué es y para que sirve la API de JavaScript de ArcGIS?
La API de JavaScript de ArcGIS es una herramienta de desarrollo web creada por Esri que permite crear mapas interactivos y aplicaciones GIS directamente en el navegador usando el lenguaje de programación JavaScript.
Esta API es parte de la plataforma ArcGIS y se conecta fácilmente con los servicios web de Esri, como Map Services, Feature Services, capas base, geocodificación, análisis espacial y mucho más.
Con esta API, puedes:
- Mostrar mapas interactivos con zoom, capas y leyendas.
- Agregar datos espaciales desde ArcGIS Online o ArcGIS Server.
- Crear aplicaciones personalizadas para análisis, filtros, consultas o visualización de datos geográficos.
- Controlar el estilo, el comportamiento y la funcionalidad del visor web.
- Integrar widgets como búsqueda, leyenda, medición, filtros, capas, impresión, etc.
¿Por qué es importante?
Es muy usada por desarrolladores, gobiernos y empresas que quieren publicar visores web sin depender de software de escritorio. Lo mejor: funciona directamente en el navegador, sin necesidad de instalar nada en el equipo del usuario final. Utiliza las siguientes tecnologías:
- JavaScript: para la lógica de la aplicación.
- HTML y CSS: para estructurar y diseñar la interfaz.
- Servicios web de Esri: como ArcGIS Online, ArcGIS Enterprise, GeoServer si está configurado, etc.
Ahora si empecemos con el proyecto.
1. Abrir y configurar Sublime Text
Sublime Text es un editor de texto muy útil para escribir código limpio y ordenado. Lo puedes descargar desde este link.
Ahora haz lo siguiente:
- Crea una carpeta llamada
ArcGIS_Simbologia. - Dentro de esa carpeta, crea tres archivos (en el ejemplo del video los llame ClasificacionMexico):
index.html→ estructura de la página.style.css→ estilos del visor.main.js→ funcionalidad del mapa.
Esto nos permite separar la estructura, el diseño y el comportamiento del visor de forma profesional.
2. Crear el HTML (index.html)
Este archivo define la estructura del visor web. Importamos la API de ArcGIS y conectamos nuestros archivos CSS y JS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mexico - Clasificacion 4.2</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css"/>
<link rel="stylesheet" type="text/css" href="ClasificacionMexico.css">
</head>
<body>
<div id="viewDiv">
<script src="https://js.arcgis.com/4.20/"></script>
<script type="text/javascript" src="ClasificacionMexico.js"></script>
</body>
</html>
3. Consultar la documentación oficial
Accede a la documentación oficial de la API para:
- Ver ejemplos.
- Consultar los módulos (
FeatureLayer,ClassBreaksRenderer,Legend, etc.). - Aprender nuevas funciones.
Es como nuestra “enciclopedia” de desarrollo con ArcGIS JS.
4. Crear el CSS (style.css)
Estilo básico para que el mapa ocupe toda la pantalla del navegador.
html, body, #viewDiv{
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
5. Crear el JS (main.js)
Aquí empieza la parte más divertida: el código que da vida al mapa.
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/widgets/Legend"
], function (Map, MapView, FeatureLayer, Legend) {
// Definir la simbologia para los 4 intervalos de clasificacion
const menos1000 = {
type: "simple-fill",
color: "#fffcd4",
style: "solid",
outline: {
width: 0.2,
color: [255, 255, 255, 0.5]
}
};
const menos9000 = {
type: "simple-fill",
color: "#b1cdc2",
style: "solid",
outline: {
width: 0.2,
color: [255, 255, 255, 0.5]
}
};
const mas9000 = {
type: "simple-fill",
color: "#38627a",
style: "solid",
outline: {
width: 0.2,
color: [255, 255, 255, 0.5]
}
};
const mas28000 = {
type: "simple-fill",
color: "#0d2644",
style: "solid",
outline: {
width: 0.2,
color: [255, 255, 255, 0.5]
}
};
// Definicion de intervalos segun los valores del campo FAGE05_CY (Poblacion de Mujeres mayores a 60 años)
const renderer = {
type: "class-breaks",
field: "FAGE05_CY",
legendOptions: {
title: "Total mujeres mayores a 60 años"
},
defaultSymbol: {
type: "simple-fill",
color: "black",
style: "backward-diagonal",
outline: {
width: 0.5,
color: [50, 50, 50, 0.6]
}
},
defaultLabel: "No data",
classBreakInfos: [
{
minValue: 0,
maxValue: 1000,
symbol: menos1000,
label: "< 1000"
},
{
minValue: 1000,
maxValue: 9000,
symbol: menos9000,
label: "1000 - 9000"
},
{
minValue: 9000,
maxValue: 28000,
symbol: mas9000,
label: "9000 - 28000"
},
{
minValue: 28000,
maxValue: 110000,
symbol: mas28000,
label: "> 28000"
}
]
};
// Agregar el layer con sus propiedades
const mexicoLayer = new FeatureLayer({
url:
"https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/Mexico_demographics/FeatureServer/0",
title: "Población de Mujeres > 60 años en México 2014",
renderer: renderer,
popupTemplate: {
title: "En {NAME}",
content:
"De {TOTPOP_CY} mujeres en total para 2014, habían {FAGE05_CY} mujeres mayores a 60 años en el país de Mexico"
},
//definitionExpression: "TOTPOP_CY < 100000",
opacity: 0.9
});
const map = new Map({
basemap: "gray-vector",
layers: [mexicoLayer]
});
const view = new MapView({
container: "viewDiv",
map: map,
center: [-100.971851,21.383222],
zoom: 5
});
// Agregar leyenda
const legend = new Legend({
view: view
});
view.ui.add(legend, "bottom-left");
});
El código completo lo encuentras aquí.
Como ves es sencillo crear un mapa con esta libreria y con la documentación podras implementar varias funcionalidades.
En este video podras ver el paso a paso:
