Jump to content

  • Member Statistics

    17,556
    Total Members
    7,904
    Most Online
    Billy Chaos
    Newest Member
    Billy Chaos
    Joined

TWC "Best of Times" Emulators...

KAOS

By KAOS,
in Mid Atlantic

 Share

Recommended Posts

KAOS

KAOS

Posted
  • Author
Posted

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
        });

 


}

Link to comment
Share on other sites
  • Replies 167
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Eskimo Joe
Eskimo Joe

This thread is pure gold.

KAOS
KAOS

Pasadena/Maryland/Mid-Atlantic low-rez radar specific version for use with my FireTV... https://kaosfactor.github.io/

KAOS
KAOS

Here is another... https://www.weatherscan.net/ Enjoy! https://en.wikipedia.org/wiki/Weatherscan

Posted Images

KAOS

KAOS

Posted
  • Author
Posted

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">

    <link href="https://api.mapbox.com/mapbox-gl-js/v3.5.1/mapbox-gl.css" rel="stylesheet">
    <script src="https://api.mapbox.com/mapbox-gl-js/v3.5.1/mapbox-gl.js"></script>

    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #map {
            width: 100%;
            height: 100%;
        }
    </style>


</head>
<body>

<!-- Load the `mapbox-gl-geocoder` plugin. -->
<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&amp;id=streets-v11&amp;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>

<script>

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
        })
    );

    function addRasterLayer(map, interval, opacity = 0) {
        const id = `amp-${layers.join('::')}-${interval}`;
        map.addSource(id, {
            type: 'raster',
            tiles: [1, 2, 3, 4].map((s) => getTilePath(s, interval)),
            tileSize: TILE_SIZE,
            attribution: '<a href="https://www.aerisweather.com/">Xweather</a>'
        });
        map.addLayer({
            id,
            type: 'raster',
            source: id,
            minzoom: 0,
            maxzoom: 22,
            paint: {
                'raster-opacity': opacity,
                'raster-opacity-transition': {
                    duration: 0,
                    delay: 0
                }
            }
        });

        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>

<script src="mapbox-animation_data/mapbox-gl.js" async="" defer="defer"></script>
<link href="mapbox-animation_data/mapbox-gl.css" rel="stylesheet">

</body></html>

Link to comment
Share on other sites
KAOS

KAOS

Posted
  • Author
Posted

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

Link to comment
Share on other sites
KAOS

KAOS

Posted
  • Author
Posted

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.

Link to comment
Share on other sites
KAOS

KAOS

Posted
  • Author
Posted

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.

 

 

  • Like 2
Link to comment
Share on other sites
KAOS

KAOS

Posted
  • Author
Posted

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.

 

Link to comment
Share on other sites
KAOS

KAOS

Posted
  • Author
Posted

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.

 

Link to comment
Share on other sites
KAOS

KAOS

Posted
  • Author
Posted

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.

Link to comment
Share on other sites
KAOS

KAOS

Posted
  • Author
Posted

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"
    }
}

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...