¿Cómo desarrollar tu primer mapa con la API JavaScript de ESRI?

Cuando se comienza a desarrollar en cualquier lenguaje de programación y en este caso en particular, con la ArcGIS API JavaScript de ESRI, lo más complicado es dar el primer paro. Por eso, en esta entrada os vamos a indicar los primeros pasos para empezar a crear un mapa en la web.

Este código va a ser la base para luego seguir avanzando con esta API JS, la cual, es en la actualidad la que más está evolucionando respecto a sus “competidoras”: la ArcGIS API for Silverlight y la ArcGIS API for FLEX hasta el punto de que en poco tiempo se dejará de lanzar nuevas versiones y se recomienda a los usuarios a pasarse a JavaScript.

A continuación se va a añadir un código que os puede servir de base para repetirlo en todas las aplicaciones desarrolladas con dicha API. Este código sirve para cargar DoJo y la API JavaScript.

Hay que tener en cuenta que JS se enriquece con herramientas de Dojo, es una librería tipo “Open Source”. Los complementos de Dojo son componentes pre-empaquetados de código JavaScript, HTML y CSS que pueden ser usados para enriquecer aplicaciones web. Esto es una gran ventaja ya que permite disponer de más variedad de complementos para nuestro desarrollo.

Vamos a crear un archivo tipo .html, con las correspondientes etiquetas: <html>, <head>, <title>, y <body> (entre otras) y en ellas vamos a ingresar nuestro código. Este es el esqueleto base:

A partir de aquí, la primera cosa que debemos hacer cuando desarrollemos cualquier aplicación Web GIS con la API para JavaScript , es añadir una referencia a los temas DoJo, a la hoja de estilos CSS de ESRI e incluir otra referencia a la API para JavaScript de ArcGIS Server (dentro de una etiqueta script).

En el cuerpo de nuestra página necesitaremos añadir una referencia al tema DoJo que hemos referenciado. Aunque hemos especificado que queremos usar “tundra” como hoja de estilo (DoJo también posee las hojas de estilo “soria”, “claro” y “nihilo” que podríamos integrar). Se añadirá dentro de la etiqueta <body> y simplemente añadiremos la clase “tundra” al código que teníamos por defecto.

Y a partir de aquí generamos la función de inicialización. Una función de este tipo se ejecuta normalmente después de que todos los elementos de la página web hayan sido cargados. Esta función se usa para crear una nueva instancia de un mapa que contiene las capas que se necesitan mostrar, centrar el mapa en la vista inicial y realizar otras funciones adicionales necesarias como ejecutar consultas.

Usa dojo.require para importar diferentes recursos que necesitarás en la aplicación. En el caso de una aplicación desarrollada con la API para JavaScript siempre es interesante importar “esri.map”.

Y al final insertamos dojo.addonLoad, su único propósito es monitorizar la carga inicial de una página web (en otra entrada veremos cómo).

Y así queda nuestro código, lo guardamos y si queremos verlo lo abrimos con un navegador web (o lo subimos a nuestra página web).

Ya sé que he tecleado mucho así que ahora viene lo mejor, así se representaría nuestro mapa:

En el “Curso online de Creación de Aplicaciones API de JavaScript y ArcGIS Server” de TYC GIS que comienza el próximo 5 de Noviembre podrás aprender mucho más sobre este entorno imprescindible a la hora de crear nuestros visores cartográficos, ya que es un lenguaje de programación que está en auge.

(1 votos, promedio: 5,00 de 5)