Skip to content
Snippets Groups Projects
Commit 2910c874 authored by FORESTIER Fabien's avatar FORESTIER Fabien
Browse files

WIP web mapping

parent e3c57391
No related branches found
No related tags found
2 merge requests!14Doc webapp,!13Doc webapp
...@@ -14,7 +14,7 @@ The interface has been developed with the Angular framework, so you need to have ...@@ -14,7 +14,7 @@ The interface has been developed with the Angular framework, so you need to have
Once you have Node.js installed you need to install the Angular CLI. Open a command line and run: Once you have Node.js installed you need to install the Angular CLI. Open a command line and run:
``` ```bash
npm install -g @angular/cli npm install -g @angular/cli
``` ```
...@@ -24,17 +24,17 @@ Open the `/src/assets/config/config.json` file and update the configuration in o ...@@ -24,17 +24,17 @@ Open the `/src/assets/config/config.json` file and update the configuration in o
For more explainations on how the configuration system works refer to the dedicated [section](../../miscellaneous/multi-environments-docker-build-for-angular.md). For more explainations on how the configuration system works refer to the dedicated [section](../../miscellaneous/multi-environments-docker-build-for-angular.md).
### Start the web application ### Start the web application
Using the Angular CLI: Using the Angular CLI:
```
```bash
ng serve ng serve
``` ```
or the npm script (which use the Angular CLI) or the npm script (which use the Angular CLI)
```
```bash
npm run start npm run start
``` ```
...@@ -45,36 +45,41 @@ We defined in the package.json two scripts that can build the application. One t ...@@ -45,36 +45,41 @@ We defined in the package.json two scripts that can build the application. One t
Those two scripts contain an option `--max_old_space_size=<nb of max RAM octets the node process can take>`. Make sure the number does not exceed your RAM capacity (you can simply remove the option, it will use the default value: 512mb on 32-bit systems and 1gb on 64-bit systems). By incrising the node process memory limit we decrease the build time. Those two scripts contain an option `--max_old_space_size=<nb of max RAM octets the node process can take>`. Make sure the number does not exceed your RAM capacity (you can simply remove the option, it will use the default value: 512mb on 32-bit systems and 1gb on 64-bit systems). By incrising the node process memory limit we decrease the build time.
For development environment (not optimized) For development environment (not optimized)
```
```bash
npm run build:dev npm run build:dev
``` ```
For production environment (optimized) For production environment (optimized)
```
```bash
npm run build:prod npm run build:prod
``` ```
### Build and deploy with Docker ### Build and deploy with Docker
The related files are: The related files are:
- `docker-compose.yml` which indicates what Dockerfile should be used, what image is going to be build, volumes, exposed port... - `docker-compose.yml` which indicates what Dockerfile should be used, what image is going to be build, volumes, exposed port...
- `Dockerfile` which describe the steps to build the docker image. - `Dockerfile` which describe the steps to build the docker image.
Some environment variables need to be set before building or running the image. Use the appropriate command to set those variables: `SET` on Windows, `export` on Linux. Some environment variables need to be set before building or running the image. Use the appropriate command to set those variables: `SET` on Windows, `export` on Linux.
``` ```bash
export TAG=<version> export TAG=<version>
export APP_PORT=<port the application should be running on> export APP_PORT=<port the application should be running on>
export CONFIG_FILE_PATH=<path to your config file> export CONFIG_FILE_PATH=<path to your config file>
``` ```
Then to build the image run (you can change prod to dev if you don't want an optimized build): Then to build the image run (you can change prod to dev if you don't want an optimized build):
```
```bash
docker-compose build --build-arg conf=prod admin-gui docker-compose build --build-arg conf=prod admin-gui
``` ```
Once the image is built on your machine, run the following command to start a container: Once the image is built on your machine, run the following command to start a container:
```
```bash
docker-compose --project-name admin-gui up docker-compose --project-name admin-gui up
``` ```
...@@ -82,7 +87,6 @@ docker-compose --project-name admin-gui up ...@@ -82,7 +87,6 @@ docker-compose --project-name admin-gui up
It uses the same authentication methods as the portail data web app, so if you have an account you will be able to log in. However only a user belonging to the admin group will be able to create, modify and delete entities. The groups are managed by the api gateway, for more information refer to the [Authentication and Authorization](../../miscellaneous/authentication&authorization.md) section. It uses the same authentication methods as the portail data web app, so if you have an account you will be able to log in. However only a user belonging to the admin group will be able to create, modify and delete entities. The groups are managed by the api gateway, for more information refer to the [Authentication and Authorization](../../miscellaneous/authentication&authorization.md) section.
## TO DEVELOP ## TO DEVELOP
The management of images w/ respect to the Organizations and Credits services on the one hand, the Media Library on the other. The management of images w/ respect to the Organizations and Credits services on the one hand, the Media Library on the other.
...@@ -9,11 +9,12 @@ For all the editorial content on the portal one CMS is used to offer the possibi ...@@ -9,11 +9,12 @@ For all the editorial content on the portal one CMS is used to offer the possibi
The choice went for the open source CMS [Ghost](https://ghost.org/), replacing Wordpress as our first choice at the beginning of the project. The choice went for the open source CMS [Ghost](https://ghost.org/), replacing Wordpress as our first choice at the beginning of the project.
Whereas it's not perfect and there is still room for improvement, this is a great tool to use to create content in a beautiful user interface. The API allows us to get all the information needed for the web application by a REST API. Whereas it's not perfect and there is still room for improvement, this is a great tool to use to create content in a beautiful user interface. The API allows us to get all the information needed for the web application by a REST API.
## Hooks for indexing it inside Elasticsearch
## Hooks for indexing it inside Elasticsearch
The CMS offers a hooks functionnality. Put it simply, you can trigger any API call after some events. The CMS offers a hooks functionnality. Put it simply, you can trigger any API call after some events.
In our case, after saving a page or an article, the Elasticsearch (ES) indexer service will be called to re-index the article or the page which was just modified. In few seconds the modification will be visible inside the webapp without any manual manipulation. In our case, after saving a page or an article, the Elasticsearch (ES) indexer service will be called to re-index the article or the page which was just modified. In few seconds the modification will be visible inside the webapp without any manual manipulation.
## Integration into the webapp ## Integration into the webapp
After the content is indexed inside ES, very little work is needed to integrate it into the web application. After the content is indexed inside ES, very little work is needed to integrate it into the web application.
The content actually retrieved as HTML, and the code is pretty clean, so very few CSS adjustment is needed to display a nice article. The content actually retrieved as HTML, and the code is pretty clean, so very few CSS adjustment is needed to display a nice article.
# Reuses # Web mapping services
## Features ## Features
This service is the unique entrypoint of the map in the portal toward the geographical services of the datasets hosted on our platform. It proxifies two services:
* `WMS`
* `MVT`
Depending on the dataset's license, those services might be in open access or restricted access. Our goal is to display to a particular user exactly what it's access are allowing him to see. It wasn't possible to add the authentication pieces as the map services are expecting it (basic auth) directly from the web application this is why we created this proxy.
In order for the map to work properly and to always be able to display the full data on the portal, it has been decided that WMS would always be opened even if the user doesn't have access to the dataset.
## Dependencies ## Dependencies
This proxy has two dependencies:
* `Elasticsearch`
* `MapServer`
## Endpoints ## Endpoints
It provides two endpoints:
* `/wms`:
* `/mvt`:
## Implementation ## Implementation
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment