MMM-RAIN-MAP

A Rain Radar Map based on the Rainviewer API for the MagicMirror² platform.

Click here for the Forum Thread.

Contribution welcome.

Support

If you also like this module and want to thank, please rate this repository with a star or donate a small amount that is worth it to you.

Features

• Displays Rainviewer.com radar layers on OpenStreetMap
  • Every 10 minutes a new weather snapshot is published
  • The snapshots of the last 2 hours are available, which show the weather events of the past
  • Additionally 3 layers are displayed as forecast of the next 30 minutes
• Option to place multiple markers on map
• Option for multiple, alternating map positions
• Option to only show in current rainy weather conditions. Works only together with weather or MMM-OpenWeatherForecast as dependency.
• (Experimental) Option to hide other modules in case of rain in favor to get more space.

Demo

Screencast.mov

Installing the module

1. Navigate to the MagicMirror/modules directory and execute the following command

   git clone https://github.com/jalibu/MMM-RAIN-MAP

2. Add the module configuration into the MagicMirror/config/config.js file (sample configuration):

   {
    module: "MMM-RAIN-MAP",
    position: "top_left",
    config: {
     animationSpeedMs: 400,
     colorScheme: 2,
     colorizeTime: true,
     defaultZoomLevel: 8,
     displayTime: true,
     displayTimeline: true,
     displayClockSymbol: true,
     displayHoursBeforeRain: -1,
     extraDelayLastFrameMs: 1000,
     extraDelayCurrentFrameMs: 3000,
     invertColors: false,
     markers: [
      { lat: 49.41, lng: 8.717, color: "red" },
      { lat: 48.856, lng: 2.35, color: "green" },
     ],
     mapPositions: [
      { lat: 49.41, lng: 8.717, zoom: 9, loops: 1 },
      { lat: 49.41, lng: 8.717, zoom: 6, loops: 2 },
      { lat: 48.856, lng: 2.35, zoom: 6, loops: 1 },
      { lat: 48.856, lng: 2.35, zoom: 9, loops: 2 },
      { lat: 49.15, lng: 6.154, zoom: 5, loops: 2 },
     ],
     mapUrl: "https://a.tile.openstreetmap.de/{z}/{x}/{y}.png",
     mapHeight: "420px", // must be a pixel value (no percent)
     mapWidth: "420px", // must be a pixel value (no percent)
     maxHistoryFrames: -1,
     maxForecastFrames: -1,
     substitudeModules: [],
     updateIntervalInSeconds: 300,
    }
   }

Options

Option	Description
animationSpeedMs	Determines how fast the frames are played. Type: int Default value: 400 (time per frame in milliseconds)
colorizeTime	Set true, to colorize history and forecast timestamps. Type: boolean Default value: true
colorScheme	Set the color scheme for the rain layers. Click here to find your favorite scheme. Type: number (0 - 8) Default value: 2 (Universal Blue)
defaultZoomLevel	Fallback/default zoom value that is used if it is not explicitly set in a MapPostion. Type: int Range: 0 (whole world) - 20 (small building) Default value: 8
displayTime	Set true, to display the time for each frame. Type: boolean Default value: true
displayClockSymbol	Set true, to display a clock symbol as time prefix. Type: boolean Default value: true
displayTimeline	Set true, to display a timeline. Type: boolean Default value: true
displayHoursBeforeRain	This option allows, to show or hide the map depending on the expected or current weather situation. The allowed values and options depend on your weather module which feeds MMM-RAIN-MAP with weather conditions under the hood. Supported modules and different functionality Basic options, provided by both modules: If set to 0 the map shows up on rain, if set to -1 the map is always displayed. weather When used with type hourly allowes you to use the weather forecast data and to display the map when rain is expected within a defined number of hours by setting a value greater 0. MMM-OpenWeatherForecast Type: number Default value: -1
extraDelayLastFrameMs	Add an extra delay to pause the animation on the last frame (last available forecast weather situation). Type: int Default value: 1000 (time in milliseconds)
extraDelayCurrentFrameMs	Add an extra delay to pause the animation on the frame for the current weather situation. Type: int Default value: 3000 (time in milliseconds)
invertColors	Option to invert the colors of the map tiles. Can be used to display the map in a kind of dark mode. Type: boolean Default value: false
markers	Optional list of markers on the map. See examples and Markers-Object documentation below for details. Type: array[Marker] Default value: Sample set
mapPositions	Required: List of zoom/center positions for the map. See examples and MapPosition-Object documentation below for details. Type: array[MapPosition] Default value: Sample set
mapHeight	Height of the map. Must be string with pixels and "px" postfix. Percentage values won't work. Type: string (pixels) Default value: '420px'
mapWidth	Width of the map. Must be a string with pixels and "px" postfix. Percentage values won't work. Type: string (pixels) Default value: '420px'
mapUrl	Option to use an alternative map. In most cases you are fine with the default but you can find more maps here. Type: string Default value: 'https://a.tile.openstreetmap.de/{z}/{x}/{y}.png' Alternative uncolored map: 'https://tiles.wmflabs.org/bw-mapnik/${z}/${x}/${y}.png'
maxHistoryFrames	Maximum number of history frames. There is one frame every 10 minutes. Setting this to 6 would show history radar layers of the last hour until now. If set to -1, all available history frames are shown. As of today, the API provides 12 history frames -> 2h. Type: int Default value: -1
maxForecastFrames	Maximum number of forecast frames. There is one frame every 10 minutes. Setting this to 2 would show forecast radar layers from now to 20 minutes in the future. If set to -1, all available forecast frames are shown. As of today, the API provides 3 forecast frames -> 30min. Type: int Default value: -1
substitudeModules	(Experimental) If displayOnlyOnRain is turned on, you can define a list of module names that are hidden in favor of the map. Type: array[string] Default value: [] Example: ['MMM-Jast', 'calendar']
timeFormat	Option to override the MagicMirror's global time format to 12 or 24 for this module. Type: int Default value: [Global Config] or 24
updateIntervalMs	Update interval for fetching new radar frames from the RainViewer.com API. (New frames are released every 10 minutes) Type: int Default value: 300000 (time in milliseconds)

Marker Object

Option	Description
lat	Required: Marker's latitude. Type: float
lng	Required: Marker's longitude. Type: float
color	Marker's color. Possible values: 'black','blue','gold','green','grey','orange','red','violet','yellow' Type: string

MapPosition Object

Option	Description
lat	Required: Position's latitude. Type: float
lng	Required: Position's longitude. Type: float
zoom	Either set a zoom level or defaultZoomLevel is used. Range: 0 (whole world) - 20 (small building) Type: number
loops	Number of loops/iterations until the map moves to the next position. If no number is set, a value of 1 is used. Type: number

Contribution and Development

This module is written in TypeScript and compiled with Rollup.
The source files are located in the /src folder. Compile target files with npm run build.

Contribution for this module is welcome!

Thanks to

• Thanks to all supporters who gave a small donation out of gratitude for my work.
• All testers for their feedback.
• MMM-RAIN-RADAR by jojoduquartier for inspiration.