osmfixer/web/script.js

widths = [12, 13, 13, 13, 13, 13, 13, 13];
opas = [0.8, 0.6, 0.5, 0.5, 0.4];
mwidths = [1, 1, 1, 1.5, 2, 3, 5, 6, 6, 4, 3, 2];

function $(id) { return document.getElementById(id); }

function marker(stat, z) {
    if (z > 15) {
        return L.circle(
            [stat.lat, stat.lon],
            {
                color: 'black',
                fillColor: stat.attrerrs ? 'red' : stat.su ? '#0000c3' : '#78f378', 
                radius: mwidths[23 - z],
                fillOpacity : 1,
                weight : 1,
                id : stat.id
            }
        );
    } else {
        return L.polyline(
            [[stat.lat, stat.lon], [stat.lat, stat.lon]],
            {
                color: stat.attrerrs ? 'red' : stat.su ? '#0000c3' : '#78f378',
                weight: widths[15 - z],
                opacity: opas[15 - z],
                id : stat.id
            }
        );
    }
}

function poly(group, z) {
    var style = {color: "#85f385", smoothFactor : 0.4, fillOpacity: 0.2, id : group.id};
    if (group.new) {
        style.color = "#0000c3";
    }
    if (z < 16) {
        style.weight = 11;
        style.opacity = 0.5;
        style.fillOpacity = 0.5;
    }
    return L.polygon(group.poly, style)
}

function sugArr(sug, z) {
    return L.polyline(sug.arrow, {id : sug.id, color: '#0000c3', smoothFactor : 0.1, weight: 4, opacity:0.5});
}

function renderStat(stat) {
    var attrrows = {};
    var ll = {lat: stat.lat, lon: stat.lon};

    var content = document.createElement('div');
    content.setAttribute("id", "nav")
    var attrTbl = document.createElement('table');
     attrTbl.setAttribute("id", "attr-tbl")
    var suggD = document.createElement('div');
    suggD.setAttribute("id", "sugg")

    if (stat.attrs.name) {        
        content.innerHTML = "Node <a onmouseover='nodeHl( " + stat.id + ")' onmouseout='nodeUnHl( " + stat.id + ")' target='_blank' href='https://www.openstreetmap.org/node/" + stat.osmid + "'>" + stat.osmid + "</a> (<b>\"" + stat.attrs.name + "\"</b>)";
    } else {
        content.innerHTML = "Node <a onmouseover='nodeHl( " + stat.id + ")' onmouseout='nodeUnHl( " + stat.id + ")' target='_blank' href='https://www.openstreetmap.org/node/" + stat.osmid + "'>" + stat.osmid + "</a>";
    }

    content.appendChild(attrTbl);    
    content.appendChild(suggD);

    var tbody = document.createElement('tbody');
    attrTbl.appendChild(tbody);

    for (var key in stat.attrs) {
        var row = document.createElement('tr');
        var col1 = document.createElement('td');
        var col2 = document.createElement('td');
        tbody.appendChild(row);
        row.appendChild(col1);
        row.appendChild(col2);
        col1.innerHTML = "<a href=\"https://wiki.openstreetmap.org/wiki/Key:" + key + "\" target=\"_blank\"><tt>" + key + "</tt></a>";
        for (var i = 0; i <  stat.attrs[key].length; i++) col2.innerHTML += "<span class='attrval'>" + stat.attrs[key][i] + "</span>"+ "<br>";
        attrrows[key] = row;
    }

    for (var i = 0; i < stat.attrerrs.length; i++) {
        var err = stat.attrerrs[i];
        var row = attrrows[err.attr[0]];
        row.className = "err-" + Math.round(err.conf * 10);

        var info = document.createElement('div');

        if (err.other_osmid != stat.osmid) {
            info.innerHTML = "Does not match node <a onmouseover='nodeHl( " + err.other + ")' onmouseout='nodeUnHl( " + err.other + ")' target=\"_blank\" href=\"https://www.openstreetmap.org/node/" + err.other_osmid + "\">" + err.other_osmid + "</a>";
        } else {
            info.innerHTML = "Does not match '" + err.other_attr[0] + "' = '" + err.other_attr[1];
        }
        info.className = 'attr-err-info';
        row.childNodes[1].appendChild(info);
    }

    var suggList = document.createElement('ul');

    if (stat.su.length) {       
        var a = document.createElement('span'); 
        a.className = "sugtit";
        a.innerHTML = "Suggestions";
        suggD.appendChild(a);
    }

    suggD.appendChild(suggList);

    for (var i = 0; i < stat.su.length; i++) {
        var sugg = stat.su[i];

        var suggDiv = document.createElement('li');
        
        if (sugg.type == 1) {
            suggDiv.innerHTML = "Move node into a <span class='grouplink' onmouseover='groupHl( " + sugg.target_gid + ")' onmouseout='groupUnHl( " + sugg.target_gid + ")'>new relation</span> <tt>public_transport=stop_area</tt>";
        } else if (sugg.type == 2) {
            suggDiv.innerHTML = "Move node into existing relation <a onmouseover='groupHl( " + sugg.target_gid + ")' onmouseout='groupUnHl( " + sugg.target_gid + ")' href=\"https://www.openstreetmap.org/relation/" + sugg.target_osm_rel_id + "\" target=\"_blank\">" + sugg.target_osm_rel_id + "</a>.";
        } else if (sugg.type == 3) {
            suggDiv.innerHTML = "Move node from existing relation <a onmouseover='groupHl( " + sugg.orig_gid + ")' onmouseout='groupUnHl( " + sugg.orig_gid + ")' href=\"https://www.openstreetmap.org/relation/" + sugg.orig_osm_rel_id + "\" target=\"_blank\">" + sugg.orig_osm_rel_id + "</a> into a <span class='grouplink' onmouseover='groupHl( " + sugg.target_gid + ")' onmouseout='groupUnHl( " + sugg.target_gid + ")'>new relation</span> <tt>public_transport=stop_area</tt>";
        } else if (sugg.type == 4) {
            suggDiv.innerHTML = "Move node from existing relation <a onmouseover='groupHl( " + sugg.orig_gid + ")' onmouseout='groupUnHl( " + sugg.orig_gid + ")' href=\"https://www.openstreetmap.org/relation/" + sugg.orig_osm_rel_id + "\" target=\"_blank\">" + sugg.orig_osm_rel_id + "</a> into existing relation <a onmouseover='groupHl( " + sugg.target_gid + ")' onmouseout='groupUnHl( " + sugg.target_gid + ")' href=\"https://www.openstreetmap.org/relation/" + sugg.target_osm_rel_id + "\" target=\"_blank\">" + sugg.target_osm_rel_id + "</a>.";
        } else if (sugg.type == 5) {
            suggDiv.innerHTML = "Move node out of existing relation <a onmouseover='groupHl( " + sugg.orig_gid + ")' onmouseout='groupUnHl( " + sugg.orig_gid + ")' href=\"https://www.openstreetmap.org/relation/" + sugg.orig_osm_rel_id + "\" target=\"_blank\">" + sugg.orig_osm_rel_id + "</a>";
        } else if (sugg.type == 6) {
            suggDiv.innerHTML = "Fix attribute <tt>" + sugg.attr + "</tt>";
        }

        suggList.appendChild(suggDiv);
    }

    if (map.getZoom() < 18) {
        map.setView(ll, 18, {animate: true});
    }

    L.popup({opacity: 0.8})
        .setLatLng(ll)
        .setContent(content)
        .openOn(map);
}

function openStat(id) {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            var content = JSON.parse(this.responseText);
            renderStat(content);
        }
    };

    xmlhttp.open("GET", "http://localhost:9090/stat?id=" + id, true);
    xmlhttp.send();
}

function renderGroup(grp, ll) {
    var attrrows = {};

    var content = document.createElement('div');
    content.setAttribute("id", "nav");

    var newMembers = document.createElement('div');
    newMembers.setAttribute("id", "group-stations-new")
    newMembers.innerHTML = "<span class='newmemberstit'>New Members</span>";

    var oldMembers = document.createElement('div');
    oldMembers.setAttribute("id", "group-stations-old")
    oldMembers.innerHTML = "<span class='oldmemberstit'>Existing Members</span>";

    if (grp.osmid == 1) {
        content.innerHTML = "<span class='grouplink' onmouseover='groupHl( " + grp.id + ")' onmouseout='groupUnHl( " + grp.id + ")'>New relation</span> <tt>public_transport=stop_area</tt>";
    } else {
        content.innerHTML = "OSM relation <a onmouseover='groupHl( " + grp.id + ")' onmouseout='groupUnHl( " + grp.id + ")' target='_blank' href='https://www.openstreetmap.org/relation/" + grp.osmid + "'>" + grp.osmid + "</a>";
    }

    content.appendChild(newMembers);
    if (grp.osmid != 1) content.appendChild(oldMembers);

    for (var key in grp.stations) {
        var stat = grp.stations[key];
        var row = document.createElement('div');

        if (stat.attrs.name) {        
            row.innerHTML = "Node <a onmouseover='nodeHl( " + stat.id + ")' onmouseout='nodeUnHl( " + stat.id + ")' target='_blank' href='https://www.openstreetmap.org/node/" + stat.osmid + "'>" + stat.osmid + "</a> (<b>\"" + stat.attrs.name + "\"</b>)";
        } else {
            row.innerHTML = "Node <a onmouseover='nodeHl( " + stat.id + ")' onmouseout='nodeUnHl( " + stat.id + ")' target='_blank' href='https://www.openstreetmap.org/node/" + stat.osmid + "'>" + stat.osmid + "</a>";
        }

        if (grp.osmid == 1 || stat.orig_group != grp.id) newMembers.appendChild(row);
        else {
            oldMembers.appendChild(row);
            if (stat.group != grp.id) {
                row.className = "del-stat";
            }
        }
    }

    if (map.getZoom() < 18) {
        map.setView(ll, 18, {animate: true});
    }

    L.popup({opacity: 0.8})
        .setLatLng(ll)
        .setContent(content)
        .openOn(map);
}

function openGroup(id, ll) {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            var content = JSON.parse(this.responseText);
            renderGroup(content, ll);
        }
    };

    xmlhttp.open("GET", "http://localhost:9090/group?id=" + id, true);
    xmlhttp.send();
}

function groupHl(id) {
    if (!document.groupIdx[id]) return;
    document.groupIdx[id].setStyle({
        'weight': 6,
        'fillOpacity':0.5
});
}

function groupUnHl(id) {
    if (!document.groupIdx[id]) return;
        document.groupIdx[id].setStyle({
        'weight': 3,
        'fillOpacity':0.2
});
}

function nodeHl(id) {
    if (!document.nodeIdx[id]) return;
    document.nodeIdx[id].setStyle({
        'weight': 5,
        'color' : "#eecc00"
});
}

function nodeUnHl(id) {
    if (!document.nodeIdx[id]) return;
        document.nodeIdx[id].setStyle({
        'weight': 1,
        'color' : "black"
});
}

var map = L.map('map', {
  renderer: L.canvas(),
  attributionControl: false,
}).setView([47.9965, 7.8469], 13);

map.addControl(L.control.attribution({
        position: 'bottomright',
        prefix: '&copy; <a href="http://ad.cs.uni-freiburg.de">University of Freiburg, Chair of Algorithms and Data Structures</a>'
      }));

L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', {
    maxZoom: 23,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy; <a href="https://carto.com/attribution">CARTO</a>',
    id: 'mapbox.streets'
}).addTo(map);

var layer = L.featureGroup().addTo(map);
var labelLayer = L.featureGroup().addTo(map);

map.on("moveend", function () {
    render();
});

function render() {
    var xmlhttp = new XMLHttpRequest();

    if (map.getZoom() < 11) {
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                var content = JSON.parse(this.responseText);

                layer.clearLayers();
                labelLayer.clearLayers();

                var blur = 22 - map.getZoom();
                var rad = 25 - map.getZoom();

                layer.addLayer(L.heatLayer(content.ok, {max: 500, gradient: {0: '#cbf7cb', 0.5: '#78f378', 1: '#29c329'}, minOpacity: 0.65, blur: blur, radius: rad}));
                layer.addLayer(L.heatLayer(content.sugg, {max: 500, gradient: {0: '#7f7fbd', 0.5: '#4444b3', 1: '#0606c1'}, minOpacity: 0.65, blur: blur-3, radius: Math.min(12, rad-3)}));
                
                layer.addLayer(L.heatLayer(content.err, {max: 500, gradient: {0: '#f39191', 0.5: '#ff5656', 1: '#ff0000'}, minOpacity: 0.75, blur: blur-3, radius: Math.min(10, rad-3), maxZoom: 15}));
            }
        };

        xmlhttp.open("GET", "http://localhost:9090/heatmap?z=" + map.getZoom() + "&bbox=" + [map.getBounds().getSouthWest().lat, map.getBounds().getSouthWest().lng, map.getBounds().getNorthEast().lat, map.getBounds().getNorthEast().lng].join(","), true);
        xmlhttp.send();
    } else {
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                var content = JSON.parse(this.responseText);

                layer.clearLayers();
                labelLayer.clearLayers();
                document.groupIdx = {};                
                document.nodeIdx = {};

                var stations = [];
                var labels = [];
                for (var i = 0; i < content.stats.length; i++) {
                    stat = content.stats[i];
                    var ndMarker = marker(stat, map.getZoom());
                    stations.push(ndMarker);
                    document.nodeIdx[stat.id] = ndMarker;
                }

                var groups = [];
                for (var i = 0; i < content.groups.length; i++) {
                    group = content.groups[i];
                    var groupPoly = poly(group, map.getZoom());
                    groups.push(groupPoly);
                    document.groupIdx[group.id] = groupPoly;
                }

                var suggs = [];
                for (var i = 0; i < content.su.length; i++) {
                    sugg = content.su[i];
                    var a = sugArr(sugg, map.getZoom());
                    suggs.push(a);
                }

                if (map.getZoom() > 15) {
                   labelLayer.addLayer(L.featureGroup(labels));
                   layer.addLayer(L.featureGroup(suggs).on('click', function(a) { openStat(a.layer.options.id); }));
                }

                if (map.getZoom() > 13) {
                   layer.addLayer(L.featureGroup(groups).on('click', function(a) { openGroup(a.layer.options.id, a.layer.getBounds().getCenter());}));
                }


                layer.addLayer(L.featureGroup(stations).on('click', function(a) {
                   openStat(a.layer.options.id);}));
            }
        };

        xmlhttp.open("GET", "http://localhost:9090/map?bbox=" + [map.getBounds().getSouthWest().lat, map.getBounds().getSouthWest().lng, map.getBounds().getNorthEast().lat, map.getBounds().getNorthEast().lng].join(","), true);
        xmlhttp.send();
    }
}

render();