-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
161 lines (126 loc) · 6.12 KB
/
index.html
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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/font-awesome-4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="css/jquery-ui-1.10.3.custom.min.css" />
<link href="css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<link rel="stylesheet" href="css/leaflet-search.css">
<link rel="stylesheet" href="css/Control.Opacity.css" />
<title>Maharashtra Village Mapping</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/map.css">
<link rel="stylesheet" href="css/style.css">
<script>
function init() {
var viz = new VillageMapViz();
viz.setup();
}
</script>
</head>
<body onload="init()">
<div class="overlay">
<div id="loading-img">
<i class="fa fa-circle-o-notch fa-spin fa-3x" aria-hidden="true"></i>
</div>
</div>
<div class="header_div">
<span class="header"> Mapping village census data (by district) for Maharashtra</span>
<span id="help" class="help">Help</span>
</div>
<div class="viz-container">
<div class="box_wrapper">
<!-- Radio buttons to choose Census/Custom-->
<label> Select data source:</label><br>
<input type="radio" name="data-input" value="census" checked> Census
<input type="radio" name="data-input" class="right-input" value="custom"> Upload CSV <span style="font-size: 11px; color:gray">(< 3MB)</span><br>
<!-- if custom, unhide below -->
<!--<label for="uploadFile"> Upload your own data (in CSV format)</label><br>-->
<div id="custom-div" class="custom-div">
<input id="uploadFile" placeholder="Upload csv file" disabled="disabled" />
<div class="fileUpload btn btn-primary">
<span>Browse</span>
<input id="file_input" type="file" class="upload" />
</div>
<div id="file_col_list" >
<label for="col-list"> Select Village Code column:</label><br>
<select id="col-list">
</select>
</div>
</div>
<!-- end unhide -->
<div id="area_list" >
<label for="district-list"> Select district:</label><br>
<select id="district-list">
</select>
</div>
<div class="list_span">
<label id="selecr_attr_label">Select attribute: </label>
<br>
<div id="box_container" class="box_container">
<select id="box" class="box"></select>
</div>
</div>
<!--<button type="button" class="uploadBtn btn btn-primary" data-toggle="modal" data-target="#myModal">Upload external data</button>-->
<div class="download_links">
<button style="margin-bottom: 5px;" class="btn btn-primary" id="snapshot">Save as Image</button><br>
<a class="btn btn-primary" id="download_csv" href="data/csvdata/census_split_by_district/522_Ahmadnagar.csv" target="_blank">Download CSV</a>
<a class="btn btn-primary" id="download_geojson" href="geometry/522_Ahmadnagar.geojson" target="_blank">Download boundaries</a>
</div>
</div>
<div id="map_container" class="map_container"></div>
</div>
<div class="license">
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
<img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/80x15.png" />
</a>
<br />
This work is licensed under a
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">
Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License
</a>.
</div>
<div id="img_out"></div>
<canvas style="display:none" width="1000" height="600"></canvas>
<!-- JQUERY LIBRARIES -->
<script src="js/lib/jquery.min.js" crossorigin="anonymous"></script>
<script src="js/lib/jquery-ui-1.10.3.custom.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- LEAFLET -->
<script src="js/lib/leaflet-src.js"></script>
<script src="js/lib/leaflet-search.min.js"></script>
<script src="js/lib/leaflet-omnivore.min.js"></script>
<!-- D3 -->
<script src='js/lib/d3.min.js' backup='https://s3-us-west-2.amazonaws.com/s.cdpn.io/22878/d3.min.js'></script>
<!-- SELECT2 -->
<script src="js/lib/underscore.js"></script>
<script src="js/lib/maximize-select2-height.min.js"></script>
<script src="js/lib/select2.min.js"></script>
<!-- CSV PARSING -->
<script src="js/lib/papaparse.min.js"></script>
<!-- LEAFLET LAYER OPACITY -->
<script src="js/lib/opacity/Control.Opacity.js"></script>
<!-- SAVE AS IMAGE -->
<script src="js/lib/html2canvas.js"></script>
<script src="js/lib/canvas2image.js"></script>
<script src="js/lib/opacity/Control.Opacity.js"></script>
<!-- SAVE AS IMAGE -->
<script src="js/lib/xlsToCSV/jszip.js"></script>
<script src="js/lib/xlsToCSV/xlsx.js"></script>
<!-- APPLICATION SPECIFIC JS -->
<script src="data/metadata/config.js"></script>
<script src="js/excelToCSV.js"></script>
<script src="js/DistrictMap_Leaflet.js"></script>
<script src="js/VillageMapViz.js"></script>
<script src="js/VillageMapViz.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-71858173-6', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>