-
Notifications
You must be signed in to change notification settings - Fork 0
/
index1.html
186 lines (157 loc) · 7.45 KB
/
index1.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
<html>
<!-- mapping violence -->
<head>
<!-- css -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="https://npmcdn.com/[email protected]/dist/leaflet.css" />
<!-- fonts -->
<link href="https://fonts.googleapis.com/css?family=Crimson+Text|Fjalla+One" rel="stylesheet">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="js/jquery.animate-colors.js"></script>
<!-- js -->
<script src="https://npmcdn.com/[email protected]/dist/leaflet.js"></script>
</head>
<body>
<div id="coverPage" class="container-fluid">
<div id="blackOverlay" class="col-md-12 col-sm-12"> </div>
<div id="infoPanel" class="col-md-8 col-sm-10">
<h1 class="title"> MAPPING VIOLENCE </h1>
<div class="buttons">
<button type="button" class="btn btn-primary">intro</button>
<button type="button" class="btn btn-primary">how to use this map</button>
<button type="button" class="btn btn-primary">about</button>
</div>
<div id="introduction" class="infoScroll">
<p> Some of the worst racial violence in United States history took place along the Mexico-Texas border from 1910 to 1920. </p>
<p>The dead included women and men, the aged and the young, long-time residents and recent arrivals. They were killed by strangers, sometimes by neighbors, some by vigilantes and other times at the hands of local law enforcement officers or Texas Rangers. Some were summarily executed after being taken captive, or shot under the flimsy pretext of trying to escape. Some were left in the open to rot, others desecrated by being burnt, being decapitated, or revealing evidence of other forms of torture and violation such as having beer bottles rammed into their mouths. Extralegal executions became so common that a San Antonio reporter observed that “finding of dead bodies of Mexicans, suspected for various reasons of being connected with the troubles, has reached a point where it creates little or no interest. It is only when a raid is reported or an American is killed that the ire of the people is aroused.” </p>
<p> Terror spread far beyond the ranks of those killed. “One or more of us may have incurred the displeasure of some one, and it seems only necessary for that some one to whisper our names to an officer, to have us imprisoned and killed without an opportunity to prove in a fair trial, the falsity of the charges against us,” pleaded residents of Kingsville in a telegram to President Woodrow Wilson in 1916. “[S]ome of us who sign this petition, may be killed without even knowing the name of him who accuses. Our privileged denunciators may continue their infamous proceedings — answerable to no one.” </p>
<p> Far from being surreptitious, the violence was welcomed, celebrated, and even instigated at the highest levels of society and government. As decapitated bodies floated down the Rio Grande and thousands fled to Mexico, one Texas paper spoke of “a serious surplus population that needs eliminating.” Prominent politicians proposed putting all those of Mexican descent into “concentration camps” – and killing any who refused. For a decade, people would come across skeletons in the south Texas brush, marked with execution-style bullet holes in the backs of their skulls. </p>
<p> The true toll will never be known, though scholars from the 1930s to the present have given estimates of from several hundred to five thousand killed. </p>
</div>
<div id="howToUseCover" class="infoScroll hidden">
<p> write up a "how to use" section </p>
</div>
<div id="howToUseSmall" class="smallPanel hidden">
<h1> HOW TO USE THIS MAP </hi>
<p> Each dot represents an incidence of violence </p>
<p> Click a dot to learn more about an incident </p>
</div>
<button type="button" id="slideLeft" class="btn btn-link">slide</button>
</div>
<div id="mapid"> </div>
</div>
</body>
<!-- TODO: put in separate doc -->
<style>
body {
font-family: 'Crimson Text', serif;
-webkit-font-smoothing: antialiased;
}
h1 {
font-family: 'Fjalla One', sans-serif;
}
#mapid {
height: 100%;
/* position: absolute; */
z-index: 0;
}
#coverPage {
width:100%;
padding-left: 0px;
padding-right: 0px;
position: relative;
z-index: 5;
}
#blackOverlay {
position: absolute;
height: 100%;
z-index: 5;
background-color: #252120;
opacity: 0.7;
}
#infoPanel {
height: 100%;
position: absolute;
z-index: 6;
background-color: #252120;
color: #ffffff;
}
.infoScroll {
width:700px;
height:60%;
overflow:auto;
background-color: #252120;
color:white;
font-family: 'Crimson Text', serif;
font-size: 16pt;
margin-top:20px;
padding-left: 100px;
padding-right: 10px;
}
#slideLeft {
position: absolute;
right: 0px;
vertical-align: middle;
top: 50%;
}
.title {
font-family: 'Fjalla One', sans-serif;
padding-top: 30px;
padding-left: 50px;
font-size: 85pt;
}
.buttons {
padding-left: 100px;
font-family: 'Fjalla One', sans-serif;
}
.smallPanel {
color: #252120;
}
</style>
<!-- TODO: put in separate doc -->
<script>
var mymap = L.map('mapid').setView([27.4779, -99.5496], 8);
L.tileLayer('https://api.mapbox.com/styles/v1/ejiao/cirpbdjyr0024g8nflf48lzs6/tiles/256/{z}/{x}/{y}@2x?access_token=pk.eyJ1IjoiZWppYW8iLCJhIjoiY2lycGJjdWc1MGV6ZGZhbThkOXNwNWNqbSJ9.JmvgWwuCzvSBa5ieYUXWtw', {
attribution: "Map data © © <a href='https://www.mapbox.com/about/maps/'>Mapbox</a> © <a href='http://www.openstreetmap.org/copyright'>OpenStreetMap</a>'",
maxZoom: 18,
id: 'ejiao.139c2pig',
accessToken: 'pk.eyJ1IjoiZWppYW8iLCJhIjoiY2lycGJjdWc1MGV6ZGZhbThkOXNwNWNqbSJ9.JmvgWwuCzvSBa5ieYUXWtw'
}).addTo(mymap);
/* defining our red dot map marker */
var redDot = L.icon({
iconUrl: 'red_circle.png',
shadowUrl: '',
iconSize: [10, 10], // size of the icon
shadowSize: [0, 0], // size of the shadow
iconAnchor: [5, 5], // point of the icon which will correspond to marker's location
shadowAnchor: [0, 0], // the same for the shadow
popupAnchor: [5, 5] // point from which the popup should open relative to the iconAnchor
});
function loadMarkers() {
var marker1 = L.marker([27.4779, -99.496], {icon: redDot}).addTo(mymap);
var marker2 = L.marker([27.2, -98.5496], {icon: redDot}).addTo(mymap);
var marker3 = L.marker([27.429, -98.246], {icon: redDot}).addTo(mymap);
var marker4 = L.marker([27.23, -99.496], {icon: redDot}).addTo(mymap);
L.marker([27.23, -99.56], {icon: redDot}).addTo(mymap);
L.marker([27.123, -99.26], {icon: redDot}).addTo(mymap);
L.marker([27.123, -99.26], {icon: redDot}).addTo(mymap);
L.marker([26.9, -99.1], {icon: redDot}).addTo(mymap);
L.marker([25.9017, -97.4975], {icon: redDot}).addTo(mymap);
L.marker([25.9217, -97.675], {icon: redDot}).addTo(mymap);
}
$("#slideLeft").on("click", function() {
$("#infoPanel").animate({
width: '350px',
opacity: '0.75',
backgroundColor: '#eeeeea'
}, "slow");
$(".title").hide();
$(".buttons").hide();
$(".infoScroll").hide();
$("#blackOverlay").fadeOut("slow");
$("#howToUseSmall").toggle(".hidden");
loadMarkers();
});
</script>
</html>