Map page - fmidev/weather-app GitHub Wiki

UI has three sections: location -section on the top for choosing location (this is shared with Weather -page), map -section in the middle for choosing a layer which is visualized on the map component and time chooser -section in the bottom for animation settings and time selection.

Map -section

Map section contains a map component, zoom buttons, info-button and layer selection -button.

Map component is native to used device. So it looks different on IOS and Android for example. Map component can also have limitations and that's why Huawei -device's don't have Map -page at all. Map can be zoomed in/out and panning works too. Chosen location is visualized on the map as a pin.

Map section is used to visualise selected map layer in certain time. Map data can be observation data from weather radars or it can be forecast data from a weather model.

Zoom buttons are used to zoom in and out. Pinch zoom works as well.

Info-button opens a bottom slider panel which shows information about selected layer's data.

Layer selection -button opens a bottom slider panel which has options to whether to visualize selected location on the map and options which layer is visualized on the map component. Currently only one layer can be selected at a time. Layer selection closes the slider panel.

Time chooser -section

Time chooser -section has controls for starting and stopping animation as well as a time slider which shows available timesteps as well as selected time. Visualized time is selected either with animation or manually sliding the timeslider sideways. Section also tells the user is selected (aka visualized) time forecast (future) or an observation (past). Forecast and observations have different data sources. Observations are past and actually measured values. Forecasts are from weather model which can be edited by meteorologists. Start/end times and timesteps depend on chosen layer. On some layers timestep can be 15min and on other layers it can be one hour.