D3 Examples - Mapping points with Leaflet + D3 (v4) + Canvas

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <title>Map of parking meters in San Francisco, built with d3.js with leaflet.js</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
    
    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
    <script src="L.CanvasLayer.js"></script>
    <script src="https://d3js.org/d3.v4.min.js"></script>
     
</head>
<body>
​
<h1>Leaflet + Canvas</h1>
<div id="mapid" style="width: 800px; height: 600px"></div>
​
    
<script>
​
// initialize Leaflet map, and set initial zoom and coordinatess
var mymap = L.map('mapid').setView([37.77139, -122.44486], 13);
​
//-----------------------------------------------------------
// NOTE: You'll need to get your own access Token from Mapbox
//       Dev account sign up is easy and free, with some dev Tokens included
//       https://www.mapbox.com/help/define-access-token/
//-----------------------------------------------------------
// add basemap layer
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://openstreetmap.org">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://mapbox.com">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox.light',
    accessToken: 'pk.eyJ1Ijoia3Jpc3RpbmhlbnJ5IiwiYSI6ImNqMWdxMjd5aDAwM28zM2xtaGV2azYwcjYifQ.NTJiOqcnhP-_3etf4aZYmQ'
}).addTo(mymap);
​
​
​
​
​
​
​
// drawing on canvas layer from https://github.com/Sumbera/gLayers.Leaflet
//var data = [[37.77139, -122.44486]];
var data = dataset;
​
var canvasLayer = L.canvasLayer()
            .delegate(this) // -- if we do not inherit from L.CanvasLayer we can setup a delegate to receive events from L.CanvasLayer
            .addTo(mymap);
      
function onDrawLayer(info) {
    //console.log("draw ")
    //console.log(info.zoom)
    var dotSize = 10/info.zoom
    var alpha = .9;  //0.2 + (info.zoom/100)*3;
    //console.log(alpha)
    var ctx = info.canvas.getContext('2d');
    ctx.clearRect(0, 0, info.canvas.width, info.canvas.height);
    
​
​
    for (var i = 0; i < dataset.length; i++) {
​
        var d = dataset[i];
        //console.log(d)
        if (info.bounds.contains([d.loc[0], d.loc[1]])) {
            ctx.fillStyle = "rgba(" + d.color[0] + "," + d.color[1] + "," + d.color[2] + "," + alpha + ")";
            
            dot = info.layer._map.latLngToContainerPoint([d.loc[0], d.loc[1]]);
            
            ctx.beginPath();
            ctx.arc(dot.x, dot.y, dotSize, 0, Math.PI * 2);
            ctx.fill();
            ctx.closePath();
        }
​
        
    }
};
​
​
​
​
function strToLocation(s){
        var arr = s.slice(1,-1).split(',');
        arr[0] = parseFloat(arr[0]);
        arr[1] = parseFloat(arr[1]);
        return arr;
    }
​
​
    capColors = {
        "Grey": {"hex":'#999', "rgb": [153, 153, 153]},
        "Green": {"hex": '#FF0', "rgb": [31, 168, 31]},
        "Yellow": {"hex":'yellow', "rgb": [255, 255, 0]},
        "Black": {"hex": 'black', "rgb": [20, 20, 20]},
        "Red": {"hex": 'red', "rgb": [206, 8, 8]},
        "Brown": {"hex": 'brown', "rgb": [112, 86, 20]},
        "Purple": {"hex": 'purple', "rgb": [61, 20, 112]},
        "Undefined": {"hex": '#ccc', "rgb": (204, 204, 204)}
​
    }
​
    function getCapColor(d){
        return capColors[d['CAP_COLOR']];
    }
​
// Get data
var datafile = "Parking_meters_sm.csv"; 
var dataset = [];
d3.csv(datafile, function(data){
​
        ids = d3.map(data, function(d){return d['RATEAREA'];}).keys()
        console.log(ids);
​
        caps = d3.map(data, function(d){return d['CAP_COLOR']}).keys();
        console.log(caps)
​
​
        data.forEach(function(d) {
​
            d.loc = strToLocation(d['LOCATION']);
            
            try{
                d.LatLng = new L.LatLng(d.loc[0], d.loc[1]);
            } catch(err) {
                console.log('error', d.LatLng, err)
            }
​
​
            d.color = getCapColor(d).rgb
            
​
            //d.color = getColor(d, ids);
            //var i = ids.indexOf(d['RATEAREA'])
​
            //console.log(d.loc, d.color)
        })
​
        dataset = data;
        canvasLayer.drawLayer();
​
​
})
​
​
​
​
</script>
</body>
</html>
    