Environmental Sanitation Management Information System - ESMIS

Transcription

1 Environmental Sanitation Management Information System - ESMIS System Manual

2 Contents 1 General Information System Overview Organization of the Manual User Access Level System Summary Open Source Tools Open Layers GeoServer PostGIS QGIS System Configuration Uploading the Data into the web database System Maintenance and Database Update Software Design System Summery E S M I S S y s t e m M a n u a l P a g e i 29

3 Table of Figures Figure 1: QGIS user interface... 4 Figure 2: OpenGeo Suite installation application... 5 Figure 3: OpenGeo Suite 4.7 menu provides access to pgshapeloader option... 6 Figure 4: In the Shapefile Manager View connection details... button allows to establish the connection 7 Figure 5: PostGIS connection wizard appears to request login credentials... 8 Figure 6: Once the connection succeed message appears, it is ready to proceed for next step... 8 Figure 7: The local file directory should be provided via the Add file button... 9 Figure 8: At the local file directory the intended shape file should be selected and open Figure 9: Use Import button to send the inserted files to the server Figure 10: GeoServer web interface Figure 11: Click on the Layers tab and go to Add a new resource button to import the layers Figure 12: Preferred publishing parameters can be set before publishing the layer E S M I S S y s t e m M a n u a l P a g e ii 29

4 1 General Information 1.1 System Overview Environmental Sanitation Management Information System (ESMIS) ESMIS is a web-based information management system, through which most of the existing environmental sanitation and development information related to the services provided by the LAs are included. The proposed ESMIS is expected to provide a tri-partied interactive base for the system operators, and activity managers (officials of the LA) and the service receivers (citizens) of the selected LA areas. The information will be provided, retrieved, updated and verified by both the service providers and the receivers. In the Initial stage, the system will be developed as a GIS database which will include the basic road inventory, building information, development regulations of the pilot area. 1.2 Organization of the Manual This manual consists of five sections: General Information, System Summary, System Configuration, System Maintenance and Database Update and System Summery. General Information section explains the system and the purpose for which the system is intended. System Summary section provides a general overview of the system. The summary outlines the uses of the system s hardware and software requirements, system s configuration, user access levels and system s behavior in case of any contingencies. System Configuration section explains how to get ESMIS and configure it on the device. The section presents briefly the system menu. System Maintenance and Database Update section provides a detailed description of system functions and data configuration. System Summery section provides the overall conclusion of the system manual and where the necessary assistance can be obtained. E S M I S S y s t e m M a n u a l P a g e 1 29

5 1.3 User Access Level The ESMIS web portal shall bring benefit for the Local Authorities in keeping their information related to Sanitary Services updated. Particularly, the web portal allows the information to be spatially analyzed and to work on necessary actions. This system manual provides the guidance about its functionality and updating requirements. Therefore, the relevant divisions in Local Authorities (Planning, Sanitation Management, Infrastructure Management, Public Concerns, etc.) and specifically the Information Technology Managers, Database Operating Managers and Technical Staff can use the System Manual to understand its functional and updating requirements. The ESMIS Web Portal can be accessed via the following link: 2 System Summary The ESMIS consists of a large number of data which will act as a bridge to link the public and municipal officers. In the user's end they will connect with the server via Web Interface or a Mobile App. Users can feed data if they are authorized and all citizens can refer information back. Online transactions for tax payments will also expected to include into the system in further steps. Different ways citizens can access the information is divided into four major categories; Interactive Map, Application Forms, Payment Gateway and Complaints/ Inquiries/ Suggestions. The server space provided for the web portal is obtained by the University of Moratuwa main server and the maintenance shall be carried out by the staff of the university. The server consists of spatial data stored in the database. This spatial database is maintained using QGIS and MySQL. Data that users feed will refer, updated and analyzed by the municipal officers. It will also be done through the same user interface (Web Interface or a Mobile App). There will be different spatial data in the database and map preparation is done using different analysis tools for required purposes. The web portal provides separate access for Administrators and Public. The administrative access is allowed via a username and a password. Therefore, the modifications and extracting information in the web portal is always secured. The Public Access allows only the demonstration of the information. None other than an administrator with a matching username and a password shall be able to work on data modification and frequent updating. E S M I S S y s t e m M a n u a l P a g e 2 29

6 2.1 Open Source Tools Open Layers 3 OpenLayers 3 (OL3) is a fundamental redesign of the OpenLayers web mapping library. OL3 has been rewritten from the ground up to use modern design patterns. It is also designed such that major new features, such as displaying 3D maps, or using WebGL to quickly display large vector data sets, can be added in later releases. Please visit the following website to view OL3 tutorials GeoServer GeoServer is a Java-based software server that allows users to view and edit geospatial data. Using open standards set forth by the Open Geospatial Consortium (OGC), GeoServer allows for great flexibility in map creation and data sharing. Please visit the following website to view GeoServer instructions PostGIS PostGIS is a spatial database extender for PostgreSQL object-relational database. It adds support for geographic objects allowing location queries to be run in SQL. Please visit the following website to view PostGIS instructions QGIS Quantum GIS is an open source Geographic Information System that supports most geospatial vector and raster file types and database formats. The program offers standard GIS functionality, including a large variety of mapping features, data editing, on-the-fly projection and GRASS digitizing. Its support for plugins expands its functionality further by providing additional tools such as GPS data support, geo referencing, and additional mapping elements. Please visit the following website to view QGIS instructions. E S M I S S y s t e m M a n u a l P a g e 3 29

7 3 System Configuration The web portal is accessible for public via the web site and for the database management a special tab is included in the web site. The public will be given a free access where the admin access will be granted via a secured admin account for administration purposes. 3.1 Uploading the Data into the web database Step 1 Data Preparation Qgis open source software is used for the preparation of dataset to be uploaded in the web server. This web portal requires a spatial data set of administrative boundaries, infrastructure, sanitation facilities, public amenities, land uses and built structure and any other relevant information within the local authority boundary. At the initial stage the local authorities will be given the opportunity to work on the supplied data sets only. Inclusion of new data layers will be done by the university staff. Figure 1: QGIS user interface E S M I S S y s t e m M a n u a l P a g e 4 29

8 Step 2 Installation of OpenGeo Suite 4.7 The task can be completed by using the OpenGeoSuit 4.7 application which provides free of charge access for building geospatial web applications. OpenGeo Suite offers a variety of ways to import, export, transform, and serve spatial data to the web, and make it interactive. Once the Suite components are installed, remotely or locally, you can configure and manage those using PostGIS utilities, command line tools, the OpenGeo Suite Explorer for QGIS, the GeoServer web interface, or by using the GeoServer REST API or Boundless SDK. Also visit to try out free tutorials and learn more at education center. Figure 2: OpenGeo Suite installation application E S M I S S y s t e m M a n u a l P a g e 5 29

9 Step 3 Open pgshapeloader Once the application is installed, the following interface can be obtained from the pgshapeloader option under the OpenGeo Suite 4.7 title in the Start menu. Figure 3: OpenGeo Suite 4.7 menu provides access to pgshapeloader option There are several other options provided under the same title for different purposes. Dashboard HTML Documentation pgadmin pgshapeloader E S M I S S y s t e m M a n u a l P a g e 6 29

10 The PostGIS Shapefile Import/Export Manager provides options to identify the connection details with the server and the local pc, to import shape files into the server or to export shape files from the server. The shape file exchange does not function unless a consistence internet connection is established. Figure 4: In the Shapefile Manager View connection details... button allows to establish the connection E S M I S S y s t e m M a n u a l P a g e 7 29

11 Step 4 Establishing the internet connection The first requirement of the application is to establish a consistent connection with the server via internet. Using the View connection details button the network status can be monitored. Figure 5: PostGIS connection wizard appears to request login credentials Using the provided credentials with the database administrator the connection shall be established with the web server. Once the connection is correctly established the following message will be displayed in the application. Figure 6: Once the connection succeed message appears, it is ready to proceed for next step E S M I S S y s t e m M a n u a l P a g e 8 29

12 Step 5 Adding Files in the form of shape files (.shp) Using the Add File button a shape file (.shp) can be inserted into the application. Figure 7: The local file directory should be provided via the Add file button E S M I S S y s t e m M a n u a l P a g e 9 29

13 Figure 8: At the local file directory the intended shape file should be selected and open Step 6 Setting of preferred modes Once a shape file is inserted several options are given at the mode tab. The following options are most used in this process. Create Using this option a new layer can be created in the server Append An already inserted layer can be updated with layer changes using this option. Delete If a layer needs to be removed from the server the Delete option can be used. Under the Rm tab the tick can be turned on if the imported file needs to be removed from the Import/Export Manager. E S M I S S y s t e m M a n u a l P a g e 10 29

14 Once the preferred settings are made the Import button will import the file into the server. Figure 9: Use Import button to send the inserted files to the server Step 7 Publishing the imported shape files in the GeoServer account To publish the imported shape files in the GeoServer it is required to sign in to a GeoServer account using the following web address. Or Using the Dashboard option under the OpenGeo Suite 4.7 title in the Start menu. The login credentials should be provided at the login option to be logged into the respective GeoServer account. Once the correct login credentials are provided you will be directed into the GeoServer account. E S M I S S y s t e m M a n u a l P a g e 11 29

15 Figure 10: GeoServer web interface Step 8 Adding new resources To go to the imported layer, it is required to go to the Add a new resource button in the Layers tab. Figure 11: Click on the Layers tab and go to Add a new resource button to import the layers E S M I S S y s t e m M a n u a l P a g e 12 29

16 Step 9 Finalizing the publish options Under the New Layer page, the imported shape file will be displayed. The Publish option provided in the action tab shall direct you to select the preferred publishing options. Figure 12: Preferred publishing parameters can be set before publishing the layer E S M I S S y s t e m M a n u a l P a g e 13 29

17 4 System Maintenance and Database Update Once the layer is published, it is required to provide an option for selection of the published layer. The following processes will guide towards the task. 4.1 Software Design The following HTML script is to make sure that the web interface is compatible with any screen resolution. Therefore, can be used as a mobile application or as a desktop application. <html lang="en"> <head> <meta content="text/html; charset=utf-8" http-equiv="content-type"> <meta content="ie=edge" http-equiv="x-ua-compatible"> <meta content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width" name="viewport"> <meta content="yes" name="mobile-web-app-capable"> <meta content="yes" name="apple-mobile-web-app-capable"> <link rel="stylesheet" href=" <!--<link href="webapp.css" rel="stylesheet">--> <link href="./resources/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <link href="webapp.css" rel="stylesheet"> <style>.subselection { display: none; } </style> The following HTML script directs to the selection menu at the top right hand corner. The menu consists the selection between layers and the selection of attributes related to the layers. <nav class="navbar navbar-default" id="toolbar" role="navigation"> <div class="navbar-header"> <button class="navbar-toggle" data-target="#navbar" data-toggle="collapse" type="button"> <span class="sr-only"> Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> E S M I S S y s t e m M a n u a l P a g e 14 29

18 <a class="navbar-brand" href="#">gampahamc_post</a> </div> <div class="collapse navbar-collapse" id="navbar"> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#"> Measure <span class="caret"> <span> </span> </span> </a> <ul class="dropdown-menu"> <li><a href="#" onclick="measuretool('distance')"> Distance </a></li> <li><a href="#" onclick="measuretool('area')"> Area </a></li> <li><a href="#" onclick="measuretool(null)"> Remove measurements </a></li> </ul> </li> </ul> </div> </nav> <div id="content" class="content"> <div class="row"> <div id="map" class="col-sm-10"> <div class="ol-popup" id="popup"> <a class="closer-icon" href="#" id="popup-closer"> </a> <div id="popup-content"> Popup</div> </div> </div> This HTML script provides the series of attributes to be selected from the given menus. The given options filter the values included in the database according to the user preferences. <div id="mymenu" class="col-sm-2"> <ul id="filterlist"></ul> <select id="opts" class="layerselection"> <option value="">select a layer</option> <option value="#building">buildings</option> <option value="#roads">roads</option> E S M I S S y s t e m M a n u a l P a g e 15 29

19 </select> <div id="building" class="subselection"> <select class="layerselection "> <option value="" selected="selected">select a field</option> <option value="#use">use</option> <option value="#foorarea">floor Area</option> <option value="#propertyvaluation">property Valuation</option> <option value="#ratepayment">rate Payment</option> <option value="#roofmaterial">roof Material</option> <option value="#wallmaterial">wall Material</option> </select> <div id="use" class="subselection"> <select name="building" class="valueselection buildingselection"> <option value="" selected="selected">select Option</option> <option value="residential">residential</option> <option value="commercial">commercial</option> <option value="other">other</option> </select> </div> <div id="foorarea" class="subselection "> <select name="f_area" class="coupleselection buildingselection" data-value=".floorarea"> <option value="" selected="selected">select Option</option> <option value="=">equivalent</option> <option value=">">less than</option> <option value="<">greater than</option> </select> <input type="text" class="floorarea coupleselectionvalue"> </div> <div id="propertyvaluation" class="subselection"> <select name="p_valuation" class="coupleselection buildingselection" data-value=".propertyvaluation"> <option value="" selected="selected">select Option</option> <option value="=">equivalent</option> <option value=">">less than</option> <option value="<">greater than</option> </select> E S M I S S y s t e m M a n u a l P a g e 16 29

20 <input type="text" class="propertyvaluation coupleselectionvalue"> </div> <div id="ratepayment" class="subselection"> <select name="r_payment" class="coupleselection buildingselection" datavalue=".ratepayment"> <option value="" selected="selected">select Option</option> <option value="=">on</option> <option value=">">before</option> <option value="<">after</option> </select> <select class="ratepayment coupleselectionvalue"> <option value="" selected="selected">select Option</option> <option value="2016">2016</option> <option value="2015">2015</option> <option value="2014">2014</option> <option value="2013">2013</option> <option value="2012">2012</option> <option value="2011">2011</option> <option value="2010">2010</option> </select> </div> <div id="roofmaterial" class="subselection "> <select name="r_material" class="valueselection buildingselection"> <option value="" selected="selected">select Option</option> <option value="tile">tile</option> <option value="asbestos">asbestos</option> <option value="concrete">concrete</option> <option value="zink">zink</option> </select> </div> <div id="wallmaterial" class="subselection "> <select name="w_material" class="valueselection buildingselection"> <option value="" selected="selected">select Option</option> <option value="plaster">plaster</option> <option value="cement Block">Cement Block</option> <option value="brick">brick</option> E S M I S S y s t e m M a n u a l P a g e 17 29

21 <option value="no wall">no wall</option> <option value="other">other</option> </select> </div> </div> <br/> <br/> <div class="clear"></div> The following Java script (.js) provides functions required to make the layers visible or hidden as the user checks var infras = new ol.layer.vector({ title: 'Infra', source: new ol.source.vector({ url: 'layers/infrastructure.json', format: new ol.format.geojson() }), style: new ol.style.style({ image: new ol.style.circle({ radius: 6, //fill: new ol.style.fill({color: 'red', opacity: 0.4}), stroke: new ol.style.stroke({color: 'red', width: 2}) }) }) infras.setvisible(false); var sanitation = new ol.layer.vector({ title: 'Sanitation', source: new ol.source.vector({ url: 'layers/sanitary.json', format: new ol.format.geojson() }), style: new ol.style.style({ image: new ol.style.circle({ radius: 6, E S M I S S y s t e m M a n u a l P a g e 18 29

22 //fill: new ol.style.fill({color: 'red', opacity: 0.4}), stroke: new ol.style.stroke({color: 'blue', width: 2}) }) }) sanitation.setvisible(false); var suggestions = new ol.layer.vector({ title: 'Suggestions', source: new ol.source.vector({ url: 'layers/suggestions.json', format: new ol.format.geojson() }), style: new ol.style.style({ image: new ol.style.circle({ radius: 6, fill: new ol.style.fill({color: 'yellow', opacity: 0.4}), stroke: new ol.style.stroke({color: 'orange', width: 2}) }) }) suggestions.setvisible(false); var other = new ol.layer.vector({ title: 'Other', source: new ol.source.vector({ url: 'layers/other.json', format: new ol.format.geojson() }), style: new ol.style.style({ image: new ol.style.circle({ radius: 6, //fill: new ol.style.fill({color: 'red', opacity: 0.4}), stroke: new ol.style.stroke({color: 'yellow', width: 2}) }) }) E S M I S S y s t e m M a n u a l P a g e 19 29

23 other.setvisible(false); var concerns = new ol.layer.vector({ title: 'All Concerns', source: new ol.source.vector({ url: 'layers/all.json', format: new ol.format.geojson() }), style: new ol.style.style({ image: new ol.style.circle({ radius: 6, //fill: new ol.style.fill({color: 'red', opacity: 0.4}), stroke: new ol.style.stroke({color: 'black', width: 1}) }) }) concerns.setvisible(false); var all_heat = new ol.layer.heatmap({ title: 'Heatmap', source: new ol.source.vector({ url: 'layers/all.json', format: new ol.format.geojson() }) var concerns_g= new ol.layer.group({ layers: [all_heat, other, suggestions, infras, sanitation], title: 'Public Concerns' var baselayers1 = new ol.layer.tile({ type: 'base', title: 'ESRI world imagery', source: new ol.source.xyz({ attributions: [new ol.attribution({ html: ['Tiles Esri Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'] E S M I S S y s t e m M a n u a l P a g e 20 29

24 })], url: ' }), isbaselayer: true, minresolution: 2, var baselayers2 = new ol.layer.tile({ type: 'base', title: 'OpenStreetMap', source: new ol.source.xyz({ url: ' }), isbaselayer: true, minresolution: 2, var baselayers= new ol.layer.group({ layers: [baselayers1, baselayers2], title: 'Base Layers' var lyr_gn_boundaries = new ol.layer.tile({ opacity: 1.0, timeinfo: null, filters: [], source: new ol.source.tilewms(({ url: " params: { "LAYERS": "GN_boundary", "TILED": "true" }, })), title: "GN_Boundaries" var lyr_mc_boundary = new ol.layer.tile({ opacity: 1.0, E S M I S S y s t e m M a n u a l P a g e 21 29

25 timeinfo: null, filters: [], source: new ol.source.tilewms(({ url: " params: { "LAYERS": "mc_boundary", "TILED": "true" }, })), title: "MC_Boundary" var adminboundaries= new ol.layer.group({ layers: [lyr_mc_boundary, lyr_gn_boundaries], title: 'Administrative Boundaries' var lyr_roads = new ol.layer.tile({ opacity: 1.0, timeinfo: null, filters: [], source: new ol.source.tilewms(({ url: " params: { "LAYERS": "roads_new", "TILED": "true" }, })), title: "Roads" var lyr_railway = new ol.layer.tile({ opacity: 1.0, timeinfo: null, filters: [], source: new ol.source.tilewms(({ url: " params: { E S M I S S y s t e m M a n u a l P a g e 22 29

26 "LAYERS": "railway", "TILED": "true" }, })), title: "Railway" var lyr_bridges = new ol.layer.tile({ opacity: 1.0, timeinfo: null, filters: [], source: new ol.source.tilewms(({ url: " params: { "LAYERS": "bridges", "TILED": "true" }, })), title: "Bridges" var infrastructure= new ol.layer.group({ layers: [lyr_railway, lyr_bridges, lyr_roads], title: 'Infrastructure' var lyr_buildings = new ol.layer.tile({ opacity: 1.0, timeinfo: null, filters: [], source: new ol.source.tilewms(({ url: " params: { "LAYERS": "buildings", "TILED": "true" E S M I S S y s t e m M a n u a l P a g e 23 29

27 }, })), title: "Buildings" var lyr_regs = new ol.layer.tile({ timeinfo: null, filters: [], source: new ol.source.tilewms(({ url: " params: { "LAYERS": "regulations", "TILED": "true" }, })), title: "Development Regulations", opacity: "0.7" var flickrsource = new ol.source.vector(); var cache = {}; function photostyle(feature, scale) { var url = feature.get('url'); var key = scale + url; if (!cache[key]) { cache[key] = new ol.style.style({ image: new ol.style.icon({ scale: scale, src: url }) } return cache[key]; } function flickrstyle(feature) { return [photostyle(feature, 0.10)]; E S M I S S y s t e m M a n u a l P a g e 24 29

28 } function selectedstyle(feature) { return [photostyle(feature, 0.50)]; } var flickrlayer = new ol.layer.vector({ source: flickrsource, style: flickrstyle, title: "Complains" baselayers2.setvisible(true); baselayers1.setvisible(false); lyr_regs.setvisible(true); lyr_bridges.setvisible(false); flickrlayer.setvisible(false); lyr_gn_boundaries.setvisible(false); lyr_mc_boundary.setvisible(true); lyr_roads.setvisible(true); lyr_railway.setvisible(false); lyr_buildings.setvisible(true); var layerslist = [baselayers, lyr_regs, adminboundaries, infrastructure, lyr_buildings]; E S M I S S y s t e m M a n u a l P a g e 25 29

29 5 System Summery The ESMIS System Manual provides A to Z guidance for; Data preparation Uploading data to the server Publishing the data layers in GeoServer Web Portal maintenance Preparation of data layers can be related to the field data that are collected from field surveys and can be inserted into spatial maps using QGIS or any other geographic software. At this stage only the available data layers can be modified and updated in the server. However, the web portal will be available with the insertion of new layers soon. Currently the public access allows to visit the web portal with several restricted actions and the admin access allows with free of restrictions. However, the admin access shall be provided only via allowed usernames and passwords to affirm the data security. The maintenance and data configuration shall be carried out by a professional technical person to avoid unnecessary system failures and corruptions. Especially in the Geoserver and HTML coding can cause for data losses and system malfunctioning if the process is not followed properly or if wrong coding has been inserted into the HTML. In case of such situations please take advices from a professional technician or the staff of the University of Moratuwa to avoid further failures. E S M I S S y s t e m M a n u a l P a g e 26 29