Indexing and publishing web maps

Web maps provide a useful and interactive experience in map handling and this along with the rich available content they offer justifies their extensive spread on the internet. Despite this fact, the protocols that the operation of web maps is based on are not directly supported by internet browsers so additional software is usually required for accessing web maps.
The most popular open web map protocol is WMS and it is used in web sites along with libraries like OpenLayers or Leaflet to support its operation. In order to index web maps or perform general purpose mapping operations, users should either use GIS packages like QGIS or Global Mapper which are desktop applications with limited portability capabilities or turn to applications like ArcGIS Online with restricted usage and subscription based access.
WMS Map Viewer on line is an http/JavaScript general purpose application for accessing and indexing web maps. The application is provided as SaaS (Software as a service) so that the necessary software required for managing web maps is rapidly loaded while accessing the web site of the app. Then the users may open the maps of their choice by simply entering its URL and layer name or choose from a list of preconfigured connections to various map sources.
The application is freely accessible without needing to create an account or subscribe. Also, it is compatible with all modern versions of the WMS protocol providing easy access to any web map. There are also other interesting built-in features like the ability to overlay map layers over other open maps enabling the composition of multilayer maps; the ability to open and display .kml file; the function of drawing on the maps and outputting the drawings as point, line or polygon .kml files.
An important feature of the app that empowers portability is the ability to store all open map layers in a single file that users may share and view from anywhere. The save & share feature is accessible as an option from the Tools drop down menu or from the Layers button. Using this feature the map layers that the user has open are saved in an .html file which contains all the information to load them again on the same or any other device desktop or mobile.
So, the saved .html files may be posted, shared or published on line as part of a website. Accessing the files from any device will open WMS Map Viewer on line with all the layers loaded as they were saved. These features make this application ideal for indexing, sharing and publishing sets of web map layers as third-parties may access and display the map without installing extra software everything will be loaded after double clicking (or tapping) on the .html file.

https://wms-viewer-online.appspot.com/

Create files with Javascript

In web apps (the new trend is to call them progressive apps) it is often useful to create files on the fly. On this I talk about creating files on the user’s computer by executing some piece of code on the user’s browser and then let the user view them and even store them locally. The other alternative is to create files on the cloud so that the user may then download them, but sometimes this is not necessary. So let’s see how this can happen by placing a few lines of Javascript code on the web app.
The following example regards creating text files from text that is inputted by the user. For this we need a web page with basic formation and a textarea with id=”input” where users may type whatever they wish. Then some function that creates a file from input. And finally a function that makes the file downloadable.
The makeTextFile function creates the file on text input. At first it creates a null variable named textFile which will become the text file. Then a Blob named “data”. A blob is an object of immutable data (text or binary) that may be used like a file and Javascript uses blobs in order to manipulate files; in some cases this technique is used in order to prevent direct access of a script to the file system. You may create blobs containing binary or text data but in this example we focus on text files so our blob is of type 'text/plain'. Next step is to create a URL pointing to the blob using function URL.createObjectURL.

var textFile = null;
function makeTextFile (text) {
    var data = new Blob([text], {type: 'text/plain'});
    textFile = URL.createObjectURL(data);
    return textFile;
  };

Function txt() that follows stores user input in variable textbox which will then be the input of makeTextFile function. Then the link with id=”downloadlink” of the web page is declared to point to the output of makeTextFile function. So by clicking on the link, user input is downloaded as a text file.

function txt() {
    var textbox = document.getElementById('input');
    var link = document.getElementById('downloadlink');
    document.getElementById('downloadlink').download='notes.txt';
    link.href = makeTextFile(textbox.value);
}

Find the full source code of the above example in this link. In order to make this example I used various sources and examples from the web so there is no ownership on it; in other words “use it as you wish”.

Building interaction between Android and Javascript

In this post I present methods on how to build interaction between Javascript content in a webpage and the Java code of an Android application. When building an application with web content (build-in or loaded from network) there is always the issue on how it will communicate with the rest of the application. The interaction has to be two-way. The web content probably hosted in a webview has to be able to affect the rest of the application based on user interaction and Android must be able to change the web content. There is not a unified way to build a two-way bridge between the two interfaces, Javascript and Android have to bind with each other using separate processes.
Let’s suppose that you are building an app with one activity named Activity1that hosts a webview which opens the local file HTML1.html (the examples that follow also work when files are somewhere in a network and not local). In Activity1 there are some String variables v1, v2, v3. Corresponding variables with capital letter names are defined in some javascript code enclosed in HTML1.

At first the variables and the webview in Activity1 have to be declared properly and Javascript support has to be enabled.

Code to place in Activity1

String v1, v2, v3;
WebView webView;

//In the onCreate method add
webView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);

Variable declaration in a script in HTML1.html

var V1=”Value of v1”;
var V2=”Value of v2”;
var V3=”Value of v3”;

Updating variables in Javascript

I present two techniques for updating the variables in Javascript. In the first the necessary code will be loaded in Javascript before HTML1 will be loaded in webview and this is the main advantage of this technique.
In order to change the Javascript code that runs in webview, I create programmatically a file that contains the code I care to run and then I insert it to HTML1. As a technique may not be so elegant, but it has certain advantages. Another advantage of this technique is that the preservation of the information that regards the variables does not depend on the life circle of Activity1. So, the file may be store while running Activity1 and other activities that will open in the future may read it and update their variables.

In Activity1

At first the path of the file that will be dynamically created has to be defined. A good choice is to place it in the files directory of the application. The directory path can be accessed using the getFilesDir() method. Then it is only necessary to add the code that creates the file.

File jsfile = new File(getFilesDir() + File.separator+"new.js");

public void filecreator(){

v1="new value1";
v2="new value1";
v3="new value1";

BufferedWriter buffer = null;       
    try{               
        buffer=new BufferedWriter(new FileWriter(jsfile));
        buffer.write("V1="+v1+";");
        buffer.newLine();
        buffer.write("V2="+v2+";");
        buffer.newLine();
        buffer.write("V3="+v3+";");
        buffer.newLine();
        buffer.flush();       
        buffer.close();
}
    catch (IOException ex){
        String ioerror=ex.toString();
    }
}

Then simply call the method while running Activity1.

In HTML1.html

Insert the newly created file in the body or the head of the html code.

<script src="jsfile.js" type="text/javascript"></script>

If both HTML1.html and jsfile.js are in the same directory then it is not necessary to determine the full path of the file and the code above is enough.

Another more elegant technique is to load the script using method
webView.loadUrl(("javascript: /*some code*/")
In this case you only add the following code in Activity1 and don’t make any changes in HTML1.

webView01.loadUrl("javascript: V1=’new value1’; V2=’new value1’; V3=’new value1’");

The above script will be executed after HTML1 has been fully loaded in webview. You have to be careful on this, as executing the script before loading the html file might lead to undesired behavior.

Updating Android variables from Javascript

Let’s see how running Javascript can affect the variables of Activity1 by modifying the example in Android Developers site (link).

In Activity1 

Add a WebAppInterface class. The methods of the class must overidde JavascriptInterface in order to work with the latest versions of Android.

public class WebAppInterface {
   Context mContext;

   WebAppInterface(Context c) {
       mContext = c;
   }
       
   @JavascriptInterface
   public void updatevariables(String V1, String V2, String V3) {
        v1=V1;

        v2=V2;
        v3=V3;
   }

}

In this implementation, the method updatevariables is called from Javascript that runs in the webview. The values that should be set in the variables v1, v2 , v3 are passed to the formal parameters of the method (String V1, String V2, String V3) and the code that follows updates the variables in Activity1.

Code to place in HTML1.html

function updatevariables (V1, V2, V3) {
    Android. updatevariables (V1, V2, V3);
}

In some part of the script in HTML1.html call the function updatevariables and the values of v1, v2, v3 will be updated.