Expedición de Magallanes-Elcano




Queremos celebrar el V Centenario de la expedición de la primera vuelta al mundo de Fernando de Magallanes y Juan Sebastián Elcano con este tutorial de CartoDB.

Vamos a comenzar eligiendo nuestra capa base:

Nos dirigimos a la pestaña Data y hacemos clic en el botón azul New Dataset, hacemos clic en SEARCH y buscamos la capa llamada world borders que contiene todos los bordes administrativos de los países, hacemos clic y tenemos la capa añadida a nuestros Datasets.

Para poder trabajar con ella, la duplicamos (Línea de 3 puntos y Duplicate) y le cambiamos el nombre, en nuestro caso la hemos llamado world_hd2.

Nos dirigimos a nuestra nueva capa y hacemos clic, nos llevara a la pantalla de datos, una tabla con las filas y las columnas de nuestra capa espacial, Carto crea por defecto las columnas cartodb_id (identificador unico) y the_geom (coordenadas espaciales).

Para hacerlo más divertido y huir de la proyección Mercator que viene por defecto vamos a cambiar el sistema de referencia espacial.

Con la nueva actualización de PostGIS 3 Carto ha aumentado la base de datos de Sistemas de referencias espaciales con casi 6000 registros (5766 para ser exactos).

Si nos vamos abajo a la izquierda podemos hacer consultas SQL, en este caso ver los sistemas de referencia espaciales con los que está trabajando Carto:

						
SELECT * FROM spatial_ref_sys
						
					

Vamos a crear nuestro propio sistema de referencia, jugando un poco con las variables, he partido de la Proyección World_Stereographic y la he bautizado cómo gabas_Stereographic con el ESRI 99999.

						
INSERT into spatial_ref_sys (srid, auth_name, auth_srid, proj4text, srtext) values ( 99999, 'ESRI', 99999, '+proj=stere +lat_ts=70+lon_0=45+lon_ts=90 +k=1 +x_0=6000000 +y_0=6000000 +ellps=WGS84 +units=m +no_defs ', 'PROJCS["gabas_Stereographic",GEOGCS["GCS_WGS_1984",DATUM["WGS_1984",SPHEROID["WGS_1984",6378137,298.257223563]],PRIMEM["Greenwich",0],UNIT["Degree",0.017453292519943295]],PROJECTION["Stereographic"],PARAMETER["False_Easting",0],PARAMETER["False_Northing",0],PARAMETER["Central_Meridian",0],PARAMETER["Scale_Factor",1],PARAMETER["Latitude_Of_Origin",0],UNIT["Meter",1],AUTHORITY["EPSG","54026"]]');
						
					

Como se trata de una proyección centrada en el polo norte, la antípoda se encuentra en la Antártida, por lo que vamos a eliminar el continente para que no moleste.

						
SELECT * FROM world_hd2 where admin like 'Antarctica'
DELETE FROM world_hd2 where admin = 'Antarctica'
						
					

Le damos aplicar y creamos el mapa.

Ahora vamos a hacer varios cambios, seleccionamos nuestra capa world_hd2 y en Layer options hacemos clic en DATA y modificamos por SQL:

						
SELECT
    ST_TransScale(ST_Transform(the_geom,99999), 0,0,0.6,0.6 )
  
AS
  the_geom_webmercator,
  the_geom,
  cartodb_id,
  admin
FROM
  world_hd2
						
					

Hemos realizado dos cambios, primero la transformación de sistema de referencias de la columna the_geom a nuestro sistema de coordenadas gabas_Stereographic con el ESRI 99999 con la función de PostGIS ST_Transform, como se nos salía del marco geográfico definido por Carto que transforma a webmercator entre -85 y 85 grados de latitud, hemos realizado una operación ST_TransScale para cambiarle la escala a la capa a un 60% (0.6/1).

Posteriormente hemos añadido nuevas capas que contienen la Ruta de la Expedición de Magallanes-Elcano y los puntos que contienen el Cuaderno de Bitácora de la página web rutaelcano.com, como vienen por defecto en formato KML hemos realizado una transformación de formatos en QGIS a formato geopackage y modificado un poco las capas.

Luego hemos realizado las mismas transformaciones que en la capa anterior:

						
SELECT
    ST_TransScale(ST_Transform(the_geom,99999), 0,0,0.6,0.6 )
  
AS
  the_geom_webmercator,
  the_geom,
  cartodb_id,
  date,
  description
FROM
  puntos_magallanes
						
					

Hemos añadido las columnas, date y description para poderlas visualizar posteriormente en los POP-UP.

						
SELECT
    ST_TransScale(ST_Transform(the_geom,99999), 0,0,0.6,0.6 )
  
AS
  the_geom_webmercator,
  the_geom,
  cartodb_id,
  name
FROM
  ruta_magallanes
						
					

Para finalizar con las capas hemos añadido el grid mundial UTM de la web de ArcGIS Hub y aplicado las mismas transformaciones que las 3 capas anteriores lo que le da un aspecto muy vistoso al mapa.

Ahora vamos con los estilos CSS del Mapa

Primero hemos cambiado el Basemap que viene por defecto en Basemap options y hemos aplicado un color azul muy vistoso, el HEX es #3f2c85.

Al utm_grid le hemos aplicado unas transparencias para que no resalte mucho y lo hemos puesto por debajo de las demás capas:

						
#layer {
  polygon-fill: #ff1111;
  polygon-opacity: 0;
}
#layer::outline {
  line-width: 1;
  line-color: #ffffff;
  line-opacity: 0.05;
}
						
					

A nuestra capa de países World_hd2 le hemos puesto una imagen de fondo:

						
#layer {
  
polygon-pattern-file:
url('https://s3.amazonaws.com/com.cartodb.users-assets.production/production/mamataakella/assets/20170822202613TexturesCom_PaperDecorative0061_1_seamless_S.jpg');
  polygon-pattern-opacity: 0.1;
  polygon-fill:#9f997f;
  polygon-opacity: 1;
  polygon-comp-op: multiply;
  line-width: 5;
  line-color: fadeout(#fff,90);
  
  [zoom<=4]{line-width: 2.5;}
   
}


						
					

A la capa lineal ruta_magallanes le hemos aplicado un azul y unas transparencias, la capa de puntos con la información del cuaderno de bitácora la hemos duplicado, hemos dejado una para mostrar los POP-US y otra para realizar una animación:

						
Map {
  -torque-frame-count: 256;
  -torque-animation-duration: 30;
  -torque-time-attribute: "fid";
  -torque-aggregation-function: "count(1)";
  -torque-resolution: 4;
  -torque-data-aggregation: linear;
}
#layer {
  marker-width: 7;
  marker-fill: #734dee;
  marker-fill-opacity: 0.9;
  marker-line-width: 1;
  marker-line-color: #FFFFFF;
  marker-line-opacity: 1;
  comp-op: lighter;
}
#layer[frame-offset=1] {
  marker-width: 9;
  marker-fill-opacity: 0.45;
}
#layer[frame-offset=2] {
  marker-width: 11;
  marker-fill-opacity: 0.225;
}
						
					

Y para finalizar con el tutorial hemos añadido la leyenda y modificado los Map Options (Tercer botón de la izquierda) en el que hemos desactivado la SEARCH BOX y la SHOW TOOLBAR.

Este tutorial a formado parte un proyecto para la asignatura Aplicaciones distribuidas para la información geográfica del Máster Oficial en Ingeniería Geodésica y Cartografía que estoy cursando actualmente, el mapa a pantalla completa lo podéis encontrar en jgabas.carto.com.

Si queremos insertarlo en cualquier página web solo tenemos que añadir el siguiente Iframe:

						
<iframe width="100%" height="600" frameborder="0" src="https://jgabas.carto.com/builder/4f5e7ebd-aebe-4371-8f89-4dc0d1261ee8/embed" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>
						
					

¿Alguna pregunta? ¿Quieres realizar sinergias o colaboraciones? ¿Te gustaría enviarnos feedback sobre el tutorial? No dudes en contactar a jgabas@geopois.com.



Sobre el Autor


Javier Gabás Jiménez

Soy un apasionado de los mapas y la infraestructura de datos espaciales, me divierto mucho buscando formas de comprender y presentar datos visualmente, así como entender la programación que hay debajo. Ingeniero en geomática y topografía por la Universidad Politécnica de Madrid, cuando no estoy trabajando o estudiando, estaré viajando y disfrutando de la vida junto a mi pareja.



Formamos parte del programa de emprendimiento #17actuaupm