Enabling political maps on Radio Garden

(last updated 2018-Sep-24)

I discovered Radio Garden in this reddit thread. It provides a 3D globe with dots representing streaming radio stations. Simply scroll to a dot and listen, right in your browser. Here's a screenshot,

This is great, but... I'd like to have a political map view so that I can navigate around familiar locations, and there doesn't seem to be an option for that.

Looking at the HTML and Javascript code, I figured out that Radio Garden is built on CesiumJS, "An open-source JavaScript library for world-class 3D globes and maps". The demo there allows easy switching between map sources, so I figured there should be a way to tweak Radio Garden to use a different map source.

In the Firefox debugger Network tab, you can see the API calls to get the map graphics, for example,

https://cfservices000300c.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/5/11/13

Browsing to

https://cfservices000300c.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer

it describes the service there, and provides links one level up to other services,

Based on the API call urls, I reasoned that replacing "/World_Imagery/" with "/World_Street_map/" might give me what I wanted.

I first tried modifying the javascript after page load. After some poking around I came up with this,

newtext = window.webpackJsonp[0][1].tNCV.toSource().replace("World_Imagery", "World_Street_Map")
window.webpackJsonp[0][1].tNCV = eval(newtext)

I don't know anything about webpack, but it seems the code has already been evaluated and exists in an unreachable closure environment at this point, so I would have to find another way.

There is only one reference to the arcgis service in the Radio Garden code, found in,

http://radio.garden/chunk-b23fa97719255bea0ad8.js

at least until they update it and the name, which appears to be a checksum, changes.

I've written some GreaseMonkey scripts before, so I spent some time experimenting with that, but I couldn't get it to work. This stackoverflow comment suggested something called Tampermonkey instead,

"Peter, as per GM's own recommendation, you should switch to Tampermonkey or Violentmonkey. The new Greasemonkey is severely degraded, not backwards compatible, and has significantly less utility than the other engines. – Brock Adams Mar 19 at 18:56 "

Based on some examples I found on the web, I came up with a script which does this,

• Use the "beforescriptexecute" event to intercept the point between javascript load and run
• Test the filename for match, in this case using the "b23..." part of the file name
• Stop handling
• Re-load the javascript page source, with an "onload" handler
• In the onload handler, modify the javascript as needed, then add it to the page

Here is a snapshot of my Tampermonkey script,

    // ==UserScript==
    // @name         Radio Garden tweaks
    // @namespace    http://tampermonkey.net/
    // @version      0.1
    // @description  try to take over the world!
    // @author       You
    // @match        http://radio.garden/*
    // @grant        GM_xmlhttpRequest
    // ==/UserScript==

    (function() {
        'use strict';
        // Your code here...

    function changeMapSource(req) {
        console.log("changeMapSource");
        var newScript = document.createElement('script');
        newScript.type = "text/javascript";
        newScript.textContent = req.responseText.replace("World_Imagery", "World_Street_Map")
        var head = document.getElementsByTagName('head')[0];
        head.appendChild(newScript);
    }

    window.addEventListener("beforescriptexecute", function(e) {
        if (e.target.src.search(/b23fa97719255be/) != -1) {
            console.log("before execute " + e.target.src);
            e.preventDefault();
            e.stopPropagation();
            GM_xmlhttpRequest({
                method: "GET",
                url: e.target.src,
                onload: function(response) {
                    changeMapSource(response);
                },
                onerror: function(response) {
                                    console.log("onerror");
                }
            });
        }
    }, true);

    console.log("ready");

    })();

It works! Here is a screenshot of Radio Garden using street maps instead of satellite imagery,

and zoomed in,

Next steps

Since the javascript is packed or transpiled or something, the filenames will likely change as new versions of Radio Garden are released. It might be possible to search the javascript text for "arcgis" and match on that instead of checksum-based filename.

I wonder how hard it would be to modify the UI to allow dynamically switching the source.

The main Radio Garden page doesn't provide any links to information about the project itself. I had to do a little searching and found the project's "home page".

More reading at this Radio World article.