Giter Site home page Giter Site logo

sirinearfa / projet-webmapping-with-geoserver-openlayers-and-postgres Goto Github PK

View Code? Open in Web Editor NEW
10.0 1.0 0.0 2.59 MB

This project shows how to develop simple Web GIS application using Geoserver, Openlayers,postgis and pgAdmin4.

CSS 9.73% JavaScript 77.67% HTML 12.60%
css geoserver html-css-javascript jquery-ajax map openlayers6 pgadmin4 postgres postgresql webmapping

projet-webmapping-with-geoserver-openlayers-and-postgres's Introduction

Context

Through the use of Geoserver,which is a map server, this project covers the following aspects:

  • Storing the vector and raster data in PostGIS/PostgreSQ.
  • Discover the publication on the web of spatial data in the form of cartographic services.
  • Loading and publishing of vector and raster data.
  • Definition of vector data publication styles (SLD).
  • HTML/JavaScript web programming of a geographical map using jQuery , Bootstrap and JSON
  • The use of Openlayers 6 geolocation API as WEB mapping API

The data used in this project relate to Côte d'Ivoire.

gis

Then I applied the same work on the data related to Tunisia.

gis2

Getting started

Prerequisites

You should have installed on your machine the following software:

  • Geoserver 2.21.2
  • PostgreSQL 11.18.1
  • PostGIS 2.3.2
  • pgAdmin 4
Pipeline

This project is brought down into 3 main steps:

gis3

  1. PostGIS/PostgreSQL:

Database for data storage that is used to store the Shapefiles layers of Côte d'Ivoire into PostgreSQL. gis4 As we can see the layers are stored in a PostgreSQL called Geoserver_db and we can visualize the their content with the through the SQL Query tool available in pgAdmin4 SELECT * FROM civ_admbnda_adm1_cntig_ocha_itos_20180706;

  1. Geoserver:

Geoserver is used for the publication of data in a PostGIS - PostGIS Database warehouse gis5

  1. OpenLayers:

OpenLayers for data visualization (webmapping)

Geometries in PostGIS

The main task is to save a polygon,point or a line that was drawn in Openlayers into the PostGIS database. For example assuming that you already have a list of coordinates that describe your polygons (the result from the console.log ) and also assuming you are using WGS84 projection and SRID=4326 (SRID, Spatial Reference Identifier) then a simple query using ST_GeomFromText(text, srid) should do the job. You should before that create a polygones relation in your PostGIS database t store the coordinates of the drown polygon as well as for the points relation and the line relation. poly

Drowing a point or line or polygon geometry and sending their coordinates to the server to be saved in the database with a POST request, the drown geometries are identified with a unique ID and then we can extract them from the database with a GET request to the server as shown in the pictures below :

2 3 4 1

projet-webmapping-with-geoserver-openlayers-and-postgres's People

Contributors

sirinearfa avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.