This is the main page to observe the data of a dataset. This page has two components: a data table and a map. The map will be displayed only for geographical datasets (it makes sense).
## Properties display toggle
## Fullscreen and Toggle Map/data
## Data table (sort properties & complex properties & history of the click elements)
To increase the flexibility and the comfort of the user to display the data, it's possible to put in fullscreen the components.
Furtheremore there is the ability to hide and show each component as we wish, depending if we want more to focus on the data values itself or to have a geographical representation.
# Map
## The data table
## Mapbox GL JS
Each data entry of the dataset is rendered as a line, where columns are the properties names. All the values are displayed, with an exception with what we call *complex properties*. It's arrays or objects that might be difficult to display properly in a table (such as opening and closing hours). In this case, these values will be rendered correctly in the right window if we click on the data entry.
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.
### Research in the data
The research input allows the user to make a full-text research on all the data for all the properties. At any time it is possible to have the number of data matching with the current research.
### Properties display toggle
In case of datasets with a lot of properties, the user might want to display only few properties to compare or sort it's values. Thus it is possible to select or unselect the active properties in the data table.
### Data table interactions
sort properties
history of the click elements
if map, go to the feature
## The map
### 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.
Just for information the creator of Leaflet, Vladimir Agafonkin, is now working for Mapbox.
Just for information the creator of Leaflet, Vladimir Agafonkin, is now working for Mapbox.
## How is the map data fetched and displayed ?
### How is the map data fetched and displayed
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.
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.
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.*
>Note: this is for unrestricted datasets. For restricted datasets there will be one specific strategy that we will explain later.
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.
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.
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.
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.
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.
#### Restricted datasets
#### Restricted datasets
For these datasets here is the rules:
For these datasets here is the rules:
* display all the data on the map
* display all the data on the map
* display only a sample into the table
* display only a sample into the table
* on the map, only the sample data can be interacted with
* on the map, only the sample data can be interacted with
...
@@ -32,69 +54,76 @@ For these datasets here is the rules:
...
@@ -32,69 +54,76 @@ For these datasets here is the rules:
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.
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.
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.
## Vector & satellite base layers
### Vector & satellite base layers
There are two base layers available: vector and satellite.
There are two base layers available: vector and satellite.
* 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 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.
* the satellite layer is using the pictures of the *Orthophotographie 2018 de la Métropole de Lyon* dataset.
#### 3D display
#### 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. With Mapbox GL JS it is possible to create a layer by setting some style to the polygons with the *fill-extrusion* property.
## Research by address & Geolocalisation
### Research by address & Geolocalisation
It is possible to search an address in the map. We use an internal geocoder API based on [Photon](https://github.com/komoot/photon)(open source geocoder built for OpenStreetMap data, based on Elasticsearch).
It is possible to search an address in the map. We use an internal geocoder API based on [Photon](https://github.com/komoot/photon)(open source geocoder built for OpenStreetMap data, based on Elasticsearch).
It's also possible to center the map to the user position. It uses the native [Navigator API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/geolocation).
It's also possible to center the map to the user position. It uses the native [Navigator API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/geolocation).
## *Copy the map* feature
### *Copy the map* feature
This allow with a button click to copy the link of the map with the current context.
This allow with a button click to copy the link of the map with the current context.
This context contains: the zoom, position, bearing, pitch and base layer.
This context contains: the zoom, position, bearing, pitch and base layer.
Then when you access the map in a new tab, the application will load and display the map with all the correct settings.
Then when you access the map in a new tab, the application will load and display the map with all the correct settings.
## Interactions
### Interactions
When a user clicks on a feature (point, line, polygon) a window on the right will open and display all the properties and values.
In the same time, this feature will be highlighted in the data table, and set in first position.
When a user clicks on a feature (point, line, polygon) a window on the right will open and display all the properties and values.
In the same time, this feature will be highlighted in the data table, and set in first position.
## Styling
### Styling
The OpenMapTiles basemap [Klokantech Basic](https://openmaptiles.org/styles/#klokantech-basic) has been used to help us create our style.
The OpenMapTiles basemap [Klokantech Basic](https://openmaptiles.org/styles/#klokantech-basic) has been used to help us create our style.
This style (and all of the Open Map Tiles styles) use the [Mapbox GL style specification](https://docs.mapbox.com/mapbox-gl-js/style-spec/) to define the visual appearance of a map.
This style (and all of the Open Map Tiles styles) use the [Mapbox GL style specification](https://docs.mapbox.com/mapbox-gl-js/style-spec/) to define the visual appearance of a map.
#### Sprites
#### Sprites
The map uses some custom sprites, as the grass in green area, so it was needed to create and host custom sprites. The worflow for this has been the following:
The map uses some custom sprites, as the grass in green area, so it was needed to create and host custom sprites. The worflow for this has been the following:
* download the [Mapbox icons](https://labs.mapbox.com/maki-icons/)(the Maki icons)
* download the [Mapbox icons](https://labs.mapbox.com/maki-icons/)(the Maki icons)
* add the custom SVG we want to use in our style (for example grass.svg and water.svg)
* add the custom SVG we want to use in our style (for example grass.svg and water.svg)
* clone and install [spritezero-cli](https://github.com/mapbox/spritezero-cli), a command-line interface for [spritezero](https://github.com/mapbox/spritezero)
* clone and install [spritezero-cli](https://github.com/mapbox/spritezero-cli), a command-line interface for [spritezero](https://github.com/mapbox/spritezero)
*`spritezero [output filename] [input directory]` . It generates a JSON layout file and the associated PNG spritesheet.
*`spritezero [output filename] [input directory]` . It generates a JSON layout file and the associated PNG spritesheet.
Also generate it with the `--retina` option to have the @2x sprites
Also generate it with the `--retina` option to have the @2x sprites
* Once the folder containing these files is hosted, we reference it in the style file:
* Once the folder containing these files is hosted, we reference it in the style file:
`"sprites": 'path/to/the/sprites/folder/'`
`"sprites": 'path/to/the/sprites/folder/'`
* Finally we can style the custom grass in green area:
* Finally we can style the custom grass in green area:
```
```json
"paint":{
"paint":{
"fill-pattern":"grass"
"fill-pattern":"grass"
}
}
```
```
#### Glyphs
#### Glyphs
We wanted to have in the map the same font we use in the web app: the [Titillium Web](https://fonts.google.com/specimen/Titillium+Web). In Mapbox GL the fonts are called Glyphs and are rendered as SDFs (signed distance fields). It makes it easier than regular font for rotation, scaling..etc.
We wanted to have in the map the same font we use in the web app: the [Titillium Web](https://fonts.google.com/specimen/Titillium+Web). In Mapbox GL the fonts are called Glyphs and are rendered as SDFs (signed distance fields). It makes it easier than regular font for rotation, scaling..etc.
To convert our `.ttf` into protobuf-encoded SDF glyphs we use [node-fontnik](https://github.com/mapbox/node-fontnik).
To convert our `.ttf` into protobuf-encoded SDF glyphs we use [node-fontnik](https://github.com/mapbox/node-fontnik).
Finally you can reference it in your style file as the following:
Finally you can reference it in your style file as the following:
`"glyphs": 'path/to/the/glyphs/folder/'`
`"glyphs": 'path/to/the/glyphs/folder/'`
We have to do the conversion one by one. If multiple `.ttf` have to be converted, then maybe a `.sh` script is better.
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)
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)
