2017.10.19 -- Fly By on Maps

​

following along with...

https://github.com/cvalenzuela/Mappa/tree/master/tutorials/basic

​

*/

​

// Create a variable to hold our map

var myMap;

// Create a variable to hold our canvas

var canvas;

// Create a new Mappa instance using Leaflet.

var mappa;

​

// var options = {

//  lat: 41.043285,

//  lng: -73.896486,

//  zoom: 14,

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

// };

​

// Lets change the map tiles to something with more contrast

var options = {

    lat: 0,

    lng: 0,

    zoom: 4,

    style: "http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png"

}

​

function preload() {

    // Load the data

    meteorites = loadTable('meteorite_landings.csv', 'csv', 'header');

}

​

​

​

​

// p5.js setup

function setup() {

    // Create a canvas 640x640

    canvas = createCanvas(640, 640);

    mappa = new Mappa('Leaflet');

    //call mappa object to create a tilemap at lat,long, zoom level

    myMap = mappa.tileMap(options);

    myMap.overlay(canvas); //create map overlay of a canvas

​

    //callback to drawpoints to redraw points every map move:

    // myMap.onChange(drawPoints);

​

​

​

    // Only redraw the meteorites when the map change and not every frame.

    myMap.onChange(drawMeteorites);

}

​

// p5.js draw

function draw() {}

​

//function to redraw points

function drawPoints() {

    clear();

    var pier = myMap.latLngToPixel(41.043285, -73.896486);

    fill(230, 220, 0, 75);

    ellipse(pier.x, pier.y, 30, 30);

}

​

​

// Draw the meteorites

function drawMeteorites() {

    // Clear the canvas

    clear();

​

    for (var i = 0; i < meteorites.getRowCount(); i++) {

        // Get the lat/lng of each meteorite 

        var latitude = Number(meteorites.getString(i, 'reclat'));

        var longitude = Number(meteorites.getString(i, 'reclong'));

​

        // Only draw them if the position is inside the current map bounds. We use a

        // Leaflet method to check if the lat and lng are contain inside the current

        // map. This way we draw just what we are going to see and not everything. See

        // getBounds() in http://leafletjs.com/reference-1.1.0.html

        if (myMap.map.getBounds().contains({

                lat: latitude,

                lng: longitude

            })) {

            // Transform lat/lng to pixel position

            var pos = myMap.latLngToPixel(latitude, longitude);

            // Get the size of the meteorite and map it. 60000000 is the mass of the largest

            // meteorite (https://en.wikipedia.org/wiki/Hoba_meteorite)

            var size = meteorites.getString(i, 'mass (g)');

            size = map(size, 558, 60000000, 1, 25) + myMap.zoom();

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

        }

    }

}