Coding Period - Week 1

What a great idea it was to start early. That’s the first lesson learnt. Since the last month, I had been busy setting up the development environment for IIAB Maps, but I used to get stuck at some point or the other. I’ve lost count of how many VMs have I started and destroyed. Indeed, a part of it was frustrating, but had it not been that way, I wouldn’t have learnt sooo much about the ins and outs of my project

So this week started on 2nd June(Tues) with my usual weekly conference call with my mentors. It’s actually a great way to discuss all the progress you’re making and discuss if you’re going in the right direction.We discussed the shortcomings of the previous approach we were using and what we should change. Actually, the three of us were working on three different development environments. So that needed to change. So we decided on the upstream, origin and the local environments for ourselves.

Once the basics were sorted, it was time for the actual work. The following targets were to be met for the upcoming week :

Write install scripts for installing IIAB Maps viewable on any platform:[edit]

IIAB Maps uses the OpenLayers library for rendering maps on the client side. Hence, one of the first packages to be installed was Openlayers. Openlayers itself is a huge package and getting it installed correctly required us to have some kind of a JS bundler. We finalised on Webpack after having a lot of discussion over Parcel vs. Webpack. Despite the simplicity which Parcel offers, and zero configuration requirements offered by Parcel, we decided for Webpack since it looked a lot more adaptable to our project. With the previous project available, I had a package.json available at my disposal, but the packages were quite outdated. So to update the packages,we used another npm package called npm-check-updates. ncu is a nifty little package that checks all the available packages in your package.json file and updates them to the recent versions. So the following few lines made sure were my package.json was fresh as new!

$ npm install -g npm-check-updates //install ncu globally

$ ncu  //lists the table of outdated packages

$ ncu -u  //This updates the packages

$ npm install      // install the updated packages

Overlays on Maps

With Openlayers installed, it was time for displaying the overlays on the maps. For this we needed a GeoJSON file with the coordinates of marked places, that can be put on the map as markers. According to Wikipedia,

GeoJSON is an open standard format designed for representing simple geographical features, along with their non-spatial attributes. It is based on the JavaScript Object Notation. The features include points, line strings, polygons, and multi-part collections of these types

These GeoJSON files are the central element of my project. These are generated from a Wikidata query generated through the WikiData Query Service. WQS uses SPARQL which can be used to query through any document or data on the Wikidata service.

Once the GeoJSON files were procured, it was only a matter of displaying them on the maps. Here comes the difficult part. OpenLayers as the name says used layers to display components of a map. These layers must be in the correct order to be rendered properly. Hence, in my case, the satellite map tiles needed to go first, then the OSM locational tiles and then the overlays. This was ensured by calling the function for the overlays after all the layers were rendered. This was a challenge initially, because the static tiles were rendered through a php-based tile-server that rendered the tiles. This step took a while,but was finally complete.

Running tests and finalizing the Pull Request

As Tim said, every PR must undergo at least the following tests :

Smoke Test
Functional Test

While these were completed, my week 1 came to a close, and I will now be having my week-end Video Call with my mentors to discuss the progress and the next goals.

Coding Period - Week II

With yesterday’s call, the following things were decided to be worked on :

Displaying multiple GeoJSON files by looping through them, while they are stored offline.
Replace the blue dots with some labels and markers.

Displaying multiple GeoJSON files by looping through them, while they are stored offline.

Having multiple GeoJSON files displayed as a layer on the maps would require to have a PHP server, that would give the list of files as an array. Each file in the array should be parsed an a JSON file by means of AJAX. Currently, this is the challenge for me, since I neither know AJAX nor PHP. Working on it currently.

UPDATE: I managed to write a PHP script to return the file names of the geojson files available in a particular directory. It was nothing huge. It just made use of the glob() function that enters all the relevant files matching a particular string into an array. Then simply an echo statement to return the array to the AJAX call, made it work.

<?php

$files = glob('./data/geojson/*.geojson');

echo json_encode($files);

?>

The array was received into the function, which then looped through each element present in the array( in this case, geojson filenames) and then passes each of those file names into a VectorLayer functions, that store each layer formed, into a layerjson{} object. This way, it’s just a matter of calling the function ```map.addLayer()``` in the correct order, to get the points marked on the map.

Fixing the SPARQL Queries

The SPARQL I had made weren’t properly formatted for being parsed as JSON files. They weren’t returning the correct parameters to be judged as geojson. After playing with multiple geojson files, I found that, instead of passing the coordinates in a single comma-separated field of location, it was essential to convert them to different fields of lat and long to get it working. So, if initially, ?loc contained the location in a single field,

BIND(STRBEFORE(STRAFTER(STR(?dplLoc), ' '), ')') AS ?lat)

BIND(STRBEFORE(STRAFTER(STR(?dplLoc), 'Point('), ' ') AS ?long)

These lines made sure that we had two different fields for latitude and longitude. Hence, I was able to get the geojson files working.

Working with Guest Additions

I wasn’t able to download the South Asia .mbtiles from the admin console. It was getting cancelled everytime. Maybe some connection issue. So I downloaded it into my Host Windows from Archive.org. The file was around 11GB. A challenge was to get the mbtiles into the Ub18 VM. Standard processes like Filezilla and SCP, required an internet connection, I guess. So I thought of trying out VirtualBox’s Shared Folder feature. The process to get started is nicely mentioned here. I had to do a few additional steps. I wasn’t able to get VBoxAdditions in the first step, so I did

sudo apt-get install virtualbox-guest-utils

Although, this seemed to install a non-compatible version for my version, it did the job well. Another thing I had to take care of was adding my <username> to the list as I was initially not being able to mount and then not being able to access the shared folder. So for that this worked,

sudo adduser <yourUsername> vboxsf

Thus, I was able to get the mbtiles inside my VM,and also this would work as a viable option for file sharing between the systems during functional tests.

Replace the blue dots with some labels and markers.

Regarding the blue dots, we need to find a way to include more locational metadata into a single GeoJSON file. This could possibly be markers, labels, popups and other forms of data. I have been able to get some heading and description into the points, but they can be much better expressed with images and additional information. Will have to work on that.

Let’s see where we get.

Peace.