-
Notifications
You must be signed in to change notification settings - Fork 5
/
scripts.js
66 lines (54 loc) · 1.98 KB
/
scripts.js
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
// Define map
const myMap = L.map('map');
// Define icon
const coffeeCup = L.icon({
iconUrl: 'https://taniarascia.github.io/coffee/images/coffee.png',
shadowUrl: '',
iconSize: [35, 65]
});
// Define basemap
const myBasemap = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles © Esri — National Geographic, Esri, DeLorme, NAVTEQ, UNEP-WCMC, USGS, NASA, ESA, METI, NRCAN, GEBCO, NOAA, iPC',
maxZoom: 16
});
// Add basemap to map id
myBasemap.addTo(myMap);
// Set center of the map
myMap.setView([41.939948, -87.650673], 12);
// Make an XMLHttpRequest to the JSON data
const request = new XMLHttpRequest();
request.open('GET', 'https://taniarascia.github.io/coffee/js/map.json', true);
request.onload = function () {
// begin accessing JSON data here
const data = JSON.parse(this.response);
// Reduce neighborhoods down to how many they are, and count them
const neighborhoodCount = data.cafes.reduce((sums, cafe) => {
sums[cafe.neighborhood] = (sums[cafe.neighborhood] || 0) + 1;
return sums;
}, {});
// Create a sidebar
const sidebar = document.getElementById('neighborhoods');
const h3 = document.createElement("h3");
h3.innerHTML = "Neighborhood Count";
sidebar.appendChild(h3);
// Print all neighborhoods in sidebar
for (let neighborhood in neighborhoodCount) {
const p = document.createElement("p");
p.innerHTML = `<b>${neighborhood}</b> : ${neighborhoodCount[neighborhood]}`;
sidebar.appendChild(p);
}
// Print cafe markers
const cafes = data.cafes.map(cafe => {
console.log(cafe.name);
L.marker([cafe.lat, cafe.long], {
icon: coffeeCup
}).bindPopup(`
<h2>${cafe.name}</h2>
<p><b>Neighborhood:</b> ${cafe.neighborhood}</p>
<p><b>Ambiance:</b> ${cafe.ambiance}</p>
<p><b>Flavor:</b> ${cafe.flavor}</p>
<p><b>Comments:</b> ${cafe.comments}</p>
`).openPopup().addTo(myMap);
});
}
request.send();