La anterior entrada de VueJs estuvo enfocada a utilizar gráficos, pero otro aspecto a incluir es el tema de mapas. Este tema, el de mapas, siempre me ha acompañado a lo largo de toda mi vida profesional, y hace tiempo que en uno de mis proyectos, necesitaba incluir un mapa de localización de un punto. Es hora de utilizar Leaflet con VueJS, y agregar mapas.
Cambiando coordenadas de UTM a geográficas
Para incluir un mapa de localización de un punto, lo primero a resolver es que las coordenadas con las que normalmente trabajo están en UTM, mientras que Leaflet o Google Maps necesitan las mismas en coordenadas geográficas, por lo que se necesita realizar un cambio de coordenadas.
Buceando por Internet, llegúe a https://franzpc.com/apps/ y ahí puedes encontrar varias cosas, entre ellas, urm2lat.js. Esta fichero es justo lo que se necesita para cambiar de coordenadas, porque incluye una serie de funciones y constantes que permiten el cambio de coordenadas. sin embargo, todas estas funciones no vienen aplicadas, por lo que para enterder cómo funciona, tuve que trabajar con otro ejemplo incluido en la misma página: https://franzpc.com/apps/coordinate-converter-utm-to-geographic-latitude-longitude.html.
Las funciones incluidas en urm2lat.js son varias, y en dicho ejemplo, investigando los distintos botones, conseguí comprender cómo trabajar con ellas, en parte porque encontré otro fichero que hacía uso de las mismas, en el que se propone un ejemplo: http://franzpc.com/apps/script_convert.txt. No incluyo el código porque es largo, y además, he incluido el enlace a la misma.
Así que, al finalizar el estudio de dichas funciones, acabé agregando mis propias funciones para solventar las necesidades que tenía, que no eran otras que convertir coordenadas de UTM 30 WGS84 a geográficas, y vicecersa. Mis funciones son:
function UTMXYToLatLon2(x, y) {
let latlon = new Array(2);
UTMXYToLatLon(x, y, 30, false, latlon)
return latlon.map(i => RadToDeg(i)); }
function LatLonToUTMXY2(lat, lon, zone) {
let xy = new Array(2);
let zone = LatLonToUTMXY (DegToRad (lat), DegToRad (lon), zone, xy);
return xy; }
Básicamente, la primera de mis funciones se crea para asignar la zona 30 en los cálculos, por lo que solo es necesario enviar las coordenadas X e Y en formato UTM, mientras que la segunda función devuelve las coordenadas X e Y en la zona UTM indicada, en base a las coordenadas geográficas. Esta segunda función es utilizada para transformar las coordenadas obtenidas del mapa a UTM, puesto que en los mapas de Leaflet, existe un evento que devuelve las coordenadas del punto clickado, en geográficas.
Un ejemplo, usando urm2lat.js
La primera parte de usando Vue-Leaflet es construir un pequeño formulario para convertir coordenadas de UTM 30N WGS84 a geográficas. Se incluyen todas las librerias del ejemplo final, dado que el código HTML no varía, y la única variación a mostrar en la segunda parte, vendrá por parte del componente principal.
El código HTML es:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<title>Manejando Datos - Usando Leaflet</title>
<link rel="stylesheet" href="https://unpkg.com/vue-select@latest/dist/vue-select.css">
<style>
.title-row {
display: flex;
flex-direction: column;
align-items: center;
background: #eee;
padding: 20px;
}
</style>
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vue-select@latest"></script>
<script src="urm2lat.js"></script>
<script src="leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
crossorigin=""></script>
<script src="https://unpkg.com/vue2-leaflet@2.1.1/dist/vue2-leaflet.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
El código HTML no tiene ninguna complejidad: un DIV con identificador #app donde tiene lugar toda la aplicación, y la carga de librerias Javascript, desde Vue (ovio), vue-leaflet, urm2lat, y poco más.
Qué es Leaflet
Leaflet es una biblioteca de código fuente abierto de JavaScript que se utiliza para crear aplicaciones de mapas web. Es bastante ligera, y es una alternativa a Google Maps, que no se ha elegido porque confiamos en el software libre.
En su propia página web se incluyen las rutas para cargarlas al ejemplo, tal y cómo se muestra en el código HTML utilizado.
El resto de librerías
El resto de librerias incluidas en el ejemplo incluyen la ya comentada urm2lat.js, y también leaflet.js, que es de mi propia cosecha y que será comentada en la parte 2 de este ejemplo.
El código de app.js
Cómo viene siendo habitual, app.js es donde se inicia el trabajo para VueJS. El trabajo de cambio de coordenadas se realiza en una propiedad computada, cuyo resultado se muestra. El código Javascript es:
// Manejando Datos - VueLeaflet
var app = new Vue({
el: "#app",
data() {
return {
coordx: 125000,
coordy: 4140000,
}
},
computed: {
coordenadas() {return `${this.coordx} - ${this.coordy}`},
coords() {
// UTMXYToLatLon (x, y, zone, southhemi, latlon);
return UTMXYToLatLon2 (this.coordx, this.coordy);
},
},
template:
`
<div>
<div class="title-row">
<span>CoordX:</span><input type="text" v-model="coordx">
<span>CoordY:</span><input type="text" v-model="coordy">
Geograficas: {{ coords }}
</div>
</div>
`
})
Para la segunda parte, tocará incluir el mapa, ahora que ya sabemos utilizar urm2lat.js para el cambio de coordenadas.
El resultado:
Un saludo y happy coding!