diff --git a/docs/components/custom-apps/web-app/dataset/data.md b/docs/components/custom-apps/web-app/dataset/data.md index 6ea854bb24bd5fbaee830b0e07b60f24153f8bee..a832c70d7faf3ca4e2865e51172b0f93d60f3368 100644 --- a/docs/components/custom-apps/web-app/dataset/data.md +++ b/docs/components/custom-apps/web-app/dataset/data.md @@ -15,6 +15,8 @@ Each entry of a given dataset is rendered as a line in a table. Data value havin **QUESTION: how is scrolling achieved? Do we use the dedicated Elasticsearch feature?** + + ### Search within the data entries A dedicated text input allows the user to perform a full-text search within the entire dataset. The number of matching records is shown and visually illustrated in the guise of a progress bar. @@ -36,42 +38,35 @@ The visibility of each column can be toggled by clicking on a dedicated button a ## Map -### Implementation - -The map is rendered thanks to the [Mapbox GL JS](https://github.com/mapbox/mapbox-gl-js) library. +### Under the hood -### How data is fetched and displayed +The map component is powered by the [Mapbox GL JS](https://github.com/mapbox/mapbox-gl-js) library. -The main difficulty to display correctly the data was the heterogeneity of the datasets, both in size and in types. For example we can have a dataset with millions of polygons to display, or a very small one but with personnalized icons instead of a geometric figure. -To manage this very broad range of display we came with the following strategy. ->Note: this is for unrestricted datasets. For restricted datasets there will be one specific strategy that we will explain later. +### Layers -At the begigning, we wanted to display just one MVT layer. It's vector, fast and integration is awesome with Mapbox. One difficulty, as we mentionned, is that one data can be represented by one circle, one polygon, or one icon, and different colors. It is because the producer of the data can apply a style that will make sense for them. And for this reason we needed to keep using the WMS service to represent with fidelity? the data. -So first, **to display and see the data, the WMS service is used**. Using cache make it quite fast and we respect the style of the data producers. +Three overlaid layers are used: -Then the question of the interaction. **To let the user interact with the map, we load the MVT layer**. The trick is to paint it transparent by default, and apply a color on hover or click events. The user has the feeling to interact directly with the features on the map (displayed by WMS), but in reality interacts with the MVT layer above it. +1. a base layer, either vector or raster depending of the choice of the user. The raster layer is based on the [orthoimages](https://data.grandlyon.com/en/jeux-de-donnees/orthophotographie-2018-metropole-lyon-format-tiff/donnees) provided by the Métropole de Lyon with the addition of street labels coming from the vector base layer. -#### Restricted datasets +2. A raster layer, displaying the entire (geographic) dataset by issuing requests against a Web Map Service (WMS). -For these datasets here is the rules: +3. A transparent vector layer, fed by a Mapbox Vector Tiles (MVT) service, allowing users to interact with the raster features displayed by the WMS. Individual features get highlighted on hover and click events. -* display all the data on the map -* display only a sample into the table -* on the map, only the sample data can be interacted with +#### Restricted-access datasets -So we can not anymore use the MVT service for the interaction layer, because it uses all the data (and we don't want that). In this case we use instead the sample data retrieved by Elasticsearch (the ones displayed in the table), to construct a geojson and use it to create the layer. -At the end we can see all the data displayed on the map, but the interaction and the one visible inside the table are only a sample. +Some of the datasets hosted by data.grandlyon.com are only accessible to authorized users. For such datasets, two different behaviors were implemented: -### Vector & satellite base layers +1. for **authorized users**: the very same behavior as for unrestriced datasets, in a seamless way; -There are two base layers available: vector and satellite. +2. for **unauthorized users**: the raster layer, powered by the WMS, displays the full dataset; user interaction is limited to a small subset of geographical features and achieved by constructing a GeoJSON out of the sample returned by the search engine. -* the vector tiles are retrieved by the Métropolole of Lyon using the Open Map Tiles specification. It only covers the area of Métropole de Lyon but the details are more important than the Etalab data -* the satellite layer is using the pictures of the *Orthophotographie 2018 de la Métropole de Lyon* dataset. +This feature relies on a custom user-aware component, proxying requests to the Web Mapping Services hosted by the data.grandlyon.com Core. #### 3D display -This is an emulated 3D, using 2D information. The vector base layer contains the height of the buidings. With Mapbox GL JS it is possible to create a layer by setting some style to the polygons with the *fill-extrusion* property. +This is an emulated 3D, using 2D information. The vector base layer contains the height of the buidings (<- FALSE !). With Mapbox GL JS it is possible to create a layer by setting some style to the polygons with the *fill-extrusion* property. + +**QUESTION: which dataset is used?** ### Research by address & Geolocalisation @@ -134,3 +129,6 @@ Finally you can reference it in your style file as the following: We have to do the conversion one by one. If multiple `.ttf` have to be converted, then maybe a `.sh` script is better. In our case we needed only `Titillium Web` to add in our map glyphs. If another font is needed and you want to use them in a single style file, then you need to combine them. For this you can use [glyph-pbf-composite](https://github.com/mapbox/glyph-pbf-composite) + + +**TO ADD: "bannière rouge"** \ No newline at end of file