​

// Options for map

const options = {

  lat: 37.778647,

  lng: -122.357550,

  zoom: 13,

  style: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png'

}

​

// Create an instance of Leaflet

const mappa = new Mappa('Leaflet');

let bayAreaMap;

​

let canvas;

​

let data = [];

​

function preload() {

  overallStationActivityData = loadTable('overall.csv', 'csv', 'header');

}

​

function setup() {

  canvas = createCanvas(1500, 700);

​

  // Create a tile map and overlay the canvas on top.

  bayAreaMap = mappa.tileMap(options);

  bayAreaMap.overlay(canvas);

​

  let maxActivity = 0;

  let minActivity = Infinity;

​

  for (let row of overallStationActivityData.rows) {

    row = row.obj;

​

    const lat = row.station_lat;

    const lng = row.station_lng;

    const total = Number(row.total);

    data.push({

      lat,

      lng,

      total

    });

​

    if (total > maxActivity) maxActivity = total;

    if (total < minActivity) minActivity = total;

​

  }

  const minDiameter = sqrt(minActivity);

  const maxDiameter = sqrt(maxActivity);

  for (let station of data) {

    station.diameter = map(

      sqrt(station.total),

      minDiameter, maxDiameter,

      1, 50

    );

  }

​

}

​

function draw() {

​

  clear();

​

  for (let station of data) {

    const pixelCoords = bayAreaMap.latLngToPixel(station.lat, station.lng);

    fill(255, 0, 200, 100);

    const size = station.diameter + bayAreaMap.zoom() / 2;

    ellipse(pixelCoords.x, pixelCoords.y, size);

  }

​

​

}