-
Notifications
You must be signed in to change notification settings - Fork 15
/
home.html
77 lines (56 loc) · 2.63 KB
/
home.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
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Map Example</title>
<!-- Include Leaflet CSS files -->
<!-- <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" /> -->
<!-- New updated leaflet -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin=""/>
</head>
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js'></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
<body>
<h1> Welcome to the Street Lights Project! </h1>
<p>This example creates a map using <a href="http://leafletjs.com/">leaflet.js</a>
and the <a href="http://dev.socrata.com/">SODA API</a> to display data from <a href="https://data.kcmo.org/">data.kcmo.org</a>.
<!--Create the Map div -->
<div id='map' style="width:100%; height:500px">
<script>
//Define JavaScript function to execute the HTTP get request
function httpGet(theUrl){
var xmlHttp = new XMLHttpRequest();
xmlHttp.open( "GET", theUrl, false ); // false for synchronous request
xmlHttp.send( null );
return JSON.parse(xmlHttp.responseText);
}
//Define map variable using the id of the map div
var map = L.map('map').setView([39.0997, -94.578], 10);
//Add basemap raster tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
//Use HTTP get function to get 2015 Crime data for KCMO (http://dev.socrata.com/foundry/#/data.kcmo.org/geta-wrqs)
//Note: the default limit is 1000 data points
// var data =
// var data = httpGet('https://data.kcmo.org/resource/geta-wrqs.json');
$.getJSON("data/maps.geojson", function(data) {
var geojson = L.geoJson(data, {
onEachFeature: function (feature, layer) {
layer.bindPopup(feature.properties.name);
}
});
});
//for each data point, create a marker with the lat lon coordinates and add to the map
<!-- data.forEach(function(entry){ -->
// console.dir(entry);
// if ( entry.location_1 !== undefined ) {
// var marker = L.marker([entry.location_1.coordinates[1], entry.location_1.coordinates[0]])
// .bindPopup(entry.description + " " + entry.from_date).addTo(map);
// }
// });
</script>
</body>
</html>