Saltar a contenido

ArcGIS API for Javascript

La ArcGIS API for JavaScript permite crear aplicaciones web interactivas y tiene visualizaciones tanto en 2D como en 3D. Forma parte de todo el ecosistema ArcGIS de ESRI.

Al igual que la API de google está soportada por una gran empresa como lo és ESRI. Está integrado con los recursos de la platadforma de ArcGIS Online. Para acceder a los servicios de ArcGIS como por ejemplo el mapa base, geocodificador, routing, etc es necesario tener una API KEY y tienen un coste (aunque tienen uso gratis pero limitado).

La referencia de la API la podemos ver en https://developers.arcgis.com/javascript/latest/

Generar la API KEY

  1. Ingresar en el dashbord https://developers.arcgis.com/dashboard/
  2. Seleccionar la opción de ArcGIS API for JavaScript
  3. Seleccionar la opción de "no quiero especificar"
  4. Hacer click en el botón de nueva API KEY

Mi primer mapa

Crear un archivo llamado arcgis.html y copiar lo siguiente:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://js.arcgis.com/4.32/esri/themes/light/main.css">
    <style>
        html,
        body,
        #viewDiv {
          padding: 0;
          margin: 0;
          height: 100%;
          width: 100%;
        }
    </style>

    <script src="https://js.arcgis.com/4.32/"></script>
    <script>
        require(["esri/config","esri/Map", "esri/views/MapView"], function (esriConfig,Map, MapView) {

            esriConfig.apiKey = "YOUR_API_KEY";

            const map = new Map({
                basemap: "topo-vector" // Basemap layer service
            });

            const view = new MapView({
                map: map,
                center: [2, 41.5], // Longitude, latitude
                zoom: 7, // Zoom level
                container: "viewDiv" // Div element
            });

        });
    </script>
</head>
<body>
    <div id="viewDiv"></div>

</body>
</html>

Una diferencia con las otras librerias de mapas que veremos es el concepto de cargar módulos. Podemos ver en nuestro código que se llama a la función require y que se le pasa una matriz como parámetro. Esta matriz contiene los módulos que queremos cargar.

Estilos disponibles

La API dispone de varios estilos (themes) para la interfaz de la aplicación

Podemos ver los estilo en https://developers.arcgis.com/javascript/latest/styling/#themes

Algunos Widgets disponibles

https://developers.arcgis.com/javascript/latest/api-reference/

let scaleBar = new ScaleBar({
    view: view
});
// Agregar widget en la esquina inferior izquierda de la vista
view.ui.add(scaleBar, {
    position: "bottom-left"
});

Tipos de capas

Raster

Vector

Ejemplos

Podéis ver más ejemplos de código en https://developers.arcgis.com/javascript/latest/sample-code/

Ejercicio 0.5 pts

  1. Preparar un mapa con la capa Osm centrada en España. Referencia de las capas base: https://developers.arcgis.com/javascript/latest/api-reference/esri-Map.html#basemap
  2. Sobre el ejercicio anterior añadir el widget toggleMap para cambiar entre la capa Osm y la capa satellite.
  3. Añadir servicio WMS del ICGC de la ortofoto de 25c.

Realizar los 3 puntos anterios son (0.5 pt) en el caso contrario 0 pt.

Referencias

https://developers.arcgis.com/javascript/latest/