Mapas y más mapas - Un ventanal al mundo

Escrito por  Gustavo Velez

Introducción

En el artículo "Azure maps - una ventana al mundo" publicado en el número 48 de CompartiMOSS, vimos que es el servicio de Azure Maps, comparándolo con el servicio de Bing Maps, sus características y posibilidades técnicas, y como utilizar su API tanto con HTML como en aplicaciones SPFx (SharePoint Framework) y aplicaciones creadas con Power Apps.

En este segundo articulo exploramos el mundo de APIs para mapas, que no se reduce a lo que podemos obtener con Azure y/o Bing. El mundo actual de APIs para mapas es bastante amplio, incluyendo multitud de empresas y servicios, tanto de pago como de uso gratuito.

En el mundo moderno de programación de aplicaciones es casi imposible encontrar una aplicación o sitio de internet que no utilice mapas, yendo desde los sitios de internet más sencillos que muestran la dirección física de la empresa mediante un mapa, pasando por aplicaciones de geolocalización tales como las utilizadas con GPS para encontrar direcciones y rutas de un sitio a otro, yendo hasta aplicaciones especializadas como las utilizadas por atletas para controlar su velocidad en competencia. Todas esas aplicaciones utilizan algún tipo de servicio de mapas por medio de sus APIs.

Hay aplicaciones de incalculable valor que se basan en mapas, como el sitio de Internet "Zombie Apocalypse Survival Map", en donde usted puede crear un mapa real de su área local y marcar en él las ubicaciones de suministros a usar en caso de un ataque de zombis, bases secretas, e incluso las zonas donde los propios zombis se encuentran. Algunas otras, un poco más banales como "Tetsudo now" que utiliza un mapa animado creado con el OpenLayers API en donde se indican los horarios de los metros subterráneos y autobuses de Tokio en tiempo real; también es muy útil para aprender japones simultáneamente.

Mapbox

Mapbox proporciona un conjunto de herramientas para la creación de mapas digitales personalizados de forma rápida y sencilla. Mapbox es open-source y ofrece cinco planes de pago para su utilización, que van desde un plan gratuito que permite hasta 25.000 usuarios mensuales (que pueden ver hasta 50.000 mapas), hasta planes empresariales con alto volumen de uso.

Mapbox dispone de varios APIs (mapas, navegación y geocodificación) de JavaScript propios, SDKs (Android, iOS y Unity) y otras herramientas que los desarrolladores pueden utilizar para agregar mapas dinámicos en aplicaciones. Dispone también de un editor en línea (Mapbox Editor) que permite crear rápidamente mapas personalizados utilizando datos propios, importados como un archivo .csv, GeoJSON, KML o GPX. El sitio de Mapbox proporciona una gran cantidad de demostraciones en vivo y ejemplos de código que los desarrolladores pueden utilizar como punto de partida para sus aplicaciones.

Para utilizar Mapbox programáticamente es necesario primero crear una cuenta en el sistema, con la que se genera un token público que debe ser usado en cada consulta a Mapbox (hay una versión gratis, como se indicó anteriormente).

El siguiente es un ejemplo en HTML:

1<!DOCTYPE html>
2<html>
3<head>
4<meta charset=utf-8 />
5<title>Mapbox API for JavaScript </title>
6<meta name='viewport'
7content='initial-scale=1,maximum-scale=1,user-scalable=no' />
8<script src='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.js'></script>
9<link href='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.css' rel='stylesheet' />
10<style>
11body {
12margin:0;
13padding:0;
14}
15
16#myMap {
17position:absolute;
18top:0;
19bottom:0;
20width:100%; }
21</style>
22</head>
23<body>
24
25<div id='map'></div>
26
27<script type="text/javascript">
28L.mapbox.accessToken = '[Su Token Aqui]';
29var map = L.mapbox.map('myMap')
30.setView([5.633902, -73.523544], 15)
31.addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11'));
32</script>
33</body>
34</html>
35

Note la similitud del código con el mostrado en el artículo de CompartiMOSS número 48, utilizado para generar un mapa con Azure Maps. Para Azure Maps se necesitan dos librerías de .js y .css de la forma:

1<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
2
3<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css">
4

Y para Mapbox las librerías son:

1<script src='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.js'></script>
2
3<link href='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.css' rel='stylesheet' />
4

El archivo .html genera un mapa similar al siguiente:

Imagen 1.- Mapa generado con el API de Mapbox.

Para utilizar Mapbox en una aplicación SPFx, primero es necesario importar el módulo de Mapbox usando npm:

1npm install mapbox.js
2

Y luego, al inicio del código en el archivo de TypeScript, inicializar el module por medio de:

1import * as atlas from 'mapbox.js';
2

El código de TypeScript para generar los mapas en una aplicación SPFx se puede copiar prácticamente de principio a fin del código mostrado al principio para generar mapas en una página HTML.

Esri ArcGIS

Esri (Environmental Systems Research Institute) fue originalmente un grupo de investigación que analizaba información geográfica para la planificación del uso de la tierra con fines agrícolas. En 1996, Esri lanzó MapObjects, la primera plataforma de mapas disponible para Internet. Actualmente, Esri se centra principalmente en aplicaciones empresariales y ofrece una plataforma GIS (Geographic Information System) completa que incluye no solo generación de mapas, sino también múltiples tipos de análisis geográficos. Esri incluye acceso por intermedio de numerosas APIs y SDKs incluyendo un API para mapas basado en JavaScript. Esri ofrece una suscripción gratis para desarrollador y un modelo de pago para uso comercial.

Para obtener una licencia de desarrollo, cree una cuenta en el sitio de Esri, lo que produce una llave para generar mapas y utilizar algunos otros servicios de la empresa. El API de JavaScript está totalmente documentado en el sitio de ArcGIS API for JavaScript, e incluye numerosos ejemplos de uso del API. El siguiente ejemplo de HTML produce un mapa centrado en un sitio determinado, dado por sus coordinadas geográficas:

1<html>
2<head>
3<meta charset="utf-8" />
4<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
5<title>ArcGIS API for JavaScript</title>
6<style>
7html,
8body,
9#viewDiv {
10padding: 0;
11margin: 0;
12height: 100%;
13width: 100%;
14}
15</style>
16<script src="https://js.arcgis.com/4.20/"></script>
17<link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css">
18<script>
19
20require(["esri/config","esri/Map", "esri/views/MapView"],
21function (esriConfig,Map, MapView) {
22
23esriConfig.apiKey = "[Su llave aqui]";
24
25const map = new Map({
26basemap: "arcgis-topographic"
27});
28
29const view = new MapView({
30map: map,
31center: [-73.523544, 5.633902],
32zoom: 14,
33container: "viewDiv"
34});
35});
36
37</script>
38</head>
39<body>
40<div id="viewDiv"></div>
41</body>
42</html>
43

De nuevo, el código es muy similar al utilizado anteriormente. Las librerías de JavaScript y css a utilizar están definidas al comienzo del código fuente:

1<script src="https://js.arcgis.com/4.20/"></script>
2
3<link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css">
4

El mapa generado es similar al mostrado en la imagen 2.

Imagen 2.- Mapa generado con el API de Esri ArcGis.

Para trabajar programáticamente con ArcGis en TypeScript (en SPFx), instale el módulo correspondiente utilizando npm:

1npm install @types/arcgis-js-api
2

Y luego inicialice las librerías en el código de TypeScript de la siguiente manera:

1import EsriMap from "esri/Map";
2import MapView from "esri/views/MapView";
3

ArcGIS ha publicado información completa sobre cómo utilizar TypeScript para generar mapas con su API de JavaScript.

OpenStreetMap

OpenStreetMap es un proyecto mantenido por un gran grupo de voluntarios que crean y distribuyen datos geográficos de forma totalmente gratuita. En el mismo sitio de OpenStreetMap se puede ver un ejemplo de cómo el sistema renderiza mapas. El API de OpenStreetMap no incrusta mapas directamente en páginas web, solo permite recuperar y/o guardar geodatos sin procesar en su base de datos. OpenStreetMap representa entidades físicas como ferrocarriles, servicios, edificios, carreteras, lugares, tiendas y vías fluviales mediante etiquetas, y cada etiqueta describe un atributo geográfico. Aunque OpenStreetMap no ofrece un API para renderización directa, muchos otros frameworks si ofrecen diferentes APIs para hacerlo con la información de la base de datos de OpenStreetMap, y todos están documentados en su Wiki. El siguiente ejemplo muestra cómo crear un mapa en HTML utilizando los datos de OpenStreetMap y el framework ofrecido por OpenLayers:

1<!DOCTYPE HTML>
2<html>
3<head>
4<title>OpenStreetMap API for JavaScript</title>
5<style type="text/css">
6html, body, #basicMap {
7width: 100%;
8height: 100%;
9margin: 0;
10}
11</style>
12<!--<script src="http://cdnjs.cloudflare.com/ajax/libs/openlayers/2.11/OpenLayers.js"></script>-->
13<script src="http://openlayers.org/api/OpenLayers.js"></script>
14<script>
15function init() {
16map = new OpenLayers.Map("basicMap");
17var mapnik = new OpenLayers.Layer.OSM();
18var fromProjection = new OpenLayers.Projection("EPSG:4326"); //Transform from WGS 1984
19var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
20var position = new OpenLayers.LonLat(-73.523544,5.633902).transform(fromProjection, toProjection);
21var zoom = 15;
22map.addLayer(mapnik);
23map.setCenter(position, zoom );
24}
25</script>
26</head>
27<body onload="init();">
28<div id="basicMap"></div>
29</body>
30</html>
31

El resultado se puede ver en la imagen 3.

Imagen 3.- Mapa generado con los datos de OpenStreetMap y el API de OpenLayers.

MapQuest

MapQuest ofrece una selección de productos de mapas digitales, incluyendo el sitio web de MapQuest.com, MapQuest Mobile, MapQuest Local, MapQuest Enterprise y MapQuest Developers en dos versiones: con licencia de pago y con licencia gratuita (15.000 transacciones por mes). MapQuest fue fundada en 1967, mucho antes de que internet y las grandes plataformas digitales en Internet existiera.

El sitio de MapQuest de desarrolladores incluye toda la documentación para construir mapas, un asistente de mapas estáticos, un planificador de rutas y otras herramientas para desarrolladores. Además, MapQuest proporciona una API de Mapas de JavaScript.

Para utilizar el API de JavaScript, comience creando una cuenta en el sitio de manejo de llaves. El siguiente ejemplo crea un mapa centrado sobre unas coordenadas especificas en una página HTML.

1<html>
2<head>
3<title>MapQuest API for JavaScript</title>
4<script src="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.js"></script>
5<link type="text/css" rel="stylesheet" href="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.css"/>
6<script type="text/javascript">
7window.onload = function() {
8L.mapquest.key = '[Su llave aqui]';
9var oneMap = L.mapquest.map('myMap', {
10center: [5.633902,-73.523544],
11layers: L.mapquest.tileLayer('map'),
12zoom: 15
13});
14oneMap.addControl(L.mapquest.control());
15}
16</script>
17</head>
18<body style="border: 0; margin: 0;">
19<div id="myMap" style="width: 100%; height: 530px;"></div>
20</body>
21</html>
22

El resultado se puede observar en la imagen 4.

Imagen 4.- Mapa generado con el API de MapQuest.

OpenLayers

OpenLayers es una librería de JavaScript open source que utiliza WebGL, Canvas 2D y otras características de HTML5 para representar mapas en navegadores Web modernos. OpenLayers no posee su propio depósito de mapas, sino que utiliza los que OpenStreetMap, Bing, MapQuest, Stamen (que usa mapas de OpenStreetMap) y muchas otras fuentes que tienen bases de datos de mapas. OpenLayers también es capaz de representar datos vectoriales de GeoJSON, TopoJSON, KML, GML y otros formatos de datos geográficos. En el sitio de OpenLayers hay abundante documentación sobre cómo utilizar su JavaScript API, y gran cantidad de ejemplos de utilización. Vea el ejemplo de OpenStreetMap que indica como utilizar la base de datos de OpenStreetMap con el JavaScript API de OpenLayers.

Otras soluciones de geolocalización

Existen varias compañías que disponen de bases de datos geográficos, tales como poblaciones, actividad industrial, polución, puntos de interés, etc., que se pueden superponer e integrar con mapas, pero que no disponen de los mapas mismos y utilizan esa información de otras fuentes (Bing, OpenStreetMap, ArcGis, etc.).

Foursquare es una de estas compañías. El sitio para desarrolladores proporciona alguna información sobre los APIs disponibles. El uso de todos los datos y APIs es de pago. Existen varios ejemplos de utilización del JavaScript de lugares de Foursquare, por ejemplo, en GitHub.

Carto es otra compañía que proporciona servicios de geolocalización. Dispones de un JavaScript API para superponer los datos de su base de datos sobre cualquier tipo de mapas, y su sitio web de desarrolladores muestra varios ejemplos de uso.

Finalmente hay que mencionar que existen otros frameworks que producen mapas de muy baja calidad, tales como https://developers.google.com/maps/.

Conclusión

El mercado de generación de mapas para aplicaciones Web es mucho más extendido de lo que normalmente se conoce, y van más allá que Azure Maps y Bing Maps. Existen frameworks totalmente gratis y open source como OpenStreetMap, y otros que, junto con ofertas de pago disponen también de licencias de uso gratuito. Otras plataformas no disponen de bases de datos de mapas, pero si bases de datos para aumentar la funcionalidad agregándole datos estadísticos como layers sobre mapas existentes.

Gustavo Velez
MVP Offices Apps & Services
gustavo@gavd.net
https://guitaca.com
http://www.gavd.net

Siguemos en LinkedInSiguemos en Twitter
Powered by  ENCAMINA