The previous entry of VueJs was focused on using graphs, but for this entry, I would like to add another aspect: maps. This topic, maps and GIS, has always accompanied me throughout my professional life, and some time ago, in one of my projects, I needed to include a location map of a point. It’s time to use Leaflet with VueJS, and add maps to your peoject as I did.
Changing coordinates from UTM 30N to geographics
The way of including a location of a point on a map, the first thing to solve is that the coordinates with which I usually work are in UTM, while Leaflet or Google Maps need the same in geographic, so you need to make a change of coordinates.
Diving online on Internet, I arrived to https://franzpc.com/apps/ and there you can find several things, including urm2lat.js. This file is just what I need to change coordinates, because it includes a series of functions and constants that allow that. However, all these functions are not applied, so to understand how it works, I had to work with another example included in the same page: https://franzpc.com/apps/coordinate-converter-utm-to-geographic- latitude-longitude.html.
The functions included in urm2lat.js are several, and in that example, investigating the different buttons, I managed to understand how to work with them, partly because I found another file that used them, in which an example is proposed: http: //franzpc.com/apps/script_convert.txt. I do not include the code because it is long, and I have already included the link to it.
So, at the end of the study of these functions, I ended up adding my own functions to solve the needs I have, which were not other than convert UTM coordinates 30 WGS84 to geographical, and vicecersa. My functions are:
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; }
Basically, the first of my functions is created to assign zone 30 in the calculations, so it is only necessary to send the X and Y coordinates in UTM format, while the second function returns the X and Y coordinates in the desired zone in UTM format, based on geographic coordinates. I use this second function for transforming the coordinates obtained on the map, to UTM, as an event launched after a click on the map.
An example using urm2lat.js
The first part of using Vue-Leaflet is to build a small form to convert UTM coordinates 30N WGS 84 to geographic coordinates. All the libraries of the final example are included, since the HTML code does not vary, and the only variation to be shown in the second part will come from the main component.
The HTML code is:
<!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>
The HTML code does not have any complexity: a DIV with identifier #app where the whole application takes place, and the load of Javascript libraries: Vue (oo course!!), vue-leaflet, urm2lat and the app.
What is Leaflet
Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. It’s pretty light, and it’s an alternative to Google Maps, which has not been chosen because we trust on open source software.
In the leaflet web page, it is included the routes to load the libraries, as shown in the HTML code used.
The app.js code
As usual, app.js is where the work for VueJS starts. The task of changing coordinates is done in a computed property, whose result is shown. The Javascript code is:
// 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>
`
})
For the second part, it will be necessary to include the map, now that we already know how to use urm2lat.js for the change of coordinates.
The result:
And, that’s all, and happy coding!