rainSPOT JavaScript Library Examples

Download Back To CSSScript.Com

Display local rain data effectively with rainSPOTjs. This JavaScript library lets you generate meteoblue "rainSPOT" visualizations using SVG or Canvas. Perfect for weather and location-based apps.

Basic, default style

SVG


const container_svg_1 = document.getElementById('container_svg_1');
const rainSpot_svg_1_Data = '3222333223222322222222222222222232222223339222232'
let rainSPOT_svg_1 = create_rainSPOT_SVG({inputString: rainSpot_svg_1_Data});
container_svg_1.appendChild(rainSPOT_svg_1);

Canvas PNG


const container_canvas_1 = document.getElementById('container_canvas_1');
const rainSpot_canvas_1_Data = '3222333223222322222222222222222232222223339222232'
let rainSPOT_canvas_1 = create_rainSPOT_Canvas({inputString: rainSpot_canvas_1_Data});
container_canvas_1.appendChild(rainSPOT_canvas_1);

Customizing style

using the options "object"

SVG


const options_svg_2 = {
  canvasSize: 140,
  useCSS: false,
  colorPalette: {
    0: 'rgba(255 255 255 / 1)',
    1: '#999999',
    2: '#666666',
    3: '#333333',
    9: '#cccccc'
  },
  rangeRings: {
    enabled: true,
    colors: {
      1: 'rgba(0 0 0 / 0)',
      3: 'rgba(0 0 0 / 1)',
      5: 'rgba(0 0 0 / 1)',
      7: 'rgba(0 0 0 / 0)'
    },
    strokeWidth: 3
  },
  crossHairs: {
    enabled: false,
    style: 'brackets',
    color: 'rgba(0 0 0 / 1)',
    strokeWidth: 3
  }
};
const container_svg_2 = document.getElementById('container_svg_2');
const rainSpot_svg_2_Data = '9111111991122211122221111122111111199000110010111'
let rainSPOT_svg_2 = create_rainSPOT_SVG({inputString: rainSpot_svg_2_Data, options: options_svg_2});
container_svg_2.appendChild(rainSPOT_svg_2);

Canvas PNG


const options_canvas_2 = {
  canvasSize: 140,
  useCSS: false,
  colorPalette: {
    0: 'rgba(255 255 255 / 0.5)', // transparent
    1: '#13eefc', // light blue 0.2mm - 1.5mm
    2: '#3aaadc', // blue 1.5mm - 5mm
    3: '#1774c4', // dark blue > 5mm
    9: '#22d690' // green 0.02mm - 02.mm
  },
  rangeRings: {
    enabled: true,
    colors: {
      1: 'rgba(255 0 0 / 1)',
      3: 'rgba(0 255 0 / 1)',
      5: 'rgba(0 0 255 / 1)',
      7: 'rgba(0 255 255 / 1)'
    },
    strokeWidth: 2
  },
  crossHairs: {
    enabled: true,
    style: 'bullseye',
    color: 'rgba(255 255 255 / 0.9)',
    strokeWidth: 3
  }
};
const container_canvas_2 = document.getElementById('container_canvas_2');
const rainSpot_canvas_2_Data = '3333333323332233333322233322222333112233231222332'
let rainSPOT_canvas_2 = create_rainSPOT_Canvas({inputString: rainSpot_canvas_2_Data, options: options_canvas_2});
container_canvas_2.appendChild(rainSPOT_canvas_2);