flowmap.js

/* Zoom coords 
US:               39    -98   5
Central Apps:     38    -78   6
Mountain West:    42    -112  5
Amazon:           -9    -57   5
*/


L.mapbox.accessToken = 'pk.eyJ1IjoiZG1hamthIiwiYSI6IlNuSHVNb0UifQ.zIkArM4rtyvdtMZjZEesBA';

function buildMapHome(){
  var map = L.map('map-home', {
    scrollWheelZoom: true, 
    touchZoom: true, 
    zoomControl: false, 
    center: [19, -78], 
    zoom: 4,
    maxZoom: 7,
    attributionControl: true
  }); // US

  var baseMaps = {
    "Black": L.mapbox.styleLayer('mapbox://styles/dmajka/ciqg2p3uc000id5nml6kpwyep'),
    "Satellite": L.mapbox.styleLayer('mapbox://styles/dmajka/ciqctopmg0012c6kjptz0robd'),
    "Streets": L.mapbox.styleLayer('mapbox://styles/dmajka/ciqjtzcmn002ibfnjrfv57hui')
  };

  new L.Control.Zoom({ position: 'topright' }).addTo(map);
  var hash = L.hash(map);

  // add layers
  L.control.layers(baseMaps).addTo(map);
  baseMaps.Black.addTo(map);

  // manually add attribution
  //map.attributionControl.setPrefix('');
  //map.attributionControl.addAttribution('<a href="http://openstreetmap.org/copyright">Map data: © OpenStreetMap</a> | <a href="http://mapbox.com/map-feedback/" class="mapbox-improve-map">Improve this map</a>');

  // add flow maps
  buildFlowHome(map, 'map-home', amphibsConfig); 
  setTimeout(function(){buildFlowHome(map, 'map-home', mammalsConfig);}, 200);
  setTimeout(function(){buildFlowHome(map, 'map-home', birdsConfig);}, 500);


  function buildFlowHome(map, mapDiv, config){
    $.getJSON(config.spData).done(function(result) {
      var timer = null;
      var canvasOverlay = L.canvasOverlay().drawing(redraw).addTo(map);
      var windy = new Windy({canvas: canvasOverlay.canvas(), data: result}, config);
      var context = canvasOverlay.canvas().getContext('2d');

      function redraw(overlay, params) {
        if( timer ) 
          window.clearTimeout( timer ); 

        timer = setTimeout(function() { //showing wind is delayed
          var bounds = map.getBounds();
          var size = map.getSize();

          windy.start( [[0,0],[size.x, size.y]], size.x, size.y, 
            [[bounds._southWest.lng, bounds._southWest.lat ],[bounds._northEast.lng, bounds._northEast.lat]] );
        },750)
      }

      //clear canvas and stop animation
      function clearWind() {
        //console.log('flushing windy');
        windy.stop();
        context.clearRect(0,0,3000, 3000);
      }   

      map.scrollWheelZoom.disable();
      map.on('dragstart', function() { clearWind() });
      map.on('zoomstart', function() { clearWind() });
      map.on('resize', function() { clearWind() }); 

    })
  }

}


// builds flow for variable map in map div using config
function buildFlow(map, mapDiv, config){
  $.getJSON(config.spData).done(function(result) {
    var timer = null;
    var canvasOverlay = L.canvasOverlay().drawing(redraw).addTo(map);
    var windy = new Windy({canvas: canvasOverlay.canvas(), data: result}, config);
    var context = canvasOverlay.canvas().getContext('2d');

    function redraw(overlay, params) {
      if( timer ) 
        window.clearTimeout( timer ); 

      timer = setTimeout(function() { //showing wind is delayed
        var bounds = map.getBounds();
        var size = map.getSize();

        windy.start( [[0,0],[size.x, size.y]], size.x, size.y, 
          [[bounds._southWest.lng, bounds._southWest.lat ],[bounds._northEast.lng, bounds._northEast.lat]] );
      },750)
    }

    //clear canvas and stop animation
    function clearWind() {
      console.log('flushing windy');
      windy.stop();
      context.clearRect(0,0,3000, 3000);
    }   

    map.scrollWheelZoom.disable();   
    map.on('zoomstart', function() {console.log('zoom start'); clearWind() });
    map.on('mouseup', function() {console.log('move start'); clearWind() });    
    map.on('resize', function() { clearWind() });   

  })
}

 /* INITIALIZE  ------- --------- -------- ------- ------ */
// build map stuff
buildMapHome();

// initialize slider
jQuery(document).ready(function($) {
      $('#content-carousel').unslider({
        arrows: true
      });
    });