gispocoding / aukigo Goto Github PK

Which spatial data format to use in the frontend?

GeoJSON

• Simple
• Vector format, attribute queries are possible
• Possible performance impact if file sizes grow too large
• Can be pre-generated, generated dynamically and/or cached (more on this in covid19-map-backend)
• Limited CRS support
• Styling #3

Raster tiles

• PNG images, can be generated dynamically but should be cached
• Easy to add support in frontend
• Can use any existing WMTS or set up a new service
• If self-serving, requires a tile rendering solution with map styling being the main issue
• Cache needs relatively large amount of disk space

Vector tiles

• Vector format, but limited attribute querying
• Many different formats, another decision to be made which one to use
• Practically needs a new WMTS and tile rendering solution, cache relatively small
• Styling #3

Use tags opening_hours and opening_hours:covid19 to determine the opening hours of the features.

Add "X" symbol to info pop up in the up-right corner.

Develop a process for styling vectortile layers using Maputnik. Test the process by creating and exporting basic styles for vectortile layers provided by backend server.

Related to #3

Add some E2E tests using Cypress

Logo isn't visible in Google Chrome.

Add a basic user interface with layer selection. Use material-ui for components

Add GPLv3 license to project and OpenStreetMap attribution to UI. You should use license from tilesets.

Suitable test frameworks should be investigated. The framework should be compatible with selected map library.

Also support for CI (#5) should be taken into account.

Improve the content displayed in popups when user clicks on map. Only the most important information (name, website, and others based on selected layer) should be displayed by default and no tag names should be visible in the default view.

Missing information should be handled without displaying undefined. All information (tag names and values) should still be accessible from a toggle.

Related to #23, #24

Currently aukigo frontend is not shown in fullscreen, meaning the bottom bar gets hidden under the phone's bottom menu bar. This could be fixed by displaying the webpage fullscreen.

Deciding which web mapping library/framework to use. As the frontend is built on the React web framework, possible React component compatibility also needs to be considered.

Main candidates are:

OpenLayers

Pros:

• Versatile
• Comprehensive documentation

Cons:

• Heavier than leaflet
• Not as easy to use
• React-Openlayers not maintained

Leaflet

Pros:

• Easy to use
• Many plugins to add features
• React-Leaflet seems to be actively maintained (v3 using React hooks is at alpha stage)

Cons:

• Limited base featureset
• Many useful plugins are outdated (such as proj4leaflet and Leaflet.VectorGrid)

Add editorconfig for project.

Refs: https://editorconfig.org/

Enhance styling and desing:

• Header rounding and line-gradient
• Shadow effects

Settings button changes into wrong color when pressed (greyish). When pressing other buttons, settings button changes back to its rightfully coded color.

A decision needs to be made on what coordinate reference system(s) to support in the frontend application. A typical choice would be EPSG:3857 i.e. web mercator, which most global tilesets are served in. EPSG:3067 data is common in Finland and some data may be only be provided in EPSG:3067. Most regional-level spatial data in Finland is in ETRS-GKn, not suitable for country-wide data.

If the frontend uses web mercator (the most common choice in web mapping), data in other CRS must be converted to EPSG:3857 in the backend before serving it to the frontend. More on this issue in the covid19-map-backend repository.

Add support for multiple languages/translations with react-intl.

Logo draft.

For simplicity only show features with point geometries on map. Lines and polygons should not be displayed.

Ghost points appear when no layer is selected.

Layer selector buttons don't have permanent inverted styling when clicked active. It could be done via radiobutton styling.

With selected technologies. Use Create React App and Material-UI and react-intl.

If using vector tiles, GeoJSON, or another vector format, styles need to be created for rendering features. This can be done either in-client by defining styles in JS, or possibly using a style generation tool. More research needs to be done on this if deciding to go with vector formats.

Info pop up is too large (and in charge) when you click on a point. It also has some position issues (in some points it appears far).

Search currently displayed vectortile layer(s) for features when user types a query into the search field. Display search suggestions in a dropdown, and zoom to selection if user clicks on a suggestion. Automatically zoom to first suggestion if user types a query and hits enter.

Display a popup when user clicks/taps on a vector feature on the map. The popup should contain some basic information about the feature, and an "additional information" tab that displays all of the attributes of the feature.

See if possible to register clicks/taps even if user misses the feature by a small margin to make clicking on narrow lines or small points easier.

Show vectortiles fetched from the backend on the map. Prerequisite for #15

Add functionality to layer selection buttons. Selected layer should be displayed (and old layer hidden) when user clicks on a button. Possibly add tooltips to buttons that display the layer name.

There should be a feature (maybe associated with the logo?) that brings the user back to the original bounding box. This makes the software feel "safer" when you can always find your way back to the known place.

Using maputnik.io. Related to #35

Feature style should be affected by opening hours so it's easy to distinct between open and closed/unknown locations.

All layers have the same accommodation icon in their pop up. It should change when switching to a different layer.

Design a responsive mobile-first user interface for the application. Some ideas discussed in first meeting:

• basic: number of preconfigured "layers" by theme
• basic: each layer has a set of features that are displayed on the map when the layer is active
• basic: layers are toggled by the user from a toolbar, only one active layer at a time
• basic: multiple background maps, only one per layer
• search: search in features, toggle option to limit search by map extent
• search: geocoding search?
• search: show only a subset of features, e.g. "show only motels"
• extra: "options" button, with a few setting toggles e.g. show scale bar
• extra: "info" section in options-menu, with information about the app, licenses, etc.

Custom colour scheme, animations and other possible eye-candy added after first functional draft version.

As mentioned in #60:

Issues remain with OL autopan not working correctly. Intended behaviour is to pan the map when a popup opens so it fits on screen. Currently the map is only panned after the second click on the feature and even that is not done reliably.

The position: absolute change on mobile displays in this PR probably also prevents autopanning from working, but it does not work even if not manually setting position.

Clicking on the settings button should open a menu popup with options.

Possible content:

• List of basemaps with toggle
• Link to github repo
• Gispo logo that links to gispo.fi
• Big blue contact us CTA button

Ghost points:

Some map points doesn't activate through pressing. Map freezes on some parts. Especially if the pop up is open. Sometimes when point is clicked, size grows but pop up doesn't open.

Now the point is aligned in the bottom-middle in relation to pop up in mobile screen.

Configure CI using Github Actions. Add at least job to run tests.

Implement changes made in css/style.css file to components

Design settings menu content

Related to #37