For building the style on the portal, [Bulma](https://bulma.io/), a free and open source CSS framework based on Flexbox, has been used.
It is highlighy customizable and easy to integrate in a project.
To do so, a `variables.scss` file that contains our project variables, also overrides the Bulma variables (color, padding, anything you want). Then Bulma is imported and added to our main `style.scss`. That's it, our style incorporate a personalized Bulma .
## Research features
This core feature is based on [Elasticsearch](https://www.elastic.co/fr/)(ES). Almost all the information in the portal (including datasets, articles, geographical data) is indexed in ES. This allows lot's of possibilities with the powerful features of this tool.
Here are the features existing on the portal:
**research*: thanks to ES great indexation, to go through millions of documents is super fast (millions because we are not only look inside the metadata, but also inside the data)
**autocompletion*: using the score based on some criteria, we provides an autocompletion feature that helps to give a context for some research keywords.
**suggestion*: if a result didn't give good result (for example because of a typo), a word with more results will be suggested.
Of course there is a plenty of room for improvements for these features (and for new ones). ES is very powerful but also very complex to master. It's in a constant improvement.
## Map features
For each dataset it's possible to display the data on a map. Here is what have been done to make this happen.
#### Mapbox GL JS
On the client side, the library [Mapbox GL JS](https://github.com/mapbox/mapbox-gl-js) is used. This is very interesting tool improving quickly. The only drawback using it with Angular is because we need to wait the @types are updated. (it can have 2 or 3 versions of difference).
#### Styling
Mapbox use a [Mapbox style specification](https://docs.mapbox.com/mapbox-gl-js/style-spec/) to define the visual appearance of a map.
In our project we have created diffrent styles depending how we want to display the map. For example when we display the aerial layer, we don't necessary want the names of, say the roads and the river, have the same color than when we display the vectorial layer.
So when we change these layers, we load the appropriate style.
#### How the data is fetched ?
Initially we were using Web Feature Service (WFS) and Web Map Service protocols to get the data (geojson or images). But for WFS we realized that when our needs became more complex and precise, this could sometimes be not so easy (filters are not the most funny thing to do).
So we used...Elasticsearch. It is super fast and even have geographical research. We fetch the data from ES, format it into a `.geojson` and voilà ! This will also allow us in the future to have more advanced features on the map (like filters).
