-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
146 lines (144 loc) · 12.9 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Crimemap Map | View Police Incidents in SF, California</title>
<meta name="description" content="See crime incidents in SF on a Map">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The favicons and touch-icons were generated by https://realfavicongenerator.net -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="manifest.json">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#000000">
<!-- Linking the flexbox framework (grd), fa, the social icons and the main css files -->
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/grd.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="fonts/ss-social-circle.css">
<link rel="stylesheet" href="css/main.css">
<!-- Mixpanel Analytics -->
<!-- start Mixpanel --><script type="text/javascript">(function(e,a){if(!a.__SV){var b=window;try{var c,l,i,j=b.location,g=j.hash;c=function(a,b){return(l=a.match(RegExp(b+"=([^&]*)")))?l[1]:null};g&&c(g,"state")&&(i=JSON.parse(decodeURIComponent(c(g,"state"))),"mpeditor"===i.action&&(b.sessionStorage.setItem("_mpcehash",g),history.replaceState(i.desiredHash||"",e.title,j.pathname+j.search)))}catch(m){}var k,h;window.mixpanel=a;a._i=[];a.init=function(b,c,f){function e(b,a){var c=a.split(".");2==c.length&&(b=b[c[0]],a=c[1]);b[a]=function(){b.push([a].concat(Array.prototype.slice.call(arguments,
0)))}}var d=a;"undefined"!==typeof f?d=a[f]=[]:f="mixpanel";d.people=d.people||[];d.toString=function(b){var a="mixpanel";"mixpanel"!==f&&(a+="."+f);b||(a+=" (stub)");return a};d.people.toString=function(){return d.toString(1)+".people (stub)"};k="disable time_event track track_pageview track_links track_forms register register_once alias unregister identify name_tag set_config reset people.set people.set_once people.increment people.append people.union people.track_charge people.clear_charges people.delete_user".split(" ");
for(h=0;h<k.length;h++)e(d,k[h]);a._i.push([b,c,f])};a.__SV=1.2;b=e.createElement("script");b.type="text/javascript";b.async=!0;b.src="undefined"!==typeof MIXPANEL_CUSTOM_LIB_URL?MIXPANEL_CUSTOM_LIB_URL:"file:"===e.location.protocol&&"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//)?"https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js":"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js";c=e.getElementsByTagName("script")[0];c.parentNode.insertBefore(b,c)}})(document,window.mixpanel||[]);
mixpanel.init("612b86bc56775baf56ffc3cb9d41f322");</script><!-- end Mixpanel -->
</head>
<!-- If the loadingState is true during the AJAX call the cursor on the body shows a progress wheel -->
<body data-bind="css: { loadingCursor: loadingState}">
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="Grid">
<div class="Cell -2of12" id="nav">
<!-- Hamburger Menu (not visible until Breakpoint is hit) -->
<div class="toggle"><i class="fa fa-bars fa-2x"></i></div>
<!-- Sidebar begins here -->
<div class="sidebar">
<div class="logospace">
<div class="toggle"><i class="fa fa-bars fa-2x"></i></div>
<a href="index.html"><img class="logo" src="icons/logo.png" alt="Crimemap logo"></a>
</div>
<!-- During the AJAX call the menu is not visible and a loading gear is displayed -->
<div id="loadingData" data-bind="visible: loadingState"><i class="fa fa-cog fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading...</span></div> <!-- Loading Animation -->
<div data-bind="visible: !loadingState()">
<div class="menu">
<div id="logos">
<a href="https://www.facebook.com/" target="_blank" id="facebook"><i class="ss-icon">facebook</i></a>
<a href="https://www.twitter.com/" target="_blank" id="twitter"><i class="ss-icon">twitter</i></a>
<a href="https://www.linkedin.com/" target="_blank" id="linkedin"><i class="ss-icon">linkedin</i></a>
<a href="https://github.com/" target="_blank" id="github"><i class="ss-icon">github</i></a>
</div>
</div>
<div class="menu">
<p class="menuButton"><i class="fa fa-info-circle" aria-hidden="true"> </i>About</p>
<div class="collapsable">
<div class="innerContent">
<p>Crimemap SF shows you recorded crime incidents in San Francisco, CA between 2003 until now.</p>
<p class="tipContent">(The data is trailing normally 10-15 days behind the current date)</p>
<hr>
<p class="subHeading">Usage</p>
<p>You can view the location of recorded crime incidents on the map. Click a marker on the map to see the corresponding list item in the results view.</p>
<!-- <p>Under <span>"Results"</span> you can see a list of all crime incidents for a given time frame. Hover with the mouse cursor over a list item to see the corresponding location on the map.</p>
<p>Under <span>"Settings"</span> you can adjust the timestamp and the limit of crime incidents that will be requested from the API</p> -->
<p>The marker icons on the map correspond with the resolution of each crime incident:</p>
<ul class="descriptionList">
<li><img src="icons/ARREST, BOOKED.png" alt="Arrested and booked icon"> <span class="tipContent">Suspect was arrested & booked</span></li>
<li><img src="icons/ARREST, CITED.png" alt="Arrested and cited icon"> <span class="tipContent">Suspect was arrested & cited</span></li>
<li><img src="icons/JUVENILE BOOKED.png" alt="Juvenile arrested and booked icon"> <span class="tipContent">A juvenile was arrested & booked</span></li>
<li><img src="icons/UNFOUNDED.png" alt="Unfounded icon"> <span class="tipContent">The incident was unfounded</span></li>
<li><img src="icons/NONE.png" alt="No resolution icon"> <span class="tipContent">There is no resolution</span></li>
<li><img src="icons/NOT AVAILABLE.png" alt="Other resolution icon"> <span class="tipContent">Other resolution/incident</span></li>
</ul>
<hr>
<p class="subHeading">Credit</p>
<p>The site uses the <a href="https://developers.google.com/maps/documentation/javascript/" target="_blank">Google Maps Javascript API</a> and requests the crime incidents from the <a href="https://dev.socrata.com/foundry/data.sfgov.org/cuks-n6tp" target="_blank">SF Open Data API</a></p>
<p class="tipContent">For a full list of used technologies, please visit <a href="https://github.com/matthiasludwig/neighborhood-map" target="_blank">the GitHub Repository for this page.</a></p>
</div>
</div>
</div>
<!-- Settings Menu -->
<!-- <div class="menu">-->
<!-- <p class="menuButton"><i class="fa fa-cogs" aria-hidden="true"> </i>Settings</p>-->
<!-- <div class="collapsable">-->
<!-- <div class="innerContent">-->
<!-- <p class="subHeading"><i class="fa fa-filter" aria-hidden="true"></i> - Filter by police district</p>-->
<!-- <select data-bind="options: policeDistricts, value: filter"></select>-->
<!-- <br>-->
<!-- <p><span data-bind="text: filter"></span> <span data-bind="text: numberIncidents"></span><br><span data-bind="text: percentageIncidents"></span></p>-->
<!-- <hr>-->
<!-- <p class="subHeading"><i class="fa fa-calendar-o" aria-hidden="true"></i> - Adjust date</p>-->
<!-- <form data-bind="submit: newData">-->
<!-- <p class="optionHeading">From: </p>-->
<!-- <input type="date" name="date" data-bind="value: fromDate">-->
<!-- <p class="optionHeading">To: </p>-->
<!-- <input type="date" name="date" data-bind="value: toDate">-->
<!-- <hr class="subDivider">-->
<!-- <span>Limit: </span><input type="number" pattern="\d*" name="quantity" min="0" max="3500" step="100" data-bind="value: apiLimit"><br>-->
<!-- <p class="tipContent">A high limit might slow down the browser.<br>3500 is the current limit of incidents per request.</p>-->
<!-- <br>-->
<!-- <button type="submit">Update</button>-->
<!-- </form>-->
<!-- <br>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- Crime Data List -->
<!-- <div class="menu">-->
<!-- <p class="menuButton"><i class="fa fa-list" aria-hidden="true"> </i>Results</p>-->
<!-- <div class="collapsable" id="resultList">-->
<!-- <ul class="item" data-bind="foreach: filteredData ">-->
<!-- <li class="listItem" data-bind="event: { mouseover: $parent.mouseOver, mouseout: $parent.mouseOut, click: $parent.clickItem}, css: { 'itemSelect': marker.pdid === selectedItem() }"><span data-bind="text: marker.address"></span>: <span data-bind="text: marker.category"></span></li>-->
<!-- </ul>-->
<!-- </div>-->
<!-- </div>-->
</div>
</div>
</div>
<!-- Google Maps starts here -->
<div class="Cell -10of12" id="map"></div>
</div>
<!-- Load custom JavaScript and Frameworks (jQuery and KO) as well as the Google Maps JS API-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="fonts/ss-social.js"></script>
<script src="js/vendor/knockout.js"></script>
<script src="js/vendor/knockout-projections.min.js"></script>
<script src="js/vendor/moment.min.js"></script>
<script src="js/app.js"></script>
<script src="js/view.js"></script>
<script src="js/helper.js"></script>
<script src="js/menu.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA9MHeDzkAS9Qnj5KLTdyt2wgOV-6_TsIM&callback=init" onerror="googleError()" async defer></script>
<script async>
(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-84357531-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>