Cab Spotting

README.md

Contributors

app.js

var initMap = function() {
     // "import" the namespace
     // please use your own API key, see http://developers.cloudmade.com/ for more details
     var provider = new MM.Layer(new MM.CloudMadeProvider('1a914755a77758e49e19a26e799268b7','999'));
     var map = new MM.Map('map', provider, new MM.Point(690,360))
     map.setCenterZoom(new MM.Location(37.774, -122.422), 11);
     loadYQL("http://cabspotting.org/cabs.xml.php", 'cablist');
}

var loadYQL = function(url, callback) {
     var yqlURL = 'http://query.yahooapis.com/v1/public/yql';
    var yqlArgs = {
      q: 'select * from xml where url="'+url+'"',
      format: 'json',
      callback: callback
    };
    var queries = [];
    for (var prop in yqlArgs) {
        queries.push(prop + '=' + yqlArgs[prop]);
    }
    var script = document.createElement('script');
    script.src = yqlURL + '?' + queries.join('&');
    document.getElementsByTagName('head')[0].appendChild(script);
}

var cablist = function(data) {
    if (data && data.query && data.query.results) {
        var cabs = data.query.results.cabs;
        if (cabs && cabs.cab) {
            for (var i = 0; i < cabs.cab.length; i++) {
                var cabURL = 'http://cabspotting.org/cab.xml.php?cab=' + cabs.cab[i].id;
                loadYQL(cabURL, 'plotcab');
            }
        }
    }
}
 
var plotcab = function(data) {
    //console.log(data);
    if (data && data.query && data.query.results) {
        var cab = data.query.results.cab;
        if (cab && cab.point) {
            // add cab viz
            var points = cab.point;
            if (points.length && points.length > 0) {
                var location = new com.modestmaps.Location(points[0].lat, points[0].lon);
                new com.modestmaps.CabFollower(map, location, points[0].cab)
            }
        }
    }
}

cab-follower.js

// namespacing!
if (!com) {
    var com = { };
    if (!com.modestmaps) {
        com.modestmaps = { };
    }
}

com.modestmaps.CabFollower = function(map, location, content)
{
    this.coord = map.locationCoordinate(location);
    
    this.dimensions = new com.modestmaps.Point(20, 20);
    this.offset = new com.modestmaps.Point(this.dimensions.x/2, -this.dimensions.y/2);

    var follower = this;
    
    var callback = function(m, a) { return follower.draw(m); };
    map.addCallback('panned', callback);
    map.addCallback('zoomed', callback);
    map.addCallback('centered', callback);
    map.addCallback('extentset', callback);
    
    this.div = document.createElement('div');
    this.div.style.position = 'absolute';
    this.div.style.width = this.dimensions.x + 'px';
    this.div.style.height = this.dimensions.y + 'px';
    
    var circle = document.createElement('canvas');
    this.div.appendChild(circle);
    if (typeof G_vmlCanvasManager !== 'undefined') circle = G_vmlCanvasManager.initElement(circle);
    
    circle.style.position = 'absolute';
    circle.style.left = '0px';
    circle.style.top = '0px';
    circle.width = this.dimensions.x;
    circle.height = this.dimensions.y;
    var ctx = circle.getContext("2d");
    ctx.lineWidth = 3;
    ctx.strokeStyle = "rgba(255,255,0,1)";
    ctx.fillStyle = "rgba(0,0,0,1)";
    ctx.beginPath();
    ctx.arc(this.dimensions.x/2, this.dimensions.x/2, -2+this.dimensions.x/2, 0, Math.PI*2, true);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();

    map.parent.appendChild(this.div);
    
    this.draw(map);
}

com.modestmaps.CabFollower.prototype = {

    div: null,
    coord: null,
    
    offset: null,
    dimensions: null,
    margin: null,

    draw: function(map)
    {
        try {
            var point = map.coordinatePoint(this.coord);

        } catch(e) {
            // too soon?
            return;
        }
        
        if(point.x + this.dimensions.x + this.offset.x < 0) {
            // too far left
            this.div.style.display = 'none';
        
        } else if(point.y + this.dimensions.y + this.offset.y < 0) {
            // too far up
            this.div.style.display = 'none';
        
        } else if(point.x + this.offset.x > map.dimensions.x) {
            // too far right
            this.div.style.display = 'none';
        
        } else if(point.y + this.offset.y > map.dimensions.y) {
            // too far down
            this.div.style.display = 'none';

        } else {
            this.div.style.display = 'block';
            this.div.style.left = point.x + this.offset.x + 'px';
            this.div.style.top = point.y + this.offset.y + 'px';
        }
    },
    
};

cloudmade.js

// namespacing!
if (!MM) {
    var MM = { };
}

MM.CloudMadeProvider = function(key, style) {
    this.key = key;
    this.style = style;
    this.tileWidth = 256;
    this.tileHeight = 256;
};

MM.CloudMadeProvider.prototype = {
    key: null,
    style: null,
    getTile: function(coord) {
        coord = this.sourceCoordinate(coord);
        var worldSize = Math.pow(2, coord.zoom);
        var server = new Array('a.', 'b.', 'c.', '')[parseInt(worldSize * coord.row + coord.column, 10) % 4];
        var imgPath = new Array(this.key, this.style, this.tileWidth, coord.zoom, coord.column, coord.row).join('/');
        return 'http://' + server + 'tile.cloudmade.com/' + imgPath + '.png';
    }
};

MM.extend(MM.CloudMadeProvider, MM.MapProvider);

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>Modest Maps JS Demo | Any Zoom</title>
    <link rel='stylesheet' href='style.css'>
  </head>

  <body onload='initMap()'>
    <div id='map' />
    <script src='https://rawgithub.com/stamen/modestmaps-js/master/modestmaps.min.js'></script>
    <script src='cloudmade.js'></script>
    <script src='cab-follower.js'></script>
    <script src='app.js'></script>
  </body>
</html>

style.css

body {
  font: 13px/22px 'Helvetica Neue', Helvetica, sans;
  margin: 0;
  padding: 0;
}
#map {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  }