Radar Vision

Introduction

Radar Vision is a Javascript library that provides a radar map with Infoplaza data.

Installation

Add a script tag to your page with radar-vision.umd.1.1.2.js.


    // Using a script tag
    <script src="/radar-vision.umd.1.1.2.js"></script>

If you would rather use an ES module instead:


    // Using an ES module
    import { Radar } from '/radar-vision.es.1.1.2.js';

Basic Usage

Example 1: Basic Functionality

Add the base class to your code like this:


    const radar = new Radar({
        element: 'radar',
        center: {
            latitude: 52.02,
            longitude: 5.17
        },
        zoom: 6.5,
        interactive: true
    });

Each element can be added to the radar with other classes:


    const bgLayer = new BackgroundLayer({
        name: 'bg',
        xyzUrl: 'https://maps.meteoplaza.com/styles/base-layer/{z}/{x}/{y}.png'
    });

    radar.add(bgLayer);

    const radarLayer = new RadarLayer({
        name: 'radar',
        apiKey: 'example-api-key',
    });

    radar.add(radarLayer);

    const fgLayer = new ForegroundLayer({
        name: 'fg',
        xyzUrl: 'https://maps.meteoplaza.com/styles/b2c-overlay/{z}/{x}/{y}.png',
    });

    radar.add(fgLayer);

    const zoom = new ZoomControl();
    radar.attach(zoom);

    const time = new TimeControl();
    radar.attach(time);

    const loader = new Loader();
    radar.attach(loader);

    const mode = new ModeControl();
    radar.attach(mode);
    
    const timeline = new TimeLine({
        showTimeline: true,
        showActionButton: true,
    });

    radar.attach(timeline);

As you can see you add layers and attach controls.

Don't forget to add the style.css to your page.

Customization

Example 2: Change the theme

An easy way to adjust the color to your liking is to change the theme.


    const radarColored = new Radar({
        element: 'radar-colored',
        center: {
            latitude: 50,
            longitude: 5
        },
        zoom: 6.5,
        interactive: true,
        colorPalette: ['#06976c', '#53bd94']
    });

The colors are added to the radar element as CSS variables as well:


    #radar-colored {
        --ip-rdr-primary: #06976c;
        --ip-rdr-secondary: #53bd94;
    }

The first color the primary color and the second color is the secondary color. The icon and text colors are adjusted automatically.

Example 3: Change the amount of timesteps you want

You can change the amount of timesteps you want to show on the timeline.


    const radarLayer = new RadarLayer({
        name: 'radar',
        apiKey: 'example-api-key',
        maxItems: {
            hindcast: 50,
            forecast: 50,
            'forecast-24hours': 24
        }
    });



                
                    If you want the timeline to start near the current moment add:
                

                
    const radarLayer = new RadarLayer({
        name: 'radar',
        apiKey: 'example-api-key',
        maxItems: {
            hindcast: 50,
            forecast: 50,
            'forecast-24hours': 24
        },
        startCurrentHour: true
    });
                


                This only applies to the forecast and forecast-24hours modes.



        
            Changelog

            
                1.1.2: Added the ability to change let the timesteps start at current hour
                1.1.1: Added the ability to change the amount of timesteps you want to show on the timeline
                1.1.0: Added the slider to choose -1H, +2H and +24H
                1.0.0: Initial release