Skip to content

Instantly share code, notes, and snippets.

@idan

idan/index.html

Forked from tmcw/index.html
Created September 5, 2012 10:32
Show Gist options
  • Save idan/3634745 to your computer and use it in GitHub Desktop.
Save idan/3634745 to your computer and use it in GitHub Desktop.
Download ZIP
MapBox + d3
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src='http://api.tiles.mapbox.com/mapbox.js/v0.6.4/mapbox.js'></script>
<script src='http://d3js.org/d3.v2.js?2.9.3'></script>
<link
href='http://api.tiles.mapbox.com/mapbox.js/v0.6.4/mapbox.css'
rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
.d3-vec { position:absolute; }
path {
fill: #000;
fill-opacity: .2;
stroke: #fff;
stroke-width: 1.5px;
}
path:hover {
fill: brown;
fill-opacity: .7;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
function folly() {
var f = {}, bounds, feature;
var div = d3.select(document.body)
.append("div")
.attr('class', 'd3-vec'),
svg = div.append('svg'),
g = svg.append("g");
f.parent = div.node();
// Use Leaflet to implement a D3 geographic projection.
f.project = function(x) {
var point = f.map.locationPoint({ lat: x[1], lon: x[0] });
return [point.x, point.y];
}
// Reposition the SVG to cover the features.
f.draw = function() {
var bounds = f.map.extent(),
bl = bounds.southWest(),
tr = bounds.northEast();
var bottomLeft = f.project([bl.lon, bl.lat]),
topRight = f.project([tr.lon, tr.lat]);
svg.attr("width", topRight[0] - bottomLeft[0])
.attr("height", bottomLeft[1] - topRight[1])
.style("margin-left", bottomLeft[0] + "px")
.style("margin-top", topRight[1] + "px");
g.attr("transform", "translate(" + -bottomLeft[0] + "," + -topRight[1] + ")");
path = d3.geo.path().projection(f.project);
feature.attr("d", path);
}
f.data = function(collection) {
bounds = d3.geo.bounds(collection);
feature = g.selectAll("path")
.data(collection)
.enter().append("path");
return f;
};
return f;
}
var mapbox_tilejson = 'http://api.tiles.mapbox.com/v3/mapbox.mapbox-light.jsonp';
mapbox.load(mapbox_tilejson, function(o) {
var m = mapbox.map('map');
m.addLayer(o.layer);
m.ui.zoomer.add();
var mapbounds = new MM.Extent(
32.15603702811953,
34.8453784951352,
32.02354637361072,
34.733455277361784);
m.setExtent(mapbounds);
m.setPanLimits(mapbounds);
m.setZoomRange(13,17);
d3.json("tlv.json", function(collection) {
var l = folly().data([collection]);
m.addLayer(l);
});
});
</script>
</body>
</html>
Raw
tlv.json
{"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
]
]]
}}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment