forked from EbrahimKaram/Lebanon-Districts-D3-Map
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
193 lines (149 loc) · 8.47 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
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
<!DOCTYPE html>
<html>
<head>
<title>Lebanon D3.js Map</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="D3.js map of Lebanon and its districts.">
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-120812209-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'UA-120812209-1');
</script>
</head>
<body>
<!-- Tooltip box. It appears when user hovers over the map. -->
<div id="tooltip" class="hidden">
<div><strong>Governorate:</strong> <span id="governorate">100</span></div>
<div class="districtEntry hidden"><strong>District:</strong> <span id="district"></span></div>
<div class="villageEntry hidden"><strong>Village:</strong> <span id="village"></span></div>
<div><strong>محافظة:</strong> <span id="governorate-arabic">100</span></div>
<div class="districtEntry hidden"><strong>قضاء:</strong> <span id="district-arabic"></span></div>
<div class="villageEntry hidden"><strong>ضيعة:</strong> <span id="village-arabic"></span>
</div>
</div>
<header align='center' class="header">
<div>
<h1>Lebanese Areas in D3 Maps</h1>
</div>
<div>View Source Code on <a href="https://github.com/EbrahimKaram/Lebanon-Districts-D3-Map">Github</a></div>
<div>
<a class="github-button" href="https://github.com/EbrahimKaram" data-size="large" data-show-count="true" aria-label="Follow @EbrahimKaram on GitHub">Follow @EbrahimKaram</a>
</div>
<div>
<!-- Place this tag where you want the button to render. -->
<a class="github-button" href="https://github.com/EbrahimKaram/Lebanon-Districts-D3-Map/fork" data-size="large" aria-label="Fork EbrahimKaram/Lebanon-Districts-D3-Map on GitHub">Fork</a>
</div>
</header>
<!-- ADD D3.JS VISUALIZATION IN #VIZ.-->
<div class='container-fluid'>
<div class='row well well-lg'>
<div id="mohafaza" class='col-md-8 text-center' style="border:3px solid gray;background-color: #f8f3ed;padding-right: 0px;padding-left: 0px;"></div>
<div class='col-md-4'>
<h1>Lebanon</h1>
<h3>Mohafaza - محافظة</h3>
<p>Lebanon has 8 main Mohafazas or governorates. Please point on the map to see them.</p>
<!-- INFO BOX. ITS CONTENT CHANGES AS USER HOVERS OVER DIFFERENT DISTRICTS ON MAP. -->
<div>
<strong>Governorate:</strong> <span id="Mohafaza-name"></span>
</div>
<div align='right'>
<strong>محافظة</strong>: <span id="Mohafaza-name-arabic"></span>
</div>
<br>
<br>
<br>
<br>
</div>
</div>
<div class='row well well-lg'>
<div id="districts" class='col-md-8 text-center' style="border:3px solid gray;background-color: #f8f3ed;padding-right: 0px;padding-left: 0px;"></div>
<div class='col-md-4'>
<h1>Lebanon</h1>
<h3>Qada2 - قضاء</h3>
<p> Each Mohafaza is divided into several districts/Qada2. Now Lebanon currently has 26 districts but according to the shapefile that this map is based on some districts belong to multiple govornmates. If anyone has any suggestions, please let me know on twitter @BahoKaram. If it would be possible, please submit it as an issue on the repository with your possible fix.
</p>
<!-- INFO BOX. ITS CONTENT CHANGES AS USER HOVERS OVER DIFFERENT DISTRICTS ON MAP. -->
<div>
<strong>Governorate:</strong> <span id="governorate-name"></span>
</div>
<div>
<strong>District:</strong> <span id="district-name"></span>
</div>
<div align='right'>
<strong>محافظة</strong>: <span id="governorate-name-arabic"></span>
</div>
<div align='right'>
<strong>قضاء:</strong> <span id="district-name-arabic"></span>
</div>
<br>
<br>
<br>
<br>
</div>
</div>
<div class='row well well-lg'>
<div id="villages" class='col-md-8 text-center' style="border:3px solid gray;background-color: #f8f3ed;padding-right: 0px;padding-left: 0px;"></div>
<div class='col-md-4'>
<h1>Lebanon</h1>
<h3>Villages/Muncipalities</h3>
<br>
<form autocomplete="off">
<div class="autocomplete" style="width:inherit;">
<input id="myInput" type="text" name="myCountry" placeholder="Village">
</div>
<button type="button" onclick="highlight()"><i class="fa fa-search"></i></button>
</form>
<br>
<br>
<p>The map shows all the various villages in Lebanon. I would like to point out specifically that the map shoes the various municipalities for Lebanon not the voting districts.</p>
<p>To Illustrate, Baskinta has one Municipality but has 2 voting districts which are north and south Baskinta. As a result, you only see one baskinta.</p>
<p>Another example is Beirut Central District, Beirut Central distric is not a proper district. It's mostly the beirut port and a military base so it does't show up in the civilian votiing list however it is it's own district/village or part of the city. </p>
<p>Please share your input on what is probably wrong with this data and how is the best way to fix it by Tweeting @BahoKaram or submitting an issue to the <a href="https://github.com/EbrahimKaram/Lebanon-Districts-D3-Map">Github repository</a> </p>
<p> Please note that araboc translation for all villages is a work in progress. If you would like to provide aid, please look into the <a href="https://github.com/EbrahimKaram/Lebanese-Villages-List">Lebanese-Villages-List Repository</a></p>
<!-- INFO BOX. ITS CONTENT CHANGES AS USER HOVERS OVER DIFFERENT DISTRICTS ON MAP. -->
<div>
<strong>Governorate:</strong> <span id="governorate-name-1"></span>
</div>
<div>
<strong>District:</strong> <span id="district-name-1"></span>
</div>
<div>
<strong>Village:</strong> <span id="village-name-1"> </span>
</div>
<div align='right'>
<strong>محافظة</strong>: <span id="governorate-name-1-arabic"></span>
</div>
<div align='right'>
<strong>قضاء:</strong> <span id="district-name-1-arabic"></span>
</div>
<div align='right'>
<strong>ضيعة:</strong> <span id="village-name-1-arabic"> </span>
</div>
<br>
<br>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<link rel="stylesheet" href="tooltip.css">
<link rel="stylesheet" href="autocomplete.css">
<!-- D3.js code creates map of Lebanon. -->
<script src="js/districts.js"></script>
<script src="js/mohafaza.js"></script>
<script src="js/villages.js"></script>
<script src="js/autocomplete.js"></script>
<!-- Place this tag in your head or just before your close body tag. -->
<script async defer src="https://buttons.github.io/buttons.js"></script>
</body>
</html>