Adding a javascript layer

Introduction

In this tutorial we will show an example of creating a javascript layer. These types of layers are added to the map using OpenLayers. An example of javascript layers are Google and OpenStreetMap.

In this tutorial we will add a layer to our map that will show the earthquakes locations for last 7 days, pulled dynamically from USGS Earthquake Hazards Program.

Creating and including javascript source files

Create a Earthquakes.js file in "public/static/js/giscuit/Layer/" folder, this will be used for the desktop layout. This file should contain a Giscuit.Layer.Earthquakes object that extends a OpenLayers.Layer.Vector. Create a Earthquakes.js file in "public/static/js/giscuit/Mobile/Layer/" folder, this will be used for the mobile layout. This file should contain a Giscuit.Mobile.Layer.Earthquakes object that extends a OpenLayers.Layer.Vector.

OpenLayers provides support for a vast majority of data formats, so you can extend the corresponding Layer class (ex. for Google layers we extend OpenLayers.Layer.Google class). Our data is in the GeoRSS format, OpenLayers has a GeoRSS layer class but it is recommended to use a Vector layer instead, we will extend OpenLayers.Layer.Vector class and parse data by ourselves. One thing to note about adding javascript layers in Giscuit, if you plan to select features you should use a global select control (gt.map.globalSelectControl), this way you will avoid conflicts with other select controls.

Giscuit.Layer.Earthquakes = OpenLayers.Class(OpenLayers.Layer.Vector, {
    
    initialize: function(name, options) {
        //Required
        this.visibility = false;
        
        var newArguments = [];
        newArguments.push(name, options);

        //Name
        newArguments[0] = 'Earthquakes';
        
        //Options
        newArguments[1] = {
            //Set layer projection
            'projection': 'EPSG:4326'
        };
        
        //Call constructor
        OpenLayers.Layer.Vector.prototype.initialize.apply(this, newArguments);
        
        //Events
        this.events.on({
            'visibilitychanged': this.load
        });
    },
    
    load: function() {
        //Load only if layer was not already loaded and is visible
        if(! this.visibility || this.features.length > 0) {
            return;
        }
        
        var url = gt.config.httpProxyPath + encodeURIComponent('http://earthquake.usgs.gov/earthquakes/catalogs/eqs7day-M5.xml');
        OpenLayers.Request.GET({
            url: url,
            success: this.add,
            scope: this
        });
    },
    
    add: function(o) {
        //
        var doc = o.responseXML;
        if (! doc || ! doc.documentElement) {
            doc = OpenLayers.Format.XML.prototype.read(o.responseText);
        }
        
        //Set projection
        var options = {};
        if (this.map && ! this.projection.equals(this.map.getProjectionObject())) {
            options.externalProjection = this.projection;
            options.internalProjection = this.map.getProjectionObject();
        }
        
        //Add features
        var format = new OpenLayers.Format.GeoRSS(options);
        var features = format.read(doc);
        
        this.addFeatures(features);
    },

    CLASS_NAME: "Giscuit.Layer.Earthquakes"
});

Download the full code with dependencies (Read/write GeoRSS parser) used in the example here and place it in giscuit installation directory (default installation directories for Microsoft Windows "C:\ms4w\Apache\htdocs\giscuit", for Linux "/var/www/giscuit").

Then a request is made to the data link specified it is transmitted through a proxy (this is needed due to Same origin policy). Note that proxy allows connections only to the specified hosts. To add such a host go to "public/proxy.php" and edit the allowed domains array. For our example it will look like this:

1. //Allowed domain names
2. $allowedDomains = array(
3.     'earthquake.usgs.gov',
4. );

Upon receiving response the XML data is read and parsed using OpenLayers.Format.GeoRSS class.

OpenLayers.Format.GeoRSS class is not included in the OpenLayers library which Giscuit uses, so it should be manually added in layer javascript file. If you use any other class dependencies they should be included in this file also.

The final step is to create a javascript layer Add Javascript layer, activate it and set Include file to "Layer/Earthquakes.js". After this you should see the Earth quakes on the map as orange dots (default style) and should be able to get information about them, search them and snap to them while measuring or editing.