activemaps/webcanvas.html at master · fscottfoti/activemaps · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>

    <link rel="stylesheet" href="//leafletjs.com/dist/leaflet.css"/>
    <link rel="stylesheet" href="js/colorbrewer.css"/>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="//leafletjs.com/dist/leaflet.js"></script>
    <script src="js/TileLayer.GeoJSON.js"></script>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="js/colorbrewer.js"></script>

    <style type="text/css">
        html, body, #map {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
<div id="map"></div>

<script type="text/javascript">
    var map = new L.Map('map'),
            cloudmadeUrl = 'http://{s}.tile.cloudmade.com/1a1b06b230af4efdbb989ea99e9841af/997/256/{z}/{x}/{y}.png',
            cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade';

    map.setView(new L.LatLng(37.7792, -122.3391), 12);

    var baseLayer = new L.TileLayer(cloudmadeUrl, { attribution: cloudmadeAttribution});
    map.addLayer(baseLayer);

    var val = function (r){return 1-r["entropy"]};
    var data = null;

    if (document.URL.indexOf('?') == -1) var file = "tract_income_entropy";
    else var file = document.URL.match(/file=([^&]+)/)[1];

    d3.csv("data/" + file + ".csv",
            function (error, rows) {
                var d = {};
                var vals = [];
                rows.forEach(function (r) {
                    d[r.tract_id] = r;
                    vals.push(val(r));
                });
                set_color_scale(false,"Blues",7,vals);
                data = d;

                var defstyle = {
                    "clickable": true,
                    "color": "#00D",
                    "fillColor": "#00D",
                    "weight": 1.0,
                    "opacity": 0.3,
                    "fillOpacity": 0.1
                }

                function style(feature) {
                    if(feature === undefined) {
                        geojsonTileLayer.geojsonLayer.setStyle(style); // weird hack to recolor on 2nd half of a shape crossing a tile boundary
                    }
                    var pctwater = function(feature) {return feature.properties.water/(feature.properties.water+feature.properties.land);}
                    if (feature === undefined || pctwater(feature) > .3 || data === null || !(feature.id in data)) {
                        defstyle["fillOpacity"] = 0.0;
                        return defstyle;
                    }
                    defstyle["fillOpacity"] = val(data[feature.id]);
                    defstyle["fillColor"] = get_color(val(data[feature.id]));

                    return defstyle;
                }

                var tblname = 'bayarea';
                var geojsonURL = 'http://paris.urbansim.org:8763/' + tblname + '/{z}/{x}/{y}.geojson';
                var geojsonTileLayer = new L.TileLayer.GeoJSON(geojsonURL, {
                            clipTiles: true,
                            unique: function (feature) {
                                return feature.id;
                            }
                        }, {
                            style: style,
                            onEachFeature: function (feature, layer) {

                                if (feature.properties) {
                                    var popupString = '<div class="popup">';
                                    for (var k in feature.properties) {
                                        //if(k == "water") continue;
                                        var v = feature.properties[k];
                                        popupString += k + ': ' + v + '<br />';
                                    }
                                    for (var k in data[feature.id]) {
                                        if(k == "tract_id") continue;
                                        popupString += k + ': ' + parseFloat(data[feature.id][k]).toFixed(2) + '<br />';
                                    }
                                    popupString += '</div>';
                                    layer.bindPopup(popupString);
                                }
                                if (!(layer instanceof L.Point)) {
                                    layer.on('mouseover', function () {
                                        geojsonTileLayer.geojsonLayer.setStyle(style);
                                    });
                                }
                            }
                        }
                );
                map.addLayer(geojsonTileLayer);
                add_legend(map);
            });
</script>
</body>
</html>