Skip to content

Commit f1d2022

Browse files
astroudastroud
committed
Add markers for closest matches, add a marker for Boss Headquarters, renamed index file
1 parent 36106a2 commit f1d2022

File tree

4 files changed

+57
-0
lines changed

4 files changed

+57
-0
lines changed

‎06 - Type Ahead/index-START.html renamed to ‎06 - Type Ahead/index.html

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,16 @@
55
<meta charset="UTF-8">
66
<title>Type Ahead 👀</title>
77
<link rel="stylesheet" href="style.css">
8+
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
9+
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
10+
crossorigin="" />
11+
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
12+
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
13+
crossorigin=""></script>
814
</head>
915

1016
<body>
17+
<div id="mapid"></div>
1118

1219
<form class="search-form">
1320
<input type="text" class="search" placeholder="City or State" autofocus>
@@ -21,10 +28,14 @@
2128
let userLatitude = undefined;
2229
let userLongitude = undefined;
2330
const cities = [];
31+
let matchesMarkers = [];
2432

33+
console.log('about to ask');
2534
navigator.geolocation.getCurrentPosition((loc) => {
35+
console.log('asked');
2636
userLatitude = loc.coords.latitude;
2737
userLongitude = loc.coords.longitude;
38+
console.log('sorting by dist');
2839
sortByDistance();
2940
})
3041

@@ -85,13 +96,53 @@
8596
`;
8697
}).join('');
8798
suggestions.innerHTML = html;
99+
100+
displayMarkers(matchArray);
88101
}
89102

90103
const searchInput = document.querySelector('.search');
91104
const suggestions = document.querySelector('.suggestions');
92105

93106
searchInput.addEventListener('change', displayMatches);
94107
searchInput.addEventListener('keyup', displayMatches);
108+
109+
110+
/* Map stuff */
111+
var mymap = L.map('mapid').setView([39.833333, -98.583333], 4);
112+
113+
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiYXN0cm91ZCIsImEiOiJja2N6ODE1b3MwZmNvMnVsNWxzZmhmMWk5In0.D-VAy85TlIn8MtmkLTt7aA', {
114+
maxZoom: 18,
115+
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
116+
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
117+
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
118+
id: 'mapbox/streets-v11',
119+
tileSize: 512,
120+
zoomOffset: -1
121+
}).addTo(mymap);
122+
123+
// Boss Headquarters
124+
const bosIcon = L.icon({
125+
iconUrl: 'marker-bos-icon.png',
126+
iconSize: [50, 41],
127+
iconAnchor: [25, 20],
128+
popupAnchor: [-3, -76],
129+
shadowUrl: 'marker-shadow.png',
130+
shadowSize: [50, 41],
131+
shadowAnchor: [25, 20]
132+
});
133+
const bossMarker = L.marker([45.3849302, -77.6854559], { icon: bosIcon }).addTo(mymap);
134+
135+
function displayMarkers(matchArray) {
136+
// First clear existing markers
137+
matchesMarkers.forEach(marker => marker.remove());
138+
matchesMarkers = [];
139+
140+
// Place markers for the 100 closest matches
141+
matchArray.slice(0, 100).forEach(match => {
142+
matchesMarkers.push(L.marker([match.latitude, match.longitude]).addTo(mymap));
143+
});
144+
}
145+
95146
</script>
96147
</body>
97148

‎06 - Type Ahead/marker-bos-icon-2x.png

10.7 KB
Loading

‎06 - Type Ahead/marker-bos-icon.png

4.36 KB
Loading

‎06 - Type Ahead/style.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,3 +72,9 @@ span.population {
7272
.hl {
7373
background: #ffc600;
7474
}
75+
76+
#mapid {
77+
height: 50vh;
78+
width: 60vw;
79+
margin: 0 auto;
80+
}

0 commit comments

Comments
 (0)