From 19318ab0261cc1b0fd997b4e7ffc093595ba8b12 Mon Sep 17 00:00:00 2001 From: Alessandro CERIONI <acerioni@grandlyon.com> Date: Fri, 7 Feb 2020 17:18:11 +0100 Subject: [PATCH] Update data.md --- .../custom-apps/web-app/dataset/data.md | 48 +++++-------------- 1 file changed, 13 insertions(+), 35 deletions(-) diff --git a/docs/components/custom-apps/web-app/dataset/data.md b/docs/components/custom-apps/web-app/dataset/data.md index a832c70..0b4c0e5 100644 --- a/docs/components/custom-apps/web-app/dataset/data.md +++ b/docs/components/custom-apps/web-app/dataset/data.md @@ -27,7 +27,7 @@ A dedicated text input allows the user to perform a full-text search within the The visibility of each column can be toggled by clicking on a dedicated button and (de)selecting the various checkboxes. -### Interactions with the data table +### User interaction with the data table * Each column can be sorted either alphabetically or numerically, according to the data type detected by the search engine. @@ -62,41 +62,31 @@ Some of the datasets hosted by data.grandlyon.com are only accessible to authori 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 +#### 3D emulation -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. +3D emulation for buildings is achieved thanks to the *ad hoc* styling of the polygones returned by the following dataset: https://data.grandlyon.com/jeux-de-donnees/volumes-toiture-3d-2015-bati-metropole-lyon/donnees. More specifically, the `fill-extrusion` property is used. -**QUESTION: which dataset is used?** +### Search by address & geolocation -### Research by address & Geolocalisation +Users can search for addresses and points of interest by typing terms in the dedicated form. This feature relies on a geocoding API which is powered by [Photon](https://github.com/komoot/photon) and hosted by data.grandlyon.com. -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). +Users can center the map on their current geolocation, as well. The feature relies on the native [Navigator API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/geolocation). ### *Share* feature -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. - -The URL created will be the following: -`http://hostName#zoom/latitude/longitude/bearing/pitch/selectedBaseLayerId` -Then when you access the map in a new tab, the application will load and display the map with all the correct settings. +A button allows users to generate a share link, using the following pattern: `http://<hostName>#<zoom>/<latitude>/<longitude>/<bearing>/<pitch>/<selectedBaseLayerId>`. Such a link can be shared with other users in order to let the recipients land on the map with a given context: zoom, center, bearing, pitch and base layer. -### Interactions +### User interaction with the map -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. +Upon clicking on a geographical feature, the latter gets fully displayed (including complex properties) on a dedicated viewer. At the same, the feature is highlighted on the data table and pushed to the first row. ### Styling -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. +The OpenMapTiles basemap [Klokantech Basic](https://openmaptiles.org/styles/#klokantech-basic) has been used as a starting point to generate data.grandlyon.com's custom styles. Such styles are compliant with the the [Mapbox GL style specification](https://docs.mapbox.com/mapbox-gl-js/style-spec/) and publicly available (cf. https://openmaptiles.data.grandlyon.com/). #### 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 component uses custom sprites (*e.g.* the grass in green spaces), generated via the following workflow: * 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) @@ -115,20 +105,8 @@ 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). -Once the project cloned, we can - -```bash -npm install -node-fontnik/bin/build-glyphs font.ttf /glyph-folder-pbf -``` - -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) +The map component uses the [Titillium Web](https://fonts.google.com/specimen/Titillium+Web) font, the same as the rest of the Web application. The Mapbox GL JS library uses the notion of "glyphs" instead of "fonts". Glyphs are rendered as SDFs (Signed Distance Fields) and are better suited than fonts to rotation and scaling. +The [node-fontnik](https://github.com/mapbox/node-fontnik) tool can be used to convert `.ttf` files into protobuf-encoded SDF glyphs. Multiple fonts can be combined by using this other tool: [glyph-pbf-composite](https://github.com/mapbox/glyph-pbf-composite). **TO ADD: "bannière rouge"** \ No newline at end of file -- GitLab