raain.io ui layers




Advanced UI components and visualization layers for rainfall data
raain-ui is a library that provides specialized UI components and visualization layers for displaying and interacting with rainfall data coming from radartorain.com. Built with modern web technologies, it offers high-performance visualizations for meteorological applications.
- Features
- Screenshots
- Installation
- Usage
- Documentation
- Angular Configuration
- Changelog
- Contributing
- License
- Interactive Maps: Leaflet-based map visualizations for geospatial rainfall data
- Performance Rendering: Pixi.js-powered rendering for smooth visualizations
- Data Charting: Chart.js integration for time-series and statistical analysis
- 3D Globe Visualization: Earth visualization for global rainfall patterns
- Time Navigation: Advanced date/time controls for temporal data exploration
- Responsive Design: Components that adapt to different screen sizes
- Framework Agnostic: Works with vanilla JavaScript or any framework
Here are some screenshots showcasing the raain-ui components in action:
``bash`
npm install raain-ui
raain-ui provides a set of components that can be integrated into your application. Here's an example of
how to use the MapElement component:
`javascript
import {MapElementFactory} from 'raain-ui';
// Create a map element
const mapElement = MapElementFactory.create({
container: 'map-container',
center: [51.505, -0.09],
zoom: 13
});
// Add a rainfall layer
mapElement.addRainfallLayer(rainfallData);
`
The project includes a comprehensive example application that demonstrates how to use the library:
`bashClone the repository
git clone https://github.com/raainio/raain-ui.git
cd raain-ui
This will open the example application at http://localhost:1234, where you can explore the various components and
features of
raain-ui.📚 Documentation
Comprehensive API documentation is available in the specifications directory. This includes detailed
information about all components, their properties, methods, and events.
$3
If you're using this library in an Angular application, you'll need to configure Angular to handle the CSS files
properly. Here are two approaches:
Option 1: Import CSS in angular.json
`json
"styles": [
"src/styles.css",
"node_modules/raain-ui/dist/data/globe.css"
]
`
Option 2: Configure webpack for CSS imports
First, create a custom webpack configuration:
`javascript
// custom-webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/,
include: [/node_modules\/raain-ui/],
use: ['style-loader', 'css-loader']
}
]
}
};
`Then use
@angular-builders/custom-webpack to apply this configuration:`json
"architect": {
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "./custom-webpack.config.js"
}
}
}
}
`📝 Changelog
See the Changelog for a detailed list of changes in each version.
👥 Contributing
Contributions are welcome! If you'd like to contribute to
raain-ui, please follow these steps:1. Fork the repository
2. Create a feature branch (
git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature`)Please make sure your code follows the existing style and includes appropriate tests.
This project is licensed under the MIT License - see the LICENSE file for details.