TWC "Best of Times" Emulators...

KAOS · July 18

Appended to radar.js ....

scheduleTimeline();

        mapboxgl.accessToken = 'pk.eyJ1IjoiYmxhcmsiLCJhIjoiY2plaGZmaGR1MGZ3cTJ3bzZ6OHp5OGZzYyJ9.5dVrsWJk208YPShD-0HLsQ';
        var map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/streets-v11',
            "center": [longitude, latitude],
            zoom: 5 // Initial zoom
        });

}

KAOS · July 19

I must make all of this work as well...

<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>Mapbox GL Animation - Xweather Raster Maps</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">

</head>
<body>

<script src="mapbox-gl-geocoder.min.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.css" type="text/css">

<div id="map" class="mapboxgl-map"><div class="mapboxgl-canary" style="visibility: hidden;"></div><div class="mapboxgl-canvas-container mapboxgl-interactive mapboxgl-touch-drag-pan mapboxgl-touch-zoom-rotate"><canvas class="mapboxgl-canvas" tabindex="0" aria-label="Map" style="width: 796px; height: 400px;" width="796" height="400"></canvas></div><div class="mapboxgl-control-container"><div class="mapboxgl-ctrl-top-left"></div><div class="mapboxgl-ctrl-top-right"></div><div class="mapboxgl-ctrl-bottom-left"><div class="mapboxgl-ctrl" style="display: block;"><a class="mapboxgl-ctrl-logo" target="_blank" rel="noopener nofollow" href="https://www.mapbox.com/" aria-label="Mapbox logo"></a></div></div><div class="mapboxgl-ctrl-bottom-right"><div class="mapboxgl-ctrl mapboxgl-ctrl-attrib"><div class="mapboxgl-ctrl-attrib-inner"><a href="https://www.aerisweather.com/">Xweather</a> | <a href="https://www.mapbox.com/about/maps/" target="_blank" title="Mapbox" aria-label="Mapbox">© Mapbox</a> <a href="https://www.openstreetmap.org/about/" target="_blank" title="OpenStreetMap" aria-label="OpenStreetMap">© OpenStreetMap</a> <a class="mapbox-improve-map" href="https://apps.mapbox.com/feedback/?owner=mapbox&id=streets-v11&access_token=pk.eyJ1IjoiYm1234xhcmsiLCJBLAHhIjoiY2plaGZmaGR1MBLAHGZ3cTJ3bzZ116OHp5OGZzYyJ9.5dVrsBLAH89451WJk208YPShD-0HLsQ" target="_blank" title="Improve this map" aria-label="Improve this map" rel="noopener nofollow">Improve this map</a></div></div></div></div></div>

const frameCount = 10; // total intervals
const startMinutes = -60; // start time offset relative to now, where negative means past
const endMinutes = 0;

const MAPBOX_TOKEN = 'pk.eyJ1IjoiYmxhcmsiLC17280JhIjoiY2plaGZmaGR1MGZ3cTJ3bzZ6O82615Hp5OGZzYyJ9.5dV11rsWJk208YPShD-10HLsQ';
const AERIS_ID = 'wgE96YE3sc1TQLKjnqiMsv';
const AERIS_KEY = 'SVG2gQFV8y19DjKR0BRY9w1PoSLvrMrIq19Lq2IYaY';
const NUM_COLORS = '256'; // set to empty string for true color png
const TILE_SIZE = 256;

// layer to include on the map
// uncomment more layers or add more!
const layers = [
    'alerts:50',
    // 'satellite',
    'radar:70:blur(0)',
    //'stormcells'
];

function getTilePath(server, interval) {
return `https://maps${server}.aerisapi.com/${AERIS_ID}_${AERIS_KEY}/${layers.join(',')}/{z}/{x}/{y}/${interval}min.png${NUM_COLORS}`;
}

window.addEventListener('load', () => {
mapboxgl.accessToken = MAPBOX_TOKEN;

    const map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [-95, 40],
        zoom: 4
    });

    // Add the control to the map.
    map.addControl(
        new MapboxGeocoder({
            accessToken: mapboxgl.accessToken,
            mapboxgl: mapboxgl
        })
    );

return id;
}

    function setRasterLayerOpacity(map, id, opacity) {
        map.setPaintProperty(id, 'raster-opacity', opacity);
    }

    map.on('load', () => {
        const interval = (endMinutes - startMinutes) / frameCount;
        // set up the animation frames and layers
        const frames = [];
        for (let i = 0; i < frameCount; i += 1) {
            const opacity = (i === 0) ? 1 : 0;
            const timeOffset = startMinutes + interval * i;
            const id = addRasterLayer(map, timeOffset, opacity);
            frames.push(id);
        }

        // wait time determines how long to wait and allow frames to load before
        // beginning animation playback
        const waitTime = 5000;

// step time determines the time in milliseconds each frame holds before advancing
const stepTime = 1000;

let currentOffset = 0;
let previousOffset = currentOffset;

        setTimeout(() => {
            setInterval(() => {
                previousOffset = currentOffset;
                currentOffset += 1;
                if (currentOffset === frames.length - 1) {
                    currentOffset = 0;
                }
                setRasterLayerOpacity(map, frames[previousOffset], 0);
                setRasterLayerOpacity(map, frames[currentOffset], 1);
            }, stepTime);
        }, waitTime);
    });
});
</script>

</body></html>

KAOS · July 21

Development has ended... I am going to smash the f*ck out of this computer.

KAOS · July 23

So much for "Best of Times" :arrowhead:

KAOS · July 23

Fortunately, I spared the computer. Partially due to the fact that I just fixed my A/C.... which also benefits the computer when the ambient air temp is in excess of 100F!!!

Managed to get this working with geo.

image.png.9176e83f4e4efa76d3624dc3980389c9.png

KAOS · July 23

It is also interactive. But I will strip away some of that for use inside the emulator.

KAOS · July 23

The level of zoom is pretty damn good...

I will provide a link once it is a little more sorted and uploaded.

wxdude64 · July 23

41 minutes ago, KAOS said:

So much for "Best of Times"

Sledgehammers work better, just saying.... And thanks for 'sticking' Styx into my head!

KAOS · July 23

Brain worm.

KAOS · July 23

KAOS · July 23

You know... I could just keep all of this for myself. But I choose to share, because if someone else was doing it... it would be nice if they shared.

Please let me know if I am over-sharing.

KAOS · July 24

Interesting comparison...

KAOS · July 24

Which do you prefer? Left or Right?

nw baltimore wx · July 24

Right

vastateofmind · July 24

I prefer right, as well.

KAOS · July 24

Thanks.

Here is link to radar only...

https://k-a-0-s.github.io/twcradar.html

KAOS · July 25

Mobile with new geo locating radar.

https://k-a-0-s.github.io/mobile.html

wxdude64 · July 25

On 7/23/2024 at 10:09 PM, KAOS said:

Interesting comparison...

Right

40/70 Benchmark · July 25

What a weenie orgie this thread is :lol:

Sickos...

KAOS · July 31

On 7/25/2024 at 8:04 AM, 40/70 Benchmark said:

What a weenie orgie this thread is

Sickos...

Indeed

KAOS · August 1

Update...

https://k-a-0-s.github.io/mobile.html

Mobile with static maps and geo-location.

This should run smoothly on nearly anything. If not... I can't help you. Upgrade your hardware?

I will mostly be working on this and the desktop version from this point forward.

And possibly more on animated radar mobile version but I need to clean things up. Too many versions, etc.

Thanks to those who commented on radar comparison.

KAOS · August 2

I am going to add a clickable button to the radar slides which will transport the user to dedicated interactive radar pages.

On the Regional Radar slide there will be a button that takes you to an animated geo based radar. Since the map is interactive you will be free to explore the entire map from that point.

On the Local Radar slide (only shown when there are alerts) there will be a button that takes you to an animated geo based radar that displays alerts/warnings which are clickable. When you click the alert area on the map, it will display a text popup with a current full description of the alert for that area. Radar imagery will also be provided. As with the Regional Radar button, initial centering of the map will correlate with the location that is currently being used by the emulator but will also allow you to explore from that point.

Pretty fancy... eh?

This feature will be first seen in the https://k-a-0-s.github.io/mobile.html link which I am currently working on.

KAOS · August 2

Geo coordinates have been the most challenging part of all of this... Retrieving and ensuring they are reliably "passed" to other "pages", etc.

While simultaneously using multiple API's to achieve some of that functionality.

KAOS · August 3

External Radar Button (Regional Radar Slide)...

KAOS · August 3

Still need to tweak the external radar site. Duration and opacity of radar loop, etc.

Moving on to the Alerts Radar for now.

KAOS · August 3

Here is the Alerts Radar with popups....

vastateofmind · August 3

1 hour ago, KAOS said:

Here is the Alerts Radar with popups....

Ahhh, man...this is AWESOME!!

KAOS · August 3

51 minutes ago, vastateofmind said:

Ahhh, man...this is AWESOME!!

Glad you like it. Everything should now be working at this link....

https://k-a-0-s.github.io/mobile.html

Still need to do some tweaks... but that should be 95% there.

KAOS · August 3

Copy/paste from the Alerts Radar....

Severe Thunderstorm Warning issued August 3 at 1:47PM EDT until August 3 at 2:30PM EDT by NWS Baltimore MD/Washington DC
SVRLWX The National Weather Service in Sterling Virginia has issued a * Severe Thunderstorm Warning for... Northwestern Washington County in north central Maryland... Northern Frederick County in northwestern Virginia... Morgan County in the Panhandle of West Virginia... Northwestern Berkeley County in the Panhandle of West Virginia... Northeastern Hampshire County in eastern West Virginia... * Until 230 PM EDT. * At 146 PM EDT, a severe thunderstorm was located near Paw Paw, moving northeast at 25 mph. HAZARD...60 mph wind gusts. SOURCE...Radar indicated. IMPACT...Damaging winds will cause some trees and large branches to fall. This could injure those outdoors, as well as damage homes and vehicles. Roadways may become blocked by downed trees. Localized power outages are possible. Unsecured light objects may become projectiles. * Locations impacted include... Hancock, Berkeley Springs, Great Cacapon, Johnsons Mill, Omps, Valley View, Fishers Bridge, Spohrs Crossroads, Oakland, Rock Gap, Stotlers Crossroads, Highland Ridge, Largent, Smith Crossroads, Berryville, New Hope, Shady Grove, and Ridge.

KAOS · August 3

Also... if you click the link above, it takes you to the NWS json file from which the data is extracted.

Which looks something like this....

{
    "@context": [
        "https://geojson.org/geojson-ld/geojson-context.jsonld",
        {
            "@version": "1.1",
            "wx": "https://api.weather.gov/ontology#",
            "@vocab": "https://api.weather.gov/ontology#"
        }
    ],
    "id": "https://api.weather.gov/alerts/urn:oid:2.49.0.1.840.0.89be51b0f5f4da67f84715443376f89ffb2727bf.001.1",
    "type": "Feature",
    "geometry": {
        "type": "Polygon",
        "coordinates": [
            [
                [
                    -78.450000000000003,
                    39.390000000000001
                ],
                [
                    -78.5,
                    39.450000000000003
                ],
                [
                    -78.2099999,
                    39.720000000000006
                ],
                [
                    -78.060000000000002,
                    39.530000000000008
                ],
                [
                    -78.450000000000003,
                    39.390000000000001
                ]
            ]
        ]
    },
    "properties": {
        "@id": "https://api.weather.gov/alerts/urn:oid:2.49.0.1.840.0.89be51b0f5f4da67f84715443376f89ffb2727bf.001.1",
        "@type": "wx:Alert",
        "id": "urn:oid:2.49.0.1.840.0.89be51b0f5f4da67f84715443376f89ffb2727bf.001.1",
        "areaDesc": "Washington, MD; Frederick, VA; Berkeley, WV; Hampshire, WV; Morgan, WV",
        "geocode": {
            "SAME": [
                "024043",
                "051069",
                "054003",
                "054027",
                "054065"
            ],
            "UGC": [
                "MDC043",
                "VAC069",
                "WVC003",
                "WVC027",
                "WVC065"
            ]
        },
        "affectedZones": [
            "https://api.weather.gov/zones/county/MDC043",
            "https://api.weather.gov/zones/county/VAC069",
            "https://api.weather.gov/zones/county/WVC003",
            "https://api.weather.gov/zones/county/WVC027",
            "https://api.weather.gov/zones/county/WVC065"
        ],
        "references": [],
        "sent": "2024-08-03T13:47:00-04:00",
        "effective": "2024-08-03T13:47:00-04:00",
        "onset": "2024-08-03T13:47:00-04:00",
        "expires": "2024-08-03T14:30:00-04:00",
        "ends": "2024-08-03T14:30:00-04:00",
        "status": "Actual",
        "messageType": "Alert",
        "category": "Met",
        "severity": "Severe",
        "certainty": "Observed",
        "urgency": "Immediate",
        "event": "Severe Thunderstorm Warning",
        "sender": "[email protected]",
        "senderName": "NWS Baltimore MD/Washington DC",
        "headline": "Severe Thunderstorm Warning issued August 3 at 1:47PM EDT until August 3 at 2:30PM EDT by NWS Baltimore MD/Washington DC",
        "description": "SVRLWX\n\nThe National Weather Service in Sterling Virginia has issued a\n\n* Severe Thunderstorm Warning for...\nNorthwestern Washington County in north central Maryland...\nNorthern Frederick County in northwestern Virginia...\nMorgan County in the Panhandle of West Virginia...\nNorthwestern Berkeley County in the Panhandle of West Virginia...\nNortheastern Hampshire County in eastern West Virginia...\n\n* Until 230 PM EDT.\n\n* At 146 PM EDT, a severe thunderstorm was located near Paw Paw,\nmoving northeast at 25 mph.\n\nHAZARD...60 mph wind gusts.\n\nSOURCE...Radar indicated.\n\nIMPACT...Damaging winds will cause some trees and large branches\nto fall. This could injure those outdoors, as well as\ndamage homes and vehicles. Roadways may become blocked by\ndowned trees. Localized power outages are possible.\nUnsecured light objects may become projectiles.\n\n* Locations impacted include...\nHancock, Berkeley Springs, Great Cacapon, Johnsons Mill, Omps,\nValley View, Fishers Bridge, Spohrs Crossroads, Oakland, Rock Gap,\nStotlers Crossroads, Highland Ridge, Largent, Smith Crossroads,\nBerryville, New Hope, Shady Grove, and Ridge.",
        "instruction": "For your protection move to an interior room on the lowest floor of a\nbuilding.\n\nLarge hail, damaging wind, and continuous cloud to ground lightning\nare occurring with this storm. Move indoors immediately. Lightning is\none of nature's leading killers. Remember, if you can hear thunder,\nyou are close enough to be struck by lightning.",
        "response": "Shelter",
        "parameters": {
            "AWIPSidentifier": [
                "SVRLWX"
            ],
            "WMOidentifier": [
                "WUUS51 KLWX 031747"
            ],
            "eventMotionDescription": [
                "2024-08-03T17:46:00-00:00...storm...238DEG...22KT...39.46,-78.41"
            ],
            "windThreat": [
                "RADAR INDICATED"
            ],
            "maxWindGust": [
                "60 MPH"
            ],
            "hailThreat": [
                "RADAR INDICATED"
            ],
            "maxHailSize": [
                "Up to .75"
            ],
            "BLOCKCHANNEL": [
                "EAS",
                "NWEM",
                "CMAS"
            ],
            "EAS-ORG": [
                "WXR"
            ],
            "VTEC": [
                "/O.NEW.KLWX.SV.W.0212.240803T1747Z-240803T1830Z/"
            ],
            "eventEndingTime": [
                "2024-08-03T18:30:00+00:00"
            ]
        },
        "replacedBy": "https://api.weather.gov/alerts/urn:oid:2.49.0.1.840.0.ad3ea6c6293b26bfedf6da533870ba899c31e24c.001.1",
        "replacedAt": "2024-08-03T14:10:00-04:00"
    }
}

Member Statistics

TWC "Best of Times" Emulators...

Recommended Posts

Link to comment

Share on other sites

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Eskimo Joe

KAOS

KAOS

Posted Images

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members