iD/js/id/services/mapillary.js

iD.services.mapillary = function() {
    var mapillary = {},
        dispatch = d3.dispatch('loadedImages', 'loadedSigns'),
        apibase = 'https://a.mapillary.com/v2/',
        urlImage = 'https://www.mapillary.com/map/im/',
        urlThumb = 'https://d1cuyjsrcm0gby.cloudfront.net/',
        clientId = 'NzNRM2otQkR2SHJzaXJmNmdQWVQ0dzo1ZWYyMmYwNjdmNDdlNmVi',
        maxResults = 1000,
        tileZoom = 14;


    function loadSignDefs(context) {
        if (!iD.services.mapillary.sign_defs) {
            iD.services.mapillary.sign_defs = {};
            _.each(['au', 'br', 'ca', 'de', 'us'], function(region) {
                d3.json(context.assetPath() + 'traffico/string-maps/' + region + '-map.json', function(err, data) {
                    if (err) return;
                    if (region === 'de') region = 'eu';
                    iD.services.mapillary.sign_defs[region] = data;
                });
            });
        }
    }

    function abortRequest(i) {
        i.abort();
    }

    function getTiles(projection, dimensions) {
        var s = projection.scale() * 2 * Math.PI,
            z = Math.max(Math.log(s) / Math.log(2) - 8, 0),
            ts = 256 * Math.pow(2, z - tileZoom),
            origin = [
                s / 2 - projection.translate()[0],
                s / 2 - projection.translate()[1]];

        return d3.geo.tile()
            .scaleExtent([tileZoom, tileZoom])
            .scale(s)
            .size(dimensions)
            .translate(projection.translate())()
            .map(function(tile) {
                var x = tile[0] * ts - origin[0],
                    y = tile[1] * ts - origin[1];

                return {
                    id: tile.toString(),
                    extent: iD.geo.Extent(
                        projection.invert([x, y + ts]),
                        projection.invert([x + ts, y]))
                };
            });
    }


    function loadTiles(which, url, projection, dimensions) {
        var tiles = getTiles(projection, dimensions);

        _.filter(which.inflight, function(v, k) {
            var wanted = _.find(tiles, function(tile) { return k === tile.id; });
            if (!wanted) delete which.inflight[k];
            return !wanted;
        }).map(abortRequest);

        tiles.forEach(function(tile) {
            loadTilePage(which, url, tile, 0);
        });
    }

    function loadTilePage(which, url, tile, page) {
        var cache = iD.services.mapillary.cache,
            id = tile.id + ',' + String(page),
            rect = tile.extent.rectangle();

        if (which.loaded[id] || which.inflight[id]) return;

        which.inflight[id] = d3.json(url +
            iD.util.qsString({
                geojson: 'true',
                limit: maxResults,
                page: page,
                client_id: clientId,
                min_lon: rect[0],
                min_lat: rect[1],
                max_lon: rect[2],
                max_lat: rect[3]
            }), function(err, data) {
                which.loaded[id] = true;
                delete which.inflight[id];
                if (err) return;

                if (which === cache.images) {
                    dispatch.loadedImages(data);
                } else if (which === cache.signs) {
                    dispatch.loadedSigns(data);
                }

                if (data.features.length === maxResults) {
                    loadTilePage(which, url, tile, ++page);
                }
            }
        );
    }

    mapillary.loadImages = function(projection, dimensions) {
        var cache = iD.services.mapillary.cache,
            url = apibase + 'search/im/geojson?';
        loadTiles(cache.images, url, projection, dimensions);
    };

    mapillary.loadSigns = function(context, projection, dimensions) {
        var cache = iD.services.mapillary.cache,
            url = apibase + 'search/im/geojson/or?';

        loadSignDefs(context);
        loadTiles(cache.signs, url, projection, dimensions);
    };

    mapillary.signHTML = function(d) {
        if (!iD.services.mapillary.sign_defs) return;

        var detectionPackage = d.signs[0].package,
            type = d.signs[0].type,
            country = detectionPackage.split('_')[1];
        return iD.services.mapillary.sign_defs[country][type];
    };

    mapillary.showThumbnail = function(selection, imageKey) {
        if (!imageKey) return;

        var thumbnail = selection.selectAll('.mapillary-image')
            .data([0]);

        // Enter
        var enter = thumbnail.enter().append('div')
            .attr('class', 'mapillary-image');

        enter.append('button')
            .on('click', function () {
                mapillary.hideThumbnail(selection);
            })
            .append('div')
            .call(iD.svg.Icon('#icon-close'));

        enter.append('img');

        enter.append('a')
            .attr('class', 'link')
            .attr('target', '_blank')
            .call(iD.svg.Icon('#icon-out-link', 'inline'))
            .append('span')
            .text(t('mapillary.view_on_mapillary'));

        // Update
        thumbnail
            .transition()
            .duration(200)
            .style('opacity', 1);

        thumbnail.selectAll('img')
            .attr('src', urlThumb + imageKey + '/thumb-320.jpg');

        thumbnail.selectAll('a')
            .attr('href', urlImage + imageKey);

    };

    mapillary.hideThumbnail = function(selection) {
        iD.services.mapillary.thumb = null;
        selection.selectAll('.mapillary-image')
            .transition()
            .duration(200)
            .style('opacity', 0)
            .remove();
    };

    mapillary.selectedThumbnail = function(imageKey) {
        if (!arguments.length) return iD.services.mapillary.thumb;
        iD.services.mapillary.thumb = imageKey;
    };

    mapillary.reset = function() {
        var cache = iD.services.mapillary.cache;

        if (cache) {
            _.forEach(cache.images.inflight, abortRequest);
            _.forEach(cache.signs.inflight, abortRequest);
        }

        iD.services.mapillary.cache = {
            images: { inflight: {}, loaded: {}, rbush: rbush() },
            signs:  { inflight: {}, loaded: {}, rbush: rbush() }
        };

        iD.services.mapillary.thumb = null;

        return mapillary;
    };


    if (!iD.services.mapillary.cache) {
        mapillary.reset();
    }

    return d3.rebind(mapillary, dispatch, 'on');
};