var width = document.getElementById('map')
    .clientWidth;
var height = document.getElementById('map')
    .clientHeight;

var map = L.map('map', {
    center: [51.4659249585, -3.16769715331],
    zoom: 14
});

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

var draw = function() {
    d3.select('#overlay')
        .remove();
    var bounds = map.getBounds();
    var topLeft = map.latLngToLayerPoint(bounds.getNorthWest());
    var bottomRight = map.latLngToLayerPoint(bounds.getSouthEast());
    var existing = d3.set();
    var drawLimit = bounds.pad(0.4);

    var filteredPoints = points.filter(function(d) {
        var latlng = new L.LatLng(d.lat, d.lon);
        if (!drawLimit.contains(latlng)) {
            return false;
        }
        var point = map.latLngToLayerPoint(latlng);

        key = point.toString();
        if (existing.has(key)) {
            return false;
        }
        existing.add(key);

        d.x = point.x;
        d.y = point.y;
        return true;
    });

    var svg = d3.select(map.getPanes()
            .overlayPane)
        .append("svg")
        .attr('id', 'overlay')
        .attr("class", "leaflet-zoom-hide")
        .style("width", map.getSize()
            .x + 'px')
        .style("height", map.getSize()
            .y + 'px')
        .style("margin-left", topLeft.x + "px")
        .style("margin-top", topLeft.y + "px");

    var g = svg.append("g")
        .attr("transform", "translate(" + (-topLeft.x) + "," + (-topLeft.y) + ")");

    var svgPoints = g.attr("class", "points")
        .selectAll("g")
        .data(filteredPoints)
        .enter()
        .append("g")
        .attr("class", "point");

    svgPoints.append("circle")
        .attr("class", function(d) {
            return "point-cell c" + d.count;
        })
        .attr("transform", function(d) {
            return "translate(" + d.x + "," + d.y + ")";
        })
        .attr("r", function(d) {
            return d.count;
        });
}

d3.csv('postcode_data.csv', function(d) {
    return {
        postcode: d.postcode,
        lat: +d.lat,
        lon: +d.lon,
        count: +d.count
    };
}, function(error, rows) {
    points = rows;
    draw();
    map.on('viewreset moveend', draw);
});