Newer
Older
Organize a folders and files structure inside a project is never an easy task, and it exists many ways to do so.
We think that at the beginning we should just not overthink about it, choose one way to do it, keep to it, until a natural re-organization will happen if needed.
Here is our `/src` folder structure:
* `src/app/`: where the Angular code is located. With time we organized this part in different modules each taking care of one main functionnality. Here is the list of the modules:
* `core/`: constitutes the base of the application (layout, notifications, navigation history...)
* `dataset-details/`: contains the components and logic allowing the display of a dataset information (metadata, data, map...)
* `datasets/`: contains the components and some of the logic related to the research
* `editorialisation/`: contains the components and logic related to the display of editorial content (static pages, articles)
* `elasticsearch/`:
* `map/`: contains the components and logic allowing the display and manipulation of a map
* `shared/`: provides components, directives and others things that can be reused in different modules
* `user/`: contains the components and logic related to the user management in the application (login, logout, user profil...)
* `src/assets/`: contains all the images, favicon, svg, fonts, dynamic config file...
* `src/environments/`: contains files with static configuration.
* `src/i18n/`: this folder is dedicated to the translation. The are two types of files:
* `.xlf`:
* `.ts`:
* `src/scss/`:
* `src/app-routing.module.ts`:
* `src/app.component(.ts, .html, .scss)`:
* `src/app.module.ts`:
* `src/routes.ts`:
Each module is organized in the following way: (not all the subfolders are required)
* `<module-name>.module.ts`:
* `<module-name>-routing.module.ts`:
* `components/`:
* `directives/`:
* `guards/`:
* `handlers/`:
* `interceptors/`:
* `models/`:
* `pipes/`:
* `resolvers/`:
* `services/`:
* `validators/`:
Inside one module each component has its own folder with one `.ts`, one `.scss` and one `html` file.
All the styling work has been done with [Bulma](https://bulma.io/), a free and open source CSS framework based on Flexbox.
It is highlighy customizable and easy to integrate in a project.
To do so, a `variables.scss` file that contains our project variables, 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 .
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
## Features by pages
### Home
#### Explore
#### News
#### All news
### Side menu
#### Draft button
#### App version number
#### FR and EN buttons
### Feedback
### Static pages
### Partners
### Reuses
### Draft page
### Contact
### Last changes
### Download the catalogue
### Credits
### Sign In & Sign Up
### User profil
### User data
### Research
#### Filters
#### Tabs
#### Pagination
#### Sort
#### Suggestion
#### Dataset result
### Datset details (Data tab)
#### Research in the data
#### Properties display toggle
#### Data table (sort properties & complex properties & hostory of the click elements)
#### Map
* plan vecto & satellite
* research by address
* geoloc
* copy map
* interactions
* detail of a data on map feature click
For each geographical 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 a very interesting tool improving quickly. The only drawback using it with Angular is that we cannot always use its last version. Indeed as we are using Typescript, we need to wait until the @types are updated.
### Styling
Mapbox use the [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 different styles depending on 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, to have the same color than when we display the vectorial layer.
So when we change these layers, we load the appropriate style.
### How is the data 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).
#### Fullscreen
#### Toggle Map/data
### Datset details (Info tab)
#### Parent and children datasets
#### License
#### Contact us
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 looking 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 research didn't give good or no results (for example because of a typo), a word with more results will be suggested.