# Data table (sort properties & complex properties & hostory of the click elements)
## Properties display toggle
## Data table (sort properties & complex properties & history of the click elements)
# Map
...
...
@@ -10,16 +12,16 @@
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.
## How the map data is fetched ?
## 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.
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.*
At the begigning, we wanted to display just one MVT layer. It's vector, fast and integration is awesome with Mapbox. One difficutly, 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.
Then the question of the interaction. **To let the user interact with the map, we load the MVT layer**. The trick is to draw 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
For these datasets here is the rules:
...
...
@@ -41,7 +43,7 @@ This is an emulated 3D, using 2D information. The vector base layer contains the
## 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's also possible to center the map to the user position, using 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
This allow with a button click to copy the link of the map with the current context.
Then when you access the map in a new tab, the application will load and display the map with all the correct settings.
## Interactions
* detail of a data on map feature click
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
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.
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.
#### 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:
*get 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)
* 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.
...
...
@@ -79,8 +82,18 @@ Also generate it with the `--retina` option to have the @2x sprites
```
#### 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.
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:
`"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.
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)
