Skip to content
Browse files

Adds index.html

  • Loading branch information...
1 parent 207f8e5 commit 824b4baaa1d703d539570e0cc28d70b341311a42 @mollietaylor committed
Showing with 3,333 additions and 5 deletions.
  1. +3,226 −0 developments.js
  2. +8 −5 hate-incidents.html
  3. +99 −0 index.html
View
3,226 developments.js
3,226 additions, 0 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
View
13 hate-incidents.html
@@ -1,18 +1,21 @@
<!DOCTYPE html>
<meta charset="utf-8">
<html>
-<head>
+<head profile="http://www.w3.org/2005/10/profile">
<title>Hate Incidents</title>
+ <link rel="icon"
+ type="image/png"
+ href="http://gtg339g.com/favicon.png">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
- <link rel="stylesheet" href="../MarkerCluster.css" />
- <link rel="stylesheet" href="../MarkerCluster.Default.css" />
+ <link rel="stylesheet" href="http://gtg339g.com/files/MarkerCluster.css" />
+ <link rel="stylesheet" href="http://gtg339g.com/files/MarkerCluster.Default.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
<![endif]-->
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
- <script type="text/javascript" src="http://gtg339g.com/skills/js/leaflet/leaflet.ajax.js"></script>
- <script src="../leaflet.markercluster-src.js"></script>
+ <script type="text/javascript" src="http://gtg339g.com/files/leaflet.ajax.js"></script>
+ <script src="http://gtg339g.com/files/leaflet.markercluster-src.js"></script>
<script src="crimes.js"></script>
<style type="text/css">
#map {
View
99 index.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
+<head profile="http://www.w3.org/2005/10/profile">
+ <title>Hate Incidents</title>
+ <link rel="icon"
+ type="image/png"
+ href="http://gtg339g.com/favicon.png">
+ <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
+ <link rel="stylesheet" href="http://gtg339g.com/files/MarkerCluster.css" />
+ <link rel="stylesheet" href="http://gtg339g.com/files/MarkerCluster.Default.css" />
+ <!--[if lte IE 8]>
+ <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
+ <![endif]-->
+ <script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+ <script type="text/javascript" src="http://gtg339g.com/files/leaflet.ajax.js"></script>
+ <script src="http://gtg339g.com/files/leaflet.markercluster-src.js"></script>
+ <script src="crimes.js"></script>
+ <style type="text/css">
+ #map {
+ height: 500px;
+ }
+
+
+ .marker-cluster-small {
+ background-color: rgba(241, 211, 87, 0.6);
+ }
+ .marker-cluster-small div {
+ background-color: rgba(240, 194, 12, 0.6);
+ }
+
+ .marker-cluster-medium {
+ background-color: rgba(253, 156, 115, 0.6);
+ }
+ .marker-cluster-medium div {
+ background-color: rgba(241, 128, 23, 0.6);
+ }
+
+ .marker-cluster-large {
+ background-color: rgba(242, 90, 82, 0.6);
+ }
+ .marker-cluster-large div {
+ background-color: rgba(242, 35, 24, 0.6);
+ }
+ </style>
+</head>
+<body>
+
+<h1>Hate Incidents</h1>
+<div id="map"></div>
+<div id="links">
+ Map icons provided by <a href="http://mapicons.nicolasmollet.com/">Nicolas Mollet and UMapper</a>.<br>
+ Hate crimes data from <a href="http://www.splcenter.org/get-informed/hate-incidents">SPLC</a>.<br>
+ Most city coordinate data from <a href="http://geonames.usgs.gov/domestic/download_data.htm">USGS</a>.<br>
+</div>
+
+<script type="text/javascript">
+
+ var crimeIcon = L.icon({
+ iconUrl: 'crime.png',
+ iconSize: [32, 37],
+ shadowSize: [0, 0],
+ iconAnchor: [16, 37],
+ shadowAnchor: [0, 0],
+ popupAnchor: [0, -37]
+ });
+
+ var map = L.map('map').setView([40, -100], 4);
+
+ L.tileLayer('http://tile.cloudmade.com/d2268fb4d6a84b33b508fa5640063baf/1/256/{z}/{x}/{y}.png', {
+ attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
+ maxZoom: 13
+ }).addTo(map);
+
+ var markers = L.markerClusterGroup({
+ polygonOptions: {opacity: 0.3,
+ weight: 3}
+ });
+
+ function onEachItem(feature, layer) {
+ layer.bindPopup(feature.properties.Date + "<br>" + feature.properties.Type + "<br>" + feature.properties.Description);
+ };
+
+ var incidentLayer = L.geoJson(crimes, {
+ onEachFeature: onEachItem,
+ pointToLayer: function(feature, latlng) {
+ return L.marker(latlng, {icon: crimeIcon});
+ }
+ });
+
+ markers.addLayer(incidentLayer); // add it to the map
+ map.addLayer(markers);
+</script>
+
+
+
+</body>
+</html>

0 comments on commit 824b4ba

Please sign in to comment.
Something went wrong with that request. Please try again.