"Estudio del uso de la librería Arcgis JS para el análisis de datos
Georeferenciados en Mapas de tipo GIS"
por Carlos Geovanny Escobar Portillo,
Universidad Francisco Gavidia
San Salvador, El Salvador
geovannyzarco@gmail.com
Resumen
Para analizar la representación de datos en un mapa GIS
en una aplicación web, usaremos Javascript junto con la
API de ArcGIS JS. Elaboramos unos ejemplos para
cargar mapas bases desde un servidor, usaremos tres
distintas fuentes de datos: Arreglo, CSV, JSON, para
mostrarlos un mapa y analizar la información que
representan y se creara un mapa de calor integrando un
servicio de mapas online de ArcGIS con el plugin de
ESRI Leaflet.
Palabras Claves: ArcGIS, Mapa, Javascript,
Georreferenciación, Web, JSON, CSV.
Introducción
El uso de mapas para representar datos georreferenciados
no es nuevo y es un recurso muy utilizado en la mayoría
de aplicaciones, el servicio de mapa mas utilizado es el
de Google Maps por ser gratuito hasta 25000 peticiones
diarias [1]. Los mapas creados por Sistemas de
Georreferenciación (GIS), son los utilizados para
representar datos y eventos con los cuales se hacen
análisis mas exigentes. Uno de los programas mas usados
es ArcGIS Desktop y ArcGIS Server, donde los datos
son analizados por las herramientas de este programa.
En este articulo mostraremos el uso de la API de ArcGIS
JS que una librería para Javascript con las cuales
representemos y consultemos datos georreferenciados sin
la necesidad de usar el ArcGIS Desktop y con solo hacer
peticiones a nuestro servidor de mapas ArcGIS Server
podremos crear aplicaciones web que consulten y
analicen datos de una fuente como un archivo CSV o en
tiempo real con JSON.
Objetivos
El objetivo del presente artículo es mostrar como la API
de ArcGIS JS puede ayudarnos a obtener información
georreferenciada y analizarlas según nuestras
necesidades, y que los mapas pueden ser dinámicos para
los usuarios.
Metodología
Llamaremos los datos georreferenciados desde tres
distintas fuentes una será de un array ya definido en
código, un archivo CSV y Web Service que retorne
los datos en formato JSON, sabiendo que el Web
Service puede estar hecho en cualquier lenguaje de
programación. Después llamaremos las librerías
desde su página oficial, pero con una cuenta
gratuita de Developer ArcGIS se puede obtener
todos los archivos de forma gratuita.
La librería ArcGIS se puede descargar desde el sitio
oficial para desarrolladores
https://developers.arcgis.com/ debera estar registrado
para acceder o haciendo referencia al CDN :
<link rel="stylesheet"
href="https://js.arcgis.com/3.22/esri/css
/esri.css">
<script
src="https://js.arcgis.com/3.22/"></scrip
t>
La librería de ArcGis JS es Gratuita y para estos
ejemplos se usará la versión 3.22.
La sintaxis de ArcGis JS tiene como base el framework
de Javascript DOJO[2], por lo que se llama primero los
paquetes con el metodo require([]) y dentro de function
escribiremos las funciones para crear los mapas[3].
require(["esri/map", "dojo/domReady!"],
function(Map) {
var map = new Map("map", {
center: [-118, 34.5],
zoom: 8,
basemap: "topo"
});
});
<div id="viewDiv"></div>
En el ejemplo anterior llamamos al paquete “esri/map”
por lo que se tiene que escribir como parámetro de la
función principal (function(Map)), dentro de ella
crearemos un objeto Map e indicaremos el id de la
etiqueta div donde estara el mapa, el zoom, la ubicación
donde centraremos la vista y el tipo de mapa base.
Si se requiere visualizar las capas de un servicio online
se debe incorporar los paquetes
“esri/layers/ArcGISTiledMapServiceLayer” y var marker = new
construirse el objeto después del de Map y añadirlas al SimpleMarkerSymbol("solid", 15, null,
mapa base. orangeRed);
var renderer = new
SimpleRenderer(marker);
require(["esri/map","esri/layers/ArcGISTi
csv.setRenderer(renderer);
ledMapServiceLayer","dojo/domReady!"],fun
var template = new
ction(Map,ArcGISTiledMapServiceLayer){
InfoTemplate("{NUMERONOVEDAD},{NOVEDAD}")
var map = new Map("map", {
;
center: [-118, 34.5],
csv.setInfoTemplate(template);
zoom: 8,
map.addLayer(csv);
basemap: "topo"
});
Si tenemos un arreglo con los datos tendremos que
var basemap = new
incluir los siguientes paquetes
ArcGISTiledMapServiceLayer("http://192.16 "esri/layers/GraphicsLayer", "esri/geometry/Point",
8.109.155/arcgis/rest/services/2016/MAPA_ "esri/symbols/PictureMarkerSymbol",
2016_03JUN/MapServer"); "esri/dijit/PopupTemplate", "esri/graphic".
map.addLayer(basemap);
}
Por ejemplo tenemos un array con tres elementos para
Las primera necesidad que hay al analizar datos es presentar en el mapa base.
representarlos en el mapa, para eso debemos tener una
fuente como un archivo csv, un web service que retorne
un json, o de un arreglo. Luego debemos dibujar eso var item = [
puntos. [142837, 13.62621833, -89.23901036,
'Punto1'],
[142786, 13.72054164, -89.37350705,
Cuando queremos importar los datos de un archivo CSV 'Punto2'],
llamamos al paquete "esri/layers/CSVLayer", [142800, 13.74712839, -87.98549151,
adicionalmente incluimos los que permitirán dibujar los 'Punto3']
puntos: "esri/symbols/SimpleMarkerSymbol", ];
"esri/renderers/SimpleRenderer", "esri/Color",
"esri/InfoTemplate".
Graficamos cada elemento del array y le asignamos una
require(["esri/map", imagen a cada una.
"esri/layers/CSVLayer",

"esri/symbols/SimpleMarkerSymbol", //Graficar primer punto

"esri/renderers/SimpleRenderer, var loc1 = new Point(item[0][2],
"esri/layers/FeatureLayer", item[0][1]);
"esri/InfoTemplate", var symbol1 = new
"esri/Color", PictureMarkerSymbol("imagenes/homicidio.p
"dojo/domReady!"], function(Map, ng", 18, 36);
CSVLayer, SimpleMarkerSymbol, var template1 = new PopupTemplate({
SimpleRenderer, title: "Novedad",
ArcGISTiledMapServiceLayer, InfoTemplate, description: item[0][3]
Colo) });
capaGrafica.add(new Graphic(loc1,
Se crea un objeto del tipo CSVlayer para después symbol1, item, template1));
importar del archivo csv en este caso las columnas están
ordenadas asi: Novedad, CoordenadaX, CoordenadaY. //Graficar segundo punto
var loc2 = new Point(item[1][2],
item[1][1]);
csv = new CSVLayer("muestra2.csv", { var symbol2 = new
copyright: "USIG" PictureMarkerSymbol("imagenes/INTERCAMBIO
}); S.png", 18, 36);
var template2 = new PopupTemplate({
Se agregan las propiedades para dibujar las coordenadas title: "Novedad",
x,y y el diseño de la plantilla de la información que se description: item[1][3]
mostra al usuario cuando de click en un punto. Por });
último se agrega la capa csv al mapa base. capaGrafica.add(new Graphic(loc2,
symbol2, item, template2));
var orangeRed = new Color([238, 69, 0,
0.5]); // hex is #ff4500 //Graficar tercer punto
var loc3 = new Point(item[2][2],
item[2][1]);
var symbol3 = new gps) {
PictureMarkerSymbol("imagenes/extorsion.p arry.push([data[index].longitudx,
ng", 18, 36);
var template3 = new PopupTemplate({ data[index].latitudy,
title: "Novedad", data[index].description]);
description: item[2][3]
}); });
capaGrafica.add(new Graphic(loc3, DibujarRecorrido(arry);
symbol3, item, template3)); },
error: function (jqXHR,
exception) {
console.log(jqXHR.status + " :
" + exception);
}
});
});
});

Usando la misma estructura de código indicaremos que

dibuje una línea entre un punto y el que le sigue, para eso
añadiremos los paquetes "esri/geometry/Polyline",
"esri/SpatialReference" y construiremos el objeto
polyline.
Podemos ver que podemos representar cada punto con
una imagen descriptiva del evento. Ahora la parte más var polyline = new Polyline(new
importante es que podamos consultar datos de un periodo SpatialReference({
dado para compararlos o para un monitoreo. Usaremos la
librería Jquery para hacer una petición a un web service wkid: 4326
usando AJAX este servicio nos retornara las coordenadas }));
y eventos en formato JSON.

Ahora agregamos al final de código que dibuja los puntos

$(document).ready(function () {
estas las instrucciones para se conecten los puntos.
$("#btnConsultar").click(function () {
var evento = $("#txtevento").val();
polyline.addPath(path);
var fechaInicial =
capaGrafica.add(new Graphic(polyline, new
$("#txtFechaIni").val();
SimpleLineSymbol(SimpleLineSymbol.STYLE_S
var fechaFinal =
OLID, new Color([51, 112, 26]), 5)));
$("#txtFechaFin").val();
var urljson =
"WebService.asmx/GetEventos";
var arry = [];
$.ajax({
url: urljson,
dataType: "json",
method: 'post',
data: {
"evento": evento,
"FechaInicial":
fechaInicial,
ArcGis JS puede combinarse con otras librerías
"FechaFinal": fechaFinal },
javascript para mapas como Leaflet[4] y así expandir
success: function (data) {
más sus funcionalidades. En este ejemplo mostraremos
$(data).each(function (index,
un mapa de calor de un servicio que regresa una capa de
datos ya definido.

Llamaremos la librería de Leaflet desde su página oficial

<script
src="https://rawgit.com/Leaflet/Leaflet.h
eat/gh-pages/dist/leaflet-
heat.js"></script>

Incluiremos este plugin de Esri para crear un mapa de

calor con los servicios de Arcgis JS.

<script
src="https://cdn.jsdelivr.net/leaflet.esr
i.heatmap-feature-layer/1.0.2/esri-
leaflet-heatmap-feature-layer-
src.js"></script>
Dentro de la etiqueta <body></body> pondremos la div
donde estara el mapa.
<div id="map"></div>
Abrimos las etiquetas <script> y creamos el objeto mapa.
Conclusión.
Con la librería Arcgis tenemos una API con las
suficientes herramientas para construir aplicaciones web
donde podamos analizar los datos y consultarlos en
tiempo real. En la documentación oficial podemos ver
mas ejemplo y referencia a las funciones. ArcGis JS no
es la única librería para georeferenciación que hay pero
su soporte y amplia documentación hace que sea una de
la mas recomendables.

var map = L.map('map').setView([ 40.706,

-73.926], 14);

Indicamos el tipo de mapa en la capa que será la base.

L.esri.basemapLayer('Gray').addTo(map);

Escribimos las propiedades de la capa que dibujara los

puntos de carlos: la Url de nuestro servicio de mapa de
Arcgis y la intensidad de los puntos. Luego lo añadimos
al mapa base como una capa.

L.esri.heatmapFeatureLayer({
url:
'https://services.arcgis.com/rOo16HdIMeOB
I4Mb/ArcGIS/rest/services/Graffiti_Report
s/FeatureServer/0',
radius: 12
}).addTo(map);

El resultado es nuestro mapa de calor en una aplicación

web.
Referencias

[1] Información sobre tarifas y planes de Google Maps.

Google. https://developers.google.com/maps/pricing-
and-plans/?hl=Es

[2] Documentation ArcGIS JS 3.23. Esri. Working with

Dojo.
https://developers.arcgis.com/javascript/3/jshelp/inside_d
ojo.html

[3] ArcGIS Web Developer, Edition 2015. Rene

Rubalcava. From data to Map. Pag 18-19.

[4] Ejemplos: API JavaScript de ArcGIS. Esri. Ejemplo

14: Mapa de Calor con Esri-Leaflet. http://esri-
es.github.io/JavascriptAPI/