1. Introduction
Remote sensing and GIS are particularly effective tools for the study of natural risks [1]. Indeed, earth observation data is a powerful tool for monitoring coastal phenomena. They make it possible to identify the affected areas and also help to set up risk prevention plans [2] and [3]. Indeed, Côte d’Ivoire has suffered storms and coastal flooding in recent decades, which have caused several losses of human life, significant material damage, the decline in fishing and tourism activities, etc. At present, significant coastal risks exist, including the closure of most mouth rivers at Grand-Lahou, Grand-Bassam, etc., by silting causing recurrent water-levels rises in communities, salinization of surface and groundwaters. To do this, a recent law on the Ivorian coast has just been passed (Law 2017-378 of June 2, 2017 on the Development, Protection and Integrated Management of the Coast). This law aims to regulate the activities carried out on the coast. As a result, several actions have been initiated, such as, the Ivorian Coast Integrated Management Plan, as part of a project. To develop this plan, it appears necessary to achieve an interactive cartography or Webmapping of coastal risks, a dynamic tool that will make it possible to present coastal issues in a graphical interface, make requests and assess the risks in order to provide solutions. On an international scale, the advantage of these technologies lies in the fact that they are open and free, involve a large community of users and offer great compatibility with each other and with other web functionalities. The southwestern coastal segment first interested us because of the risks of flooding that populations and economic activities could still suffer. It should be noted that this area is home to the country’s second port city, San-Pédro, whose flood risk assessment is acute. Located between 4˚15'N and 5˚15'N and 6˚W and 7˚30'W, the western Ivorian coastal perimeter extends from Tabou to Sassandra, 215 km long. The area consists of several departments, including the departments of Sassandra, San-Pedro and Tabou. The coastal perimeter is drained by rivers of different natures. These watercourses are generally rivers (Cavally, San-Pédro, Sassandra) and lagoons (Djiboué) whose irregularity of regime depends on variations in rainfall [4]. The maritime part of this zone is the limit of the Ivorian continental shelf [5]. The distribution of rivers and lagoons in the study area is presented in Figure 1.
2. Data Sources and Methodology
2.1. Data Sources
Image data downloadable from the NASA website, as well as those from the Shuttle Radar Topography Mission (SRTM) satellite of the study area were used, namely, images N04W006_1, N04W007_1, N04W008_1, N05W006_1 and N05W007_1, all taken on November, 2019. Spatial resolutions range from 15 to 90 m. Land use data for the coastal perimeter are vector files (health centers, protected areas, road networks, schools, bodies of water, etc.) from the National Committee for Remote Sensing and Geographic Information (CNTIG). Regarding the Webmapping software used, Quantum GIS 3.4 was used for image processing and the integration of statistical data on shape files. Then PostGreSql 10.5 for database administration and PostGIS for creating the spatial database and importing shapefiles. Apache Tomcat meanwhile, was used to run the server
![]()
Figure 1. Coastal perimeter from Tabou to Sassandra.
software. Geoserver was used to publish geospatial data and display them through interfaces and Atom for programming HTML, CSS and JavaScript codes.
2.2. Methodology
2.2.1. Creation of a Geospatial Database
The creation of the database was done with postgrsql through its graphical interface Pgadmin 4. To spatialize the data, the Postgis extensions (address_standardizer, fuzzystrmatch, ogr_fdw, pgrouting, plpgsql, pointcloud, pointcloud_postgis, postgis, postgis_sfcgal, postgis_tiger_geocoder, postgis_topology) have been added.
2.2.2. Importing Data into Geoserver
To make the database accessible and usable to everyone, it will be imported into Geoserver. Indeed, Geoserver is an open source and free map server written in Java that allows users to share and modify geographic data. Designed for interoperability, it publishes data from all major spatial data sources using open standards. In addition to being open source and free, GeoServer is an OGC-compliant implementation of a number of open standards such as Web Feature Service (WFS), Web MapService (WMS), and WCS (Web Coverage Service) [6]. The presence of these standards in Geoserver will make it easier to perform certain tasks.
2.2.3 Implementation of the Interactive Interface
The client interface of the interactive cartography platform was mainly created using a text editor. This method of creating the client interface has the reputation of being precise and allowing the programmer to have more possibilities. The implementation of such an interface is necessary in order to allow end users to consult with great ease the results of the work carried out. The programming of this client interface is done in two main steps: the first consists in creating the basic display in which the layers will be visualized, and the second is to link the layers present in Geoserver to the basic display created.
To achieve the basic display, an HTML page was first created and will be interpreted by web browsers. This is necessary to ensure the compatibility and interoperability of the interactive mapping consultation platform. After ensuring that the platform is compatible with all browsers and interoperable with other computer languages, a CSS code was integrated. The dressing of the platform was possible thanks to the integration of this code.
With the base display ready, the layers could now be linked for viewing. Viewing layers in the base display required the implementation of scripting based on the JavaScript computer language. To implement this language in the display code already written, it was necessary to download the plugins and link them to the interface code. Figure 2 presents the diagram of the implementation of an interactive mapping interface.
3. Results and Discussion
3.1. Visualization of the Interactive Cartographic Interface
The interactive mapping interface was displayed using the Mozilla Firefox web browser and consists of the elements numbered below (Figure 3):
1) A left side panel which is composed vertically of buttons such as zoom±, return to home page, forward/reverse, location, drawing line, polygon, rectangle, circle, marker, layer editing and deletion;
2) A right side panel which is composed of the search button, the drop-down
![]()
Figure 2. Diagram of the implementation of an interactive mapping interface.
![]()
Figure 3. Visualization of the interactive map interface.
list of layers and the drop-down list of the legend;
3) A frame located at the bottom right for easy orientation on the map;
4) The scale of the map displayed which varies according to the zoom level used to view.
3.2. Mapping of Issues in the Interactive Interface
The main issues that can be viewed in the interactive interface are rivers, classified forests, degraded forests, intact forests, housing, industrial plantations. Forests are biotopes to be protected and are home to many endemic plant and animal species or those with special conservation status. Industrial plantations are represented by industrial processing units in the sub-prefectures of Grand-Béréby and Tabou. This is the case of SOGB (Grand-Béréby Rubber Company) (Figure 4).
3.3. Flood Risk Mapping in the Interactive Interface
3.3.1. Risk of Flooding in Sassandra
Figure 5 presents the risks of flooding due to the intensity of water overflow hazards. Indeed, 100 m beyond the shore, the rivers could flood the houses, part of the forests and some bare soil. From 200 to 500 m beyond the shore, the streams could flood a large part of the housing, bare soils and intact forests.
3.3.2. Risk of Flooding in San-Pédro
In the sub-prefecture of San-Pedro, the same threats are present, but will be
![]()
Figure 4. Map of issues displayed in the interactive interface.
![]()
Figure 5. Interactive map of flood risks in Sassandra.
much greater due to strong anthropization of the coastal zone. Indeed, this area is home to the Autonomous Port of San-Pedro, the country’s second largest port, hotel complexes and many great restaurants. From 100 to 500 m beyond the shore, it is essentially bare soils and intact forests that could suffer from flooding. It is noted that the housings could be strongly impacted because they are located near the overflow hazard 500 m beyond the shore (Figure 6).
![]()
Figure 6. Interactive map of flood risks in San-Pédro.
4. Discussion
Today, web technology is booming and the software involved is beginning to appear in most areas of activity, given their immutable importance in decision-making and their power of communication. The interactive mapping solutions produced most often use Mapserver because of its many features, its stability and its performance. To this end, [7] uses PostgreSQL as a database server and Mapserver as a cartographic server for the implementation of geolocation webmapping of points of interest in the city of Ouagadougou. However, these solutions are very cumbersome to implement in terms of development. They require a lot of programming effort. By applying this technology to the coastal issue, it will be necessary to ensure that the methods used are well suited to the study area. This is why several WebGIS applications have also been developed to address the issue of coastal risk management in Africa. This is the case of the creation of the WebGIS RiNaWo for the identification of risk areas on the Cameroonian coasts [8]. Indeed, these authors carried out a webmapping by designing a database directly associated with the application via the postgreSQ DBMS (CatNaWo3 DB), and validated them in the RiNaWo WebGIS to better assess the risk areas. In addition, [9] implemented a flood model based on very high spatial resolution aerial images taken by a DJI Phantom IV® quadcopter type drone equipped with a fixed 4K image sensor to an integrated stabilization nacelle. This flood model was simulated from a Digital Terrain Model (DTM) produced using a DGPS and which made it possible to carry out topographic and photogrammetric surveys in June 2017. Similarly, [10] used Random Forest to model the 2018 flood in Fredericton and analyzed the effect of several combinations of 12 different flood conditioning factors. The factors were tested against a Sentinel-2 optical satellite image available around the flood peak day. The highest accuracy was obtained using only 5 factors namely, altitude, slope, aspect, distance from the river, and land use/cover with 97.57% overall accuracy and 95.14% kappa coefficient.
5. Conclusion
Ultimately, it should be remembered that Webmapping technology is a decision support tool that can provide solutions to the problem of coastal flooding in our regions. This tool was used to create an interactive mapping interface by superimposing layers. The implementation of this tool has made it possible to deepen knowledge on webmapping techniques and typologies, to learn with much more depth the Open Geospatial Consortium (OGC) standards related to the publication of layers on cartographic servers; and especially to learn the administration of spatial databases, layer management in Geoserver and web programming in JavaScript. To guarantee the development of this tool, it would be desirable to integrate a module for updating data and improving the overall design of the site; to make it available to the final beneficiaries (users) by putting it online and referencing it in the main search engines and to develop in the long term, a mobile web application to facilitate access to the interactive map of the floods of the west of the Ivorian coast.