-
Notifications
You must be signed in to change notification settings - Fork 152
/
index.html
111 lines (94 loc) · 3.73 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
<!DOCTYPE html>
<html>
<head>
<title>ModestMaps JS: GeoJSON Markers</title>
<script type="text/javascript" src="../../modestmaps.js"></script>
<script type="text/javascript" src="modestmaps.markers.js"></script>
<script type="text/javascript">
var MM = com.modestmaps,
map,
markers;
function initMap() {
var provider = new MM.TemplatedLayer("http://ecn.t{S}.tiles.virtualearth.net/tiles/r{Q}?g=689&mkt=en-us&lbl=l0&stl=m", [0,1,2,3,4,5,6,7]);
map = new MM.Map("map", provider);
map.setCenterZoom(new MM.Location(37.764, -122.419), 12);
markers = new MM.MarkerLayer();
map.addLayer(markers);
loadMarkers();
}
// ghetto JSON-P
function loadMarkers() {
var script = document.createElement("script");
script.src = "http://sanfrancisco.crimespotting.org/crime-data?dstart=2011-12-24&dend=2011-12-25&format=json&callback=onLoadMarkers";
document.getElementsByTagName("head")[0].appendChild(script);
}
function onLoadMarkers(collection) {
// onLoadMarkers() gets a GeoJSON FeatureCollection:
// http://geojson.org/geojson-spec.html#feature-collection-objects
var features = collection.features,
len = features.length,
extent = [];
// for each feature in the collection, create a marker and add it
// to the markers layer
for (var i = 0; i < len; i++) {
var feature = features[i],
marker = document.createElement("a");
// give it a title
marker.setAttribute("title", [
feature.properties.crime_type,
"on", feature.properties.date_time
].join(" "));
// add a class
marker.setAttribute("class", "report");
// set the href to link to crimespotting's crime page
marker.setAttribute("href", "http://sanfrancisco.crimespotting.org/crime/" + [
feature.properties.date_time.substr(0, 10),
feature.properties.crime_type.replace(/ /g, "_"),
feature.id
].join("/"));
// create an image icon
var img = marker.appendChild(document.createElement("img"));
img.setAttribute("src", "icons/" + feature.properties.crime_type.replace(/ /g, "_") + ".png");
markers.addMarker(marker, feature);
// add the marker's location to the extent list
extent.push(marker.location);
}
// tell the map to fit all of the locations in the available space
map.setExtent(extent);
}
</script>
<style type="text/css">
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 16px;
padding: 20px;
margin: 0;
}
h1 {
margin: 0 0 20px 0;
}
#map {
width: 100%;
height: 500px;
}
.report {
margin-left: -13px;
margin-top: -13px;
width: 26px;
height: 26px;
}
.report img {
border: none !important;
}
.report:hover {
z-index: 1000;
}
</style>
</head>
<body onload="initMap()">
<h1>ModestMaps JS: GeoJSON Markers</h1>
<div id="map">
</div>
</body>
</html>