GeoPortal Basics

The GeoPortal source code is stored in the CReSIS/OPS-GEOPORTAL GitHub repository. The geoportal is built from the source code and then the build outputs are pushed into the CReSIS/OPS respository at /conf/geoportal/. The actual web pages live at /var/www/html, so you then need to copy the build outputs to here as well.

Building the geoportal is explained here.

Once the compiled outputs are pushed into the CReSIS/OPS repository, to update the VM from the OPS repository:

sudo -i
cd /vagrant/
git pull
sh conf/tools/updateGeoportal.sh
# Choose yes to updating geoportal and no to enable debug page.

The updateGeoportal.sh script replaces the contents of /var/www/html/* which is what Apache serves with the javascript from /vagrant/conf/geoportal/ (minified Javascript for production).

---

Get the source code

Debugging

Directory Structure

---

Get the source code

From Windows you can use TortoiseGit to grab the OPS-GEOPORTAL files. The main reason to have the files on Windows is so you can minify the javascript as described by GeoPortal Build Process.

From Linux, where it is most convenient to do debugging:

sudo -i
cd /opt/
git clone https://github.com/CReSIS/OPS-GEOPORTAL.git

The basic framework for the software came from OpenLayers.

It also uses the Sencha libraries which are an extension to javascript (these are needed when you compile the javascript).

Many of the scripts are created by Sencha. In addition to minifying the code, Sencha also creates the OPS-all.css file from the scss files.

Debugging

Install PyCharm Community Edition on the VM. This software is nice for editing and changing Javascript code. Eclipse with Javascript should be good too. After downloading PyCharm, uncompress it into /opt/ and create an executable:

sudo -i
tar -xzf /home/ops/Desktop/pycharm-community-2016.1.4.tar.gz -C /opt/
gedit /usr/bin/pycharm

Copy and paste the following into /usr/bin/pycharm:

#!/bin/sh
export PYCHARM_HOME="/opt/pycharm-community-2016.1.4/bin/"

$PYCHARM_HOME/pycharm.sh $*

Make the file executable by running the following in a terminal:

chmod 755 /usr/bin/pycharm

Run pycharm from the terminal. Create a new project by selecting the directory /opt/OPS-GEOPORTAL/ where you should have already done a git clone.

Enable the debug interface (only needs to be done once unless you disable it):

sh conf/tools/updateGeoportal.sh
# Choose no to updating geoportal and yes to enable debug page.

Now changes you make will immediately show up at http://192.168.111.222/debug/ and you can use Google Chrome's developer tools (Ctrl-Shift-I or Menu-->More Tools-->Developer Tools) to debug the page. Choose the "source" tab in the Chrome developer tool and set break points to help to do this. Pressing F5 will reload changes you make on the VM, but break points will stay in place.

Switch to the Network tab and select the Preserve Log Upon Navigation toggle button. Now the breakpoints should be there when you refresh. You can also create a hard breakpoint with the javascript command debugger;.

Directory Structure

These are the basic pieces (there is more but these are the key ones).

OPS-GEOPORTAL/
   app/
      controller/
      model/
      store/
      view/
      Application.js
      Global.js
   build/
   ext/
   geoext/
   ol/
   ol-custom/
   opsBuildPortal.py

app/ this directory contains the actual source code of the application you are creating. Most of the development you do occurs in this directory.

app/controller/ this directory contains all of the controllers. Controllers contain the logic of the views. For example a view defines where a button is rendered and what it looks like and a controller defines what happens when the button gets clicked.

app/model this directory contains all of the models. Models define the data structure of a store. A store is the actual place where data is contained and defines how/where the data comes from. What structure of data the store will contain is defined in the model.

app/store/ this directory contains all of the stores. Stores are where data is contained, accessed, manipulated, and saved throughout the application. Stores can use AJAX to get data, contain hard-coded fixed data, or use other means of retrieving data via the web.

app/view this directory contains all of the views. Views deifne how the application is visually laid out. In some cases (for example the arctic/antarctic maptab views) the logic is contained in the view itself. Having logic in a view is not following MVC exactly but GeoExt + Ext makes this difficult to do sometimes.

app/Application.js is the primary JS file that defines all of the pieces of the Application. Take a look at the file, it is self-explanatory. Make sure to add things here is you create new views/controllers/models/stores.

app/Global.js is a custom file for the OPS-GeoPortal that contains the baseURL for all subsequent requests. Make sure this gets edited in the build (or before the build) to match the system url you are building for.

ext/ geoext/ ol/ are the library source directories. They contain the raw source code for the libraries downloaded directly from the web. No modifications are generally made in these directories.

ol-custom/ is the OPS custom built ol (OpenLayers) library which essentially is a subset of the complete ol source code, but only the pieces the OPS GeoPortal needs/uses. This allows it to load fast. More Information Here

opsBuildPortal.py this python script is used to create new builds of the source code found in app/. For more details on this see (GeoPortal-Build-Process)[https://github.com/CReSIS/OPS/wiki/GeoPortal-Build-Process]