Getting Started

Setup

The olexp library has two dependencies that must be included, OpenLayers 5 and w2ui, and the latter of which also depends on jQuery. Therefore, the following is the minimum needed to set up an olexp web application. 

  <link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet" type="text/css"/>
  <link href="https://unpkg.com/w2ui@1.4.3/w2ui.min.css" rel="stylesheet" type="text/css" />
  <link href="https://unpkg.com/olexp/dist/olexp.min.css" rel="stylesheet" type="text/css" />

  <script src="https://unpkg.com/jquery@2.1.3/dist/jquery.min.js"></script>
  <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
  <script src="https://unpkg.com/w2ui@1.4.3/w2ui.min.js"></script>
  <script src="https://unpkg.com/olexp/dist/olexp.min.js"></script>

Usage

Using the olexp library is as simple as creating a <div id="..."> container and then providing its id to the olexp.Explorer(id) constructor. The default explorer provides reasonable defaults for the the explorer's layout and map settings. By default the toolbar is displayed across the top with a layer manager on the left and the map in the center. Note that the <div> container must have its dimensions defined in order for the rendered explorer to be visible.

Example

Below is the standard explorer that is displayed when no options are provided or layers added - an empty map with the default toolbar and layer manager. 

  <div id="explorer" style="height: 500px; width: 100%;"></div>
  <script>
      const explorer = new olexp.Explorer('explorer');
  </script>

Options

The olexp.Explorer(id, options) constructor takes an optional second argument that allows the user to override the default settings and change properties like the placement and styling of various components. The following example shows a subset of some of the available options. Several of the options are w2ui components and can be modified according to their documentation. The olmap option allows the user to provide customized arguments to the OpenLayers map constructor. For a complete description see the ExplorerOptions documentation. 

    options = {
        controls : {             // enable/disable various toolbar controls
            editsettings : true, // control to edit map settings
            exportmap    : true, // control to export the map to an image
            graticule    : true, // control to edit grid lines
            layercontrol : true, // control to add tiles and vector layers
            layermanager : true, // control to manage layers
            layermenu    : true, // control to view item options
            measure      : true, // control to measure lines and areas
            toolbarhide  : true  // control to hide the toolbar
        },
        details : {              // preview panel to displays layer details
            hidden    : true,
            resizable : true,
            size      : '25%',
            type      : 'preview'
        },
        map : {                   // main panel with ol3 map
            type    : 'main'
        },
        navigation : {            // navigation panel holding the layer manager
            resizable : true,
            size      : '15%',
            type      : 'left'
        },
        olcontrols : {            // enable/disable various ol.Map controls
            fullscreen    : true, // control to switch to full screen mode
            mouseposition : true, // control to view mouse position coordinates
            overviewmap   : true, // control to display overview map
            rotate        : true, // control to rotate map
            scaleline     : true, // control to display scale line
            zoom          : true, // control to display zoom buttons
            zoomslider    : true, // control to display zoom slider
            zoomtoextent  : true  // control to display zoom extent button
        },
        olinteractions : {        // enable/disable various ol.Map interactions
            draganddrop : true    // drag and drop interaction
        },
        olmap : {                 // ol.Map constructor options
            controls : [],
            view     : new ol.View({center: [0,0], zoom: 4})
        },
        outline : {               // panel that outlines the displayed items
            type  : 'main'
        },
        toolbar : {               // toolbar with map and layer controls
            size  : '40',
            style : 'padding: 5px;',
            type  : 'top'
        },
    };

API

The olexp API allows the user to directly modify the w2ui layout and its components (i.e., toolbar, navigation, and map panels) as well as the OpenLayers map. The OpenLayers and w2ui documentation for these API properties should be referenced when altering these objects. For example, modifying w2ui objects after they have been rendered can require calling their respective refresh() method in order for the change to be displayed. The object returned by the olexp.Explorer constructor has the following API. For a complete description see the ExplorerAPI documentation.

Property Type Description
details w2grid Layer details panels. Display the details of the later that is currently selected in the outline sidebar.
layout w2layout Explorer layout object. Contains the map, toolbar, and navigation panels. Can maintain up to 3 additional panels that are stretchable and resizable.
manager ManagerAPI Manager to access and control managed items.
map ol.Map OpenLayers map object used to add layers, overlays, controls, etc.
navigation w2layout.panels Layer manager navigation panel. The panel that contains the outline sidebar and detail grid.
options ExplorerOptions Explorer options object that contains the options argument passed to the explorer constructor.
outline w2sidebar Layer manager outline panel that allows the user to manage the ordering and properties of the map layers.
toolbar w2toolbar Explorer toolbar that contains map and layers controls.