CCLME ECO-GIS Viewer utilizes ASP.NET MVC 5, a platform for creating scalable, standards-based web applications that leverages well-defined design patterns and the .NET Framework.
A web service is a set of open protocols and standards used to exchange data between applications or systems. The CCLME GIS Viewer uses RESTful web services utilizing Node.js for non-map services and ArcGIS Server for map-related services.
Both Node.js and ArcGIS Server allow to create RESTful web services. RESTful web services are designed to perform optimally on the Web. Representational State Transfer (REST) is an architectural style that sets limitations, such as the consistent interface, that, when applied to a web service, result in desired features such as performance, scalability, and changeability, allowing services to function optimally on the Web. In the REST architectural approach, data and functionality are treated as resources and accessed via Uniform Resource Identifiers (URIs), which are Web links. The resources are acted upon using a series of basic, well-defined operations. The REST architectural style limits an architecture to a client/server model and is intended to employ a stateless communication channel, often HTTP. In the REST architecture approach, clients and servers exchange resource representations over a standardized interface and protocol.
The logic of the application is shown at the next figure. A REST API call is used by the user to send a request to the server in JSON or GeoJSON format, using the appropriate html view. In the server, Node.js or ArcGIS Server route the request and process it using the appropriate geoprocessing. These geoprocessing web services connect to the Oracle database and manage the response by sending a new object to the app. The MVC app then processes this information using the associated controller and displays it in an HTML view.
CCLME GIS Viewer employs various libraries and frameworks to generate graphs and maps:
• ArcGIS API for JavaScript 3.4x: This library is intended to increase the efficiency when developing engaging, appealing web mapping apps. The API blends modern web technology with sophisticated geographical capabilities, building high-performance apps and intelligent data visualizations.
• Dojo Toolkit: Dojo is a JavaScript framework for building online applications. The Dojo Toolkit is subdivided into many key packages that make a complete distribution of Dojo Toolkit (dojo, dijit, dojox and util). Apart from jQuery, this framework is used and is loaded before the ArcGIS API for JavaScript.
• Highchart: Highchart.js is a JavaScript library that creates dynamic graphs.
• D3.js: D3.js is also a JavaScript library that creates dynamic graphs.
• Datatables: Datatables is a plugin for the jQuery library. It is a highly adaptable tool built on the principles of progressive enhancement that can add advanced interaction controls to any HTML table.
• SweetAlert2: SweetAlert2 is a beautiful, responsive, customizable, and accessible (WAI-ARIA) replacement for JavaScript popups.
• IntroJS: Intro.js is a lightweight, open-source user onboarding library.
The following figure depicts the relationship between the various components of the CCLME GIS Viewer.
Once the user has accessed the main viewer page, it is possible to distinguish three different regions with which to work.
1. Map: The map occupies most of the user interface. The map is created using the ESRI API for JavaScript library and has a Web Mercator WGS 84 (EPSG: 3857) projection. Most of the user interaction with the application occurs in this region, which also displays the results of various analyses.
Within the map there are different navigation tools to use:
• Zoom Tool:: This tool allows to change between the various existing zoom levels. These levels correspond to Google/Bing/ESRI zoom map levels for standard web applications using the Web Mercator projection system.
• Home Tool: This tool allows to re-center the map within the CCLME region.
• Basemap selector: This button allows users to choose between ESRI's ocean and satellite basemap.
• Overview Map: This tool allows to deploy a smaller-scale map in the upper right corner. This map contains a rectangle with the area covered by the main map.
• Coordinates Tool: The mouse position's coordinates in the WGS84 (EPSG: 4326) coordinate system are displayed in the lower left corner.
2. Top Bar: This bar allows users to access basic information as well as a variety of tools for each analytic tool. For example, the user can view project information, access measurement tools, and clear the user-added layers.
• Tools button: This button provides access to a range of geospatial tools for each analytic tool, such as influence area calculators, interpolation tools, and tools for working with your own data. The tools are described in detail below.
• Clear button: This button allows to clear the data and markers displayed on the map.
• Legend button: The 'Legend' button in the top bar allows to display the Legend panel on the map. This panel includes subpanels that can be expanded by clicking on their titles.
The subpanel 'Legend' displays the styles used for each layer shown on the map.
The subpanel ‘Layer List’ displays a series of radio buttons that allow to hide or show the various layers loaded in the map.
• About button: This button displays a popup with two tabs, one of which contains general information about the data used in the corresponding tool. The other one includes a description of how to use the corresponding tool.
• Project button: This button displays a popup that contains information about the project for which the CCLME Eco-GIS Viewer was developed.
• Start Tour button: This button initiates the Step-by-Step Guides for each Analytic Tool.
3. Left sidebar: This part lists the various Analytic Tools available in the CCLME Eco-GIS Viewer. Each Analytic Tool is described in its 'About' section.
As previously discussed, the 'Tools' button in the upper bar provides access to a number of auxiliary tools that are common to the various analytic tools.
• Geodesic Tool: From this button, the Geodesic Panel is displayed.
Geodesic Tools panel allows users to calculate influence areas (Buffers). The buffer method can perform geodetic calculations with a Cartesian surface or Geoids as input.
The Unit selector allows the user to choose between different units of measurement (Meters, Kilometers, Miles, and Nautical Miles).
The Distance input allows the user to enter the radius value of the area of influence in the units selected.
Once the user has selected the various options, click the Create Buffer button and then click on the map to calculate the influence area. As a result, a polygon on the map with the calculated area is drawn. This polygon will be used as a selection tool in several analytic tools, including the Biological Data Tool. All features that are included or cut by the area of this polygon are selected.
• Print Tool: This button opens the Print Panel.
Click to the right of the 'Print' button to open a subpanel containing the various size templates available.
Click the Print button, and after a few seconds, a pdf file with the map image opens in a new tab in your browser.
• Measures Tool: This button opens the Measurement Panel.
Click to select the units (Square Kilometers, Nautical Miles, Degrees) and draw a polygon on the map to calculate the size of the area of interest.