Initial working map code

1 files changed, 190 insertions, 0 deletions

diff --git a/map.js b/map.js
new file mode 100644
index 0000000..c295c0a
--- /dev/null
+++ b/map.js
@@ -0,0 +1,190 @@
+var m = mapbox.map('map');
+var tlv_admin_boundary = {type:"FeatureCollection",features:[{type:"Feature",id:"01",properties:{name:"Tel Aviv"},geometry:{type:"Polygon",coordinates:[[[34.7691274,32.0873062],[34.7685414,32.0871889],[34.7681123,32.0854982],[34.768123,32.0847437],[34.7678159,32.084128],[34.7675359,32.0837434],[34.7670797,32.0835479],[34.7669448,32.0835704],[34.7671594,32.0832661],[34.767213,32.0826748],[34.7671333,32.0822846],[34.7667672,32.0818569],[34.7665695,32.0817837],[34.7665929,32.0814092],[34.7665113,32.0808544],[34.7663493,32.080234],[34.7658837,32.0794938],[34.765796,32.0788772],[34.7657912,32.0784261],[34.7655782,32.0778852],[34.7648526,32.0774816],[34.7648163,32.0773912],[34.7649936,32.0773282],[34.7650583,32.0772055],[34.7651291,32.0768285],[34.7651235,32.0762923],[34.764914,32.0758935],[34.764451,32.0753146],[34.7640487,32.0751144],[34.7639752,32.0747239],[34.7640286,32.0741105],[34.7636214,32.0733509],[34.7632743,32.07312],[34.763484,32.0727612],[34.7632298,32.0718331],[34.7628688,32.0709014],[34.7629399,32.0698739],[34.7625963,32.0692549],[34.7617968,32.0685764],[34.761402,32.0683073],[34.7604871,32.0651778],[34.7603777,32.0646025],[34.7600222,32.064254],[34.7594504,32.0630525],[34.7598258,32.0621021],[34.757297,32.0580541],[34.7562131,32.0568718],[34.7544213,32.0556597],[34.7538661,32.0557984],[34.7531767,32.0557793],[34.751621,32.0553136],[34.7511368,32.0550721],[34.7509071,32.0548181],[34.7508221,32.0547942],[34.7506955,32.0546828],[34.7507456,32.0545587],[34.7503407,32.0541159],[34.7497244,32.0533758],[34.7496761,32.0533178],[34.749557,32.0518844],[34.7495511,32.0518129],[34.7494379,32.051653],[34.7491322,32.0516523],[34.7490613,32.0516467],[34.7485313,32.0516467],[34.7485237,32.0514802],[34.7484793,32.0514857],[34.7484761,32.0513051],[34.7484458,32.051305],[34.7484455,32.0516467],[34.7483653,32.0516466],[34.7483771,32.0520315],[34.748412,32.0522532],[34.7497023,32.0546049],[34.7501943,32.0557163],[34.7500663,32.0557927],[34.7483522,32.052827],[34.7480856,32.0519416],[34.7481231,32.0514798],[34.7482191,32.0513821],[34.7483004,32.0505402],[34.7469091,32.0483528],[34.7456206,32.0480247],[34.7448929,32.0469296],[34.7450804,32.0463166],[34.7440451,32.0448357],[34.7451657,32.0441691],[34.7449446,32.0424821],[34.7441721,32.0422638],[34.7443409,32.0417153],[34.7443008,32.0413543],[34.7434716,32.0411052],[34.7437103,32.0409783],[34.7439887,32.0411207],[34.7450933,32.0407601],[34.7449543,32.0401735],[34.7446067,32.0393586],[34.7449619,32.039073],[34.7451088,32.0385369],[34.7450729,32.0379234],[34.7446454,32.0374069],[34.7442747,32.0371208],[34.7436352,32.0374132],[34.7436556,32.0370981],[34.7434738,32.0369748],[34.7438471,32.0368939],[34.744139,32.0368589],[34.7442849,32.0364569],[34.7439887,32.0358407],[34.743256,32.0349739],[34.7427748,32.0343755],[34.7426664,32.0337798],[34.7422646,32.0330517],[34.7440453,32.0326232],[34.744319,32.032675],[34.7449828,32.0323722],[34.7459339,32.031852],[34.74658,32.0314454],[34.7472446,32.031086],[34.7478521,32.0307362],[34.7487902,32.0301892],[34.7496696,32.0296867],[34.7501219,32.0294328],[34.7509159,32.0304457],[34.75115,32.0304185],[34.7521932,32.0303448],[34.7529774,32.0302322],[34.7531123,32.0312629],[34.7546943,32.0310543],[34.755131,32.0337912],[34.7554489,32.0337494],[34.7574166,32.0334903],[34.7587899,32.033335],[34.7593238,32.0333571],[34.7597022,32.0333739],[34.7596254,32.0344254],[34.7597985,32.0355715],[34.7600472,32.0363361],[34.7617911,32.0363835],[34.7633171,32.0364024],[34.7656771,32.0360138],[34.7695535,32.0349523],[34.7701696,32.0347628],[34.7751929,32.0328861],[34.7773339,32.0362413],[34.7781026,32.0365446],[34.7787471,32.0375872],[34.781543,32.0401462],[34.7861682,32.04643],[34.7890211,32.0462784],[34.7897414,32.04407],[34.7906134,32.0420607],[34.7914664,32.0415774],[34.7920161,32.0416627],[34.7940444,32.0407623],[34.7959494,32.0400609],[34.7970894,32.039657],[34.7985646,32.0390638],[34.7994218,32.038629],[34.7999187,32.0380886],[34.8005057,32.0374737],[34.8033536,32.0358152],[34.8069158,32.0343183],[34.8090215,32.033663],[34.8097979,32.0337934],[34.8105278,32.0343494],[34.813661,32.0437227],[34.813643,32.0446821],[34.8141886,32.0486044],[34.8141275,32.0500585],[34.8134891,32.0516275],[34.8128824,32.052598],[34.8109591,32.0547564],[34.8126127,32.0585062],[34.8105509,32.0589207],[34.8108603,32.0596372],[34.809618,32.0598973],[34.8078167,32.0605534],[34.8057941,32.0619276],[34.8054292,32.062378],[34.8050293,32.0628477],[34.8041131,32.0648509],[34.8039112,32.0660116],[34.8030672,32.0659971],[34.8029195,32.0675161],[34.8027705,32.069288],[34.8027664,32.0697317],[34.8027813,32.070537],[34.8025006,32.0707235],[34.8022589,32.0709366],[34.801854,32.0715542],[34.8009199,32.0729372],[34.8012069,32.0738118],[34.8012964,32.073937],[34.801434,32.07469],[34.8019354,32.0757911],[34.8021768,32.0762939],[34.8022621,32.0766116],[34.802224,32.0772039],[34.8020052,32.0777052],[34.79883,32.0794043],[34.7976128,32.0802584],[34.7982501,32.0809297],[34.7983712,32.0809347],[34.7988359,32.0809538],[34.7997403,32.081347],[34.7995572,32.0820683],[34.798867,32.0847586],[34.7997709,32.0868093],[34.8006292,32.0897721],[34.8018035,32.0945945],[34.8023571,32.0933956],[34.803463,32.0912673],[34.8036022,32.0910278],[34.8046445,32.0907397],[34.8059092,32.0910724],[34.8068882,32.0911319],[34.8068573,32.0898005],[34.8080112,32.0903959],[34.8093523,32.091036],[34.8092657,32.0916318],[34.8090025,32.0924587],[34.8089849,32.0925144],[34.8087933,32.0932591],[34.8087278,32.0936128],[34.8088148,32.0942398],[34.8095519,32.0948776],[34.8103952,32.095438],[34.8104074,32.0963701],[34.811287,32.096264],[34.8123409,32.0957939],[34.8128839,32.0958364],[34.8135622,32.0959607],[34.8144815,32.0966663],[34.8155027,32.0976402],[34.8157138,32.0980253],[34.81716,32.0978774],[34.8179972,32.0977918],[34.8182208,32.097757],[34.8186605,32.0970663],[34.8185139,32.0962911],[34.8194655,32.0958812],[34.8203823,32.0965296],[34.8214606,32.0979682],[34.8224813,32.0989889],[34.8226334,32.0991682],[34.8221687,32.1000652],[34.8219277,32.1005795],[34.8211675,32.1009273],[34.8211824,32.1011236],[34.8219899,32.1016553],[34.8229119,32.1017989],[34.8233141,32.1018615],[34.8235899,32.1019211],[34.8245758,32.1024676],[34.8248035,32.1029447],[34.8236799,32.1032322],[34.8232773,32.1032979],[34.8230655,32.103432],[34.8230095,32.1036466],[34.8231901,32.103799],[34.8245856,32.104658],[34.8254897,32.104948],[34.8258301,32.1055865],[34.826722,32.1062474],[34.8269481,32.1062424],[34.8267694,32.1059881],[34.8268124,32.1053611],[34.8271503,32.1053338],[34.8275733,32.1054364],[34.828197,32.1055718],[34.828915,32.1058625],[34.8315711,32.1057752],[34.832868,32.1055842],[34.8350619,32.1054053],[34.8361352,32.10517],[34.8379995,32.1060859],[34.8396926,32.1066157],[34.8413189,32.1067418],[34.8414596,32.1067569],[34.8422423,32.1080712],[34.8436684,32.1083098],[34.8447318,32.1078153],[34.8453368,32.1074435],[34.8457638,32.1072114],[34.8461704,32.1069205],[34.8465903,32.1066526],[34.8477083,32.106573],[34.8489357,32.1070128],[34.8487665,32.1076057],[34.8494106,32.1101208],[34.8502709,32.113733],[34.8503039,32.1138716],[34.8505212,32.1147841],[34.8506987,32.1155292],[34.8511153,32.1172785],[34.8506845,32.1177406],[34.8494703,32.1189365],[34.8481013,32.1202849],[34.8459781,32.1223761],[34.8446832,32.1236515],[34.8413846,32.123972],[34.8402565,32.1242019],[34.8401255,32.1256372],[34.8391556,32.1256976],[34.8389746,32.1261879],[34.8384175,32.1266004],[34.8382628,32.1270454],[34.8378457,32.1272489],[34.8328762,32.1291819],[34.8328776,32.1299784],[34.8319074,32.130033],[34.8305878,32.1301202],[34.8277719,32.1304548],[34.8282118,32.1313792],[34.8250192,32.1315411],[34.823871,32.1316782],[34.8230046,32.1317603],[34.8202615,32.1320203],[34.8190394,32.1319306],[34.8188919,32.1313594],[34.8189348,32.1307961],[34.8213381,32.1262895],[34.8128566,32.1261845],[34.8127166,32.1251995],[34.8108911,32.1253915],[34.8095775,32.1269851],[34.8048238,32.1276675],[34.8046336,32.1277617],[34.8003737,32.1285347],[34.8005241,32.1298512],[34.7987871,32.1300147],[34.7980576,32.1289063],[34.796062,32.1288517],[34.7969632,32.1335035],[34.7981005,32.1358838],[34.7987657,32.1380461],[34.8005241,32.1405525],[34.8007816,32.1407706],[34.8019233,32.1415883],[34.8025499,32.1439736],[34.7915808,32.1460661],[34.7902763,32.1420948],[34.7885579,32.1372926],[34.7830319,32.1222048],[34.7824499,32.1217661],[34.7818867,32.1207439],[34.781994,32.1200896],[34.7803068,32.1158622],[34.7791695,32.1120092],[34.7771511,32.109069],[34.7767817,32.1090609],[34.7764805,32.1090088],[34.7749709,32.1084145],[34.7748215,32.1084304],[34.774607,32.1084831],[34.774433,32.1083951],[34.7743907,32.1081675],[34.7746044,32.1080307],[34.7757446,32.1084497],[34.7766373,32.1074898],[34.7764321,32.1073244],[34.7763304,32.1072085],[34.7759131,32.1072214],[34.7749791,32.1070222],[34.7750331,32.1069409],[34.7759061,32.1070863],[34.7763342,32.1069929],[34.7764163,32.1067493],[34.7763479,32.1064222],[34.7766038,32.1063047],[34.7770438,32.1063727],[34.7775567,32.1066684],[34.7776316,32.1064824],[34.777489,32.1062918],[34.7773686,32.105978],[34.7773538,32.1057999],[34.7773932,32.1057431],[34.7773436,32.1055041],[34.7771776,32.1053437],[34.777128,32.1050969],[34.7771832,32.105066],[34.7770801,32.1048874],[34.7767701,32.1051287],[34.7767438,32.1055792],[34.7765771,32.1057972],[34.7763259,32.1059051],[34.7758147,32.1059187],[34.7757272,32.1057876],[34.7760405,32.1056558],[34.7759163,32.1053918],[34.775547,32.1053196],[34.7749963,32.1058989],[34.775017,32.1060502],[34.7750246,32.1061336],[34.774919,32.1061775],[34.7747976,32.1061234],[34.7736521,32.1075221],[34.7736711,32.107685],[34.7735947,32.1077906],[34.7733957,32.1078086],[34.773288,32.1082636],[34.7734253,32.1086603],[34.7736643,32.108994],[34.7735844,32.1092033],[34.773295,32.1091487],[34.7729944,32.1085373],[34.7730085,32.107891],[34.7732529,32.1075114],[34.7760314,32.1045437],[34.775966,32.1034009],[34.7759201,32.1025989],[34.7729833,32.098856],[34.7738738,32.0986743],[34.7733481,32.096811],[34.7724434,32.0968076],[34.771845,32.0951191],[34.7719016,32.0950811],[34.7716679,32.0946917],[34.7711658,32.0944324],[34.7703175,32.0941915],[34.7695005,32.094264],[34.7693116,32.0936791],[34.7698178,32.0934664],[34.7702622,32.0932072],[34.7705192,32.0928168],[34.7706846,32.0923993],[34.7706039,32.0918788],[34.770149,32.0911439],[34.7700729,32.091112],[34.7693036,32.0907896],[34.7680931,32.0906885],[34.7680271,32.0904197],[34.7687717,32.0903411],[34.7690512,32.0902154],[34.769306,32.0900024],[34.7695085,32.0896932],[34.7695828,32.0890342],[34.7696209,32.0881607]]]}}]};
+
+function stationVoronoi() {
+    var v = {}, stationData, stations, stationCoords, voronoi, city,
+        stationAnimation;
+    var svg = d3.select(document.body).append("svg").attr("id", "d3svg");
+
+    // var cityGroup = svg.append("g").attr("id", "cityGroup");
+    var voronoiGroup = svg.append("g").attr("id", "voronoiGroup");
+    var stationsGroup = svg.append("g").attr("id", "stationsGroup");
+
+    var fadeInTime = 500;
+
+    var color = function(station) {
+        var bikes = station.poles - station.available;
+        if (bikes === 0) {
+            return 0;
+        } else if (bikes <=5) {
+            return 1;
+        } else if (station.available <= 5) {
+            return 3;
+        } else if (station.available === 0) {
+            return 4;
+        } else {
+            return 2;  // middle state is normal.
+        }
+    };
+
+    var stationDotSize = d3.scale.quantize()
+        .domain([minZoom, maxZoom])
+        .range([2, 3, 4]);
+
+    v.parent = svg.node();
+
+    // Project a lat/lon location onto the displayed map (point)
+    v.project = function(location) {
+        var point = v.map.locationPoint({lat: location[1], lon: location[0]});
+        return [point.x, point.y];
+    };
+
+    // redraw the layer
+    // called every time something changes
+    v.draw = function() {
+        console.log("Draw called!");
+
+        // position the overlay
+        svg.attr("width", $("#map").width())
+           .attr("height", $("#map").height());
+
+        var delays = [];
+
+
+/*
+        // render the city outline
+        // =============================================================
+        city = cityGroup.selectAll("path")
+            .data(tlv_admin_boundary.features);
+
+        city.enter().append("path")
+            .attr("opacity", 0)
+          .transition().duration(300)
+            .attr("opacity", 1);
+        city.attr("d", d3.geo.path().projection(v.project));
+*/
+
+
+        // render the station voronoi
+        // =============================================================
+        // generate the clipped paths
+        // projectedPolygons = d3.geom.voronoi(_.map(stationCoords, v.project));
+        // projectedTelaviv = d3.geom.polygon(_.map(tlv_admin_boundary.features[0].geometry.coordinates[0], v.project));
+        // clippedPolygons = projectedPolygons.map(function(polygon) {
+        //     return d3.geom.polygon(polygon).clip(d3.geom.polygon(projectedTelaviv.slice(0)));
+        //     console.log("Clipped: " + clipped);
+        //     return clipped;
+        // });
+        projectedPolygons = d3.geom.voronoi(stationCoords);
+        projectedTelaviv = d3.geom.polygon(tlv_admin_boundary.features[0].geometry.coordinates[0]);
+        clippedPolygons = projectedPolygons.map(function(polygon) {
+            clipped = d3.geom.polygon(polygon).clip(d3.geom.polygon(projectedTelaviv.slice(0)));
+            // console.log("Clipped: " + clipped);
+            return clipped;
+        });
+
+
+        voronoi = voronoiGroup.selectAll("path")
+            .data(clippedPolygons);
+
+        // fade in when added
+        voronoi.enter().append("path")
+            .attr('id', function(d, i) { return 'station' + stationData[i].id; })
+            .attr("class", function(d, i) {
+                return "station_cell q" + color(stationData[i]) + "-5";
+            })
+            .attr("opacity", 0)
+          .transition().delay(function(d, i) {
+                wait = stationAnimation(stationData[i].latitude);
+                // wait = stationAnimation(Math.random());
+                delays[i] = wait;
+                return 600 + (fadeInTime-wait);
+            }).duration(200)
+            .attr("opacity", 0.5);
+
+        // position them
+        voronoi
+            .attr("d", function(d, i) {
+                projected = _.map(d, v.project);
+                return "M" + projected.join("L") + "Z";
+            });
+
+
+
+        // render the station dots
+        // =============================================================
+        stations = stationsGroup.selectAll("circle")
+            .data(stationCoords);
+
+        // Grow in when added
+        stations.enter().append("circle")
+            .attr("opacity", 0.0)
+            .attr("r", 0)
+          .transition().delay(150).duration(450)
+            .attr("opacity", 0.15)
+            .attr("r", 8 * stationDotSize(v.map.zoom()))
+          .transition().delay(function(d, i) {
+                return 600 + (fadeInTime - delays[i]);
+            }).duration(200)
+            .attr("r", stationDotSize(v.map.zoom()))
+            .attr("opacity", 1);
+
+        // Postion them
+        stations
+            // .attr("r", stationDotSize(v.map.zoom()))
+            .attr("transform", function(d) { return "translate(" + v.project(d) + ")"; });
+    };
+
+    // supply the data
+    // called once on load
+    v.data = function(data) {
+        console.log("data called!");
+        stationData = data;
+        stationCoords = _.map(stationData, function(s) {
+            return [s.longitude, s.latitude];
+        });
+
+        stationAnimation = d3.scale.linear()
+            .domain(d3.extent(stationCoords, function(coord) { return coord[1]; }))
+            // .domain([0,1])
+            .range([0, fadeInTime]);
+
+        return v;
+    };
+
+    return v;
+}
+
+
+var telostats_tiles = {
+    "tilejson": "2.0.0",
+    "tiles": [TILESERVER_URL]
+};
+var minZoom = 13;
+var maxZoom = 17;
+m.addLayer(mapbox.layer().tilejson(telostats_tiles));
+m.ui.zoomer.add();
+var mapbounds = new MM.Extent(
+    32.0182,34.7257,
+    32.1572,34.8665);
+m.setExtent(mapbounds);
+m.setPanLimits(mapbounds);
+m.setZoomRange(minZoom, maxZoom);
+d3.json('ballots.json', function(ballots) {
+    ballots = _.map(ballots, function(ballot, key) {
+        var loc = ballot.results[0].geometry.location;
+        return {
+            'id': 'foo',
+            'latitude': loc.lat,
+            'longitude': loc.lng
+        }
+    });
+    console.log(ballots);
+    var stationMap = stationVoronoi().data(ballots);
+    m.addLayer(stationMap);
+    // console.log("added d3 layer!");
+    $('#map').on('click', function(event) {
+        var p = m.pointLocation({x:event.pageX, y:event.pageY});
+        console.log([p.lon, p.lat]);
+    });
+});