[Question] How to add radar data to map

[dlcole]

I'm interested in adding radar data, preferably a radar loop, to an existing map in a NativeScript JavaScript app, and am looking for pointers to get started. For example, which weather source to use? I've found http://mesonet.agron.iastate.edu/ogc/, but would love to hear from anyone who's tackled this already.

[nickolanack]

I know this is an old question but since Im doing something similar... For starters you want to add tile layers to your map for ios and android

android

const TileProvider = com.google.android.gms.maps.model.UrlTileProvider.extend({
            setUrl:function(url){
                this._url=url;
            },
            getTileUrl: function(x, y, zoom) {

                try {
                    var url=this._url.replace('{x}', x).replace('{y}', y).replace('{z}', zoom).replace('{time}', (new Date()).getTime());
                    console.log(url);
                    return new java.net.URL(url);
                } catch (e) {
                    console.error(e)
                }
            }

        });

        let tileProvider = new TileProvider(512, 512);
        tileProvider.setUrl("https://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/{z}/{x}/{y}.png?{time}");

        let tileOverlay = map.gMap.addTileOverlay(new com.google.android.gms.maps.model.TileOverlayOptions()
            .tileProvider(tileProvider));

ios:

// Create the GMSTileLayer
                let tileUrl="https://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/{z}/{x}/{y}.png?{time}";
        let tileOverlay = GMSURLTileLayer.tileLayerWithURLConstructor(function(x, y, z){
            try{
                return NSURL.URLWithString(tileUrl.replace('{x}', x).replace('{y}', y).replace('{z}', z).replace('{time}', (new Date()).getTime()));
            }catch(e){
                console.error(e);
            }
        });

        // Display on the map at a specific zIndex
        //tileLayer.zIndex = 100;
        tileOverlay.tileSize = 512;
        tileOverlay.map = map.nativeView;

[nickolanack]

[dlcole]

@nickolanack Thanks so much! I plan to return to this topic early next year.

For others watching at home, here are a couple pertinent SO posts I've found:

https://stackoverflow.com/questions/12813138/add-custom-layer-to-google-maps https://stackoverflow.com/questions/26066141/weather-radar-loop-on-google-maps-api-3

[dlcole]

@nickcoury I had been putting this off for a while because I expected it would be a lot of work. But I dropped your code in and in maybe 15 minutes I had weather radar on my maps. Awesome - thanks so much! Now I'll need to add animation, and the links in my above post show examples for that.

Are you aware of any options that would not be as pixilated at higher zooms?

[nickolanack]

https://www.rainviewer.com/api.html - maybe a little higher resolution...