Build Read-Only Webapp

[milo-trujillo]

A few users have asked how they can explore the camera map without downloading an app.

Let's throw something together with MapBox.js that calls the API to get a list of cameras, then displays them appropriately on the map in a web-browser. We'll give it a theme that fits the rest of the website.

This can replace the front-page image (or, better, only display the image if JS is disabled), and make the site much more immediately immersive.

[milo-trujillo]

So after some experimentation this may be more challenging than we expected. I have a prototype working, but it lags severely if we try to render all of the cameras. Code below:

var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/light-v8', //stylesheet location
    center: [0.0, 0.0], // starting position, opposite coordinates from Google maps
    zoom: 1 // starting zoom
});

function renderPins() {
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = function() {
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
        {
            var pins = xmlHttp.responseText.split("\n");
            pins.forEach(function(pin) {
                var fields = pin.split(", ");
                if( !isNaN(fields[0]) && !isNaN(fields[1]) )
                {
                    new mapboxgl.Marker()
                        .setLngLat([fields[1], fields[0]])
                        .addTo(map);
                }
            });
        }
    }

    xmlHttp.open("GET", "/getPins/0.0/0.0/1", true); // true for asynchronous 
    xmlHttp.send(null);
}

// if requestIdleCallback supported
if ('requestIdleCallback' in window) {
    requestIdleCallback(renderPins);
}
// Oh well, we'll just go for it
else {
    renderPins();
}

To make this performant (and more readable) in browsers we probably need to collapse cameras in to clusters like the map on Surveillance under Surveillance. This may involve significantly more code.

[milo-trujillo]

On the other hand, I just found this project which appears to do exactly what we want. They've released their code under an extremely permissive license, so we may be able to adapt their code in to website without much work.