Developer Manual - gsi-upm/demo-smartopendata GitHub Wiki

This section explains how to use and configure widget features on the SmartOpenData application. SEFARAD provides users the capability to create own widgets without being worried about they are going to display the correct information. Thanks to the Knockout.js framework, it is really easy to develop widgets without consider how the filtered data and updating mechanisms can be instanced. To deploy the SmartOpenData application by using a map widget please follow the steps described below.

1. CONFIGURATING THE SEFARAD TOOL AND FUSEKI SERVER

Configure the fuseki server, the SEFARAD tool and grunt utility by following the procedures explained in steps 2, 3 and 4 of section detailed installation.

2. CREATING A MAP WIDGET

Create a file named smartopendatawidget.js in the {$path}/demo-smartopendata/d3 directory and make the following changes:

Create a section named general configuration by adding a description for the type and widget category. Next listing shows the values to be included.

   // <#general configuration> 
   var widgetName = 
     {
       // Widget name.
          name: "SmartOpenData Widget",
       // Widget description.
          description: "Map widget for the smart open data",
       // Path to the image of the widget.
          img: "img/widgets/widgetMap.png",
       // Type of the widget.
          type: "openlayersMap",
      }

Add a section for describing how the widget can be renderized. This section should describes how objects can detect and respond to changes. Next listing shows the values to be included.

 render: function (loc) {

    if(loc != 'Left' && loc != 'Right') loc = 'Left';

    var id = 'A' + Math.floor(Math.random() * 10001);
    var configid = 'A' + Math.floor(Math.random() * 10001);
    var field = openlayersMap.field || "";
    var properties = {
        "id": ko.observable(id),
        "configid": ko.observable(configid),
        "title": ko.observable(openlayersMap.name),
        "type": ko.observable(openlayersMap.type),
        "field": ko.observable(field),
        "collapsed": ko.observable(false),
        "showWidgetHelp": ko.observable(false),
        "help": ko.observable(openlayersMap.help),
        "showWidgetConfiguration": ko.observable(true)
    };
    vm.addNewWidget(properties, loc);
    openlayersMap.paintConfig(configid);
    openlayersMap.paint(id);

3. CUSTOMIZING THE MAP WIDGET CONTENT

Include the functions for controlling the map widget by adding the core code inside the paint method. Next listing shows a partial view of the values to be included. Please consider checking the github smartopendata wiki for more details.

map = new OpenLayers.Map(map_div.node(), { // Resoluties (pixels per meter) van de zoomniveaus: resolutions: [3440.64, 1720.32, 860.16, 430.08, 215.04, 107.52, 53.76, 26.88, 13.44, 6.72, 3.36, 1.68, 0.84, 0.42, 0.21], //units: 'm', controls: [ new OpenLayers.Control.TouchNavigation({ dragPanOptions: { enableKinetic: true } }), new OpenLayers.Control.MousePosition({ prefix: '<a target="_blank" ' + 'href="http://spatialreference.org/ref/epsg/4326/">' + 'EPSG:4326 coordinates: ', separator: ' | ', numDigits: 2 }), new OpenLayers.Control.PanZoom(), new OpenLayers.Control.Navigation()

            ],
            projection: new OpenLayers.Projection("EPSG:3857"),
            displayProjection: new OpenLayers.Projection("EPSG:4326")       
        });