Adding vector layers with the File API

The HTML5 File API makes it possible for us to load nearly any kind of file from our hard drive to a browser and process these files with JavaScript. It has capabilities way beyond our use case (it can even handle binary files); thus, it is advisable for every frontend developer to look into it in further detail. The files for this example are named ch03_fileapi.

First, we create a new form as usual. You can grab it from the HTML file.

Creating the interface

The basic interface to access our new functionality is the same, as shown in the previous examples. First, we extend our layer constructor, adding a new button to the layer tree:

var layerTree = function (options) {
[…]
        controlDiv.appendChild(this.createButton('addvector', 'Add Vector Layer', 'addlayer'));
[…]
};

Next, we create a new rule for its button class in our CSS file:

.layertree-buttons .addvector {
    background-image: url(../../res/button_vector.png);
}

We also add a new event listener...