Skip to content

Commit 71c4251

Browse files
ashokjain001ashokjain001
committed
second commit
1 parent b93dffd commit 71c4251

File tree

5 files changed

+130
-61
lines changed

5 files changed

+130
-61
lines changed

Diff for: ‎README.md

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
Neighborhood Maps
22
=========================
33
This is fifth project of the Udacity Fullstack Nanodegree Program.
4-
This app is to demonstrate the ability to use a js framework(knockout.js) together with Google Maps API and Foursquare API.
4+
5+
This is a single page application featuring a map of my favorite neighborhood. This app demonstrates the ability to use a js framework(knockout.js) together with Google Maps API and Foursquare API.
6+
57

68
## Skills Demonstrated
79
* Knockout.js
8-
* Google Maps API - show all the fav places in NYC
10+
* Google Maps API to show all the fav places in NYC
911
* Foursquare API to show info on places
1012
* HTML
1113
* CSS
@@ -17,4 +19,4 @@ git clone https://github.com/ashokjain001/NeighborhoodMaps.git
1719
```
1820
Run index.html from NeighborhoodMaps folder
1921

20-
This app can be found at [Neighborhood Maps](https://ashokjain001.github.io/NeighborhoodMaps/).
22+
Live app can be found running at [Neighborhood Maps](https://ashokjain001.github.io/NeighborhoodMaps/).

Diff for: ‎index.html

+5-3
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,10 @@ <h1>Neighborhood Map:</h1>
1717
<div class='center'><em><strong>Search My Favorite Locations in NYC: </em></strong></div>
1818

1919
<div class = "input-group">
20-
<input type="text" data-bind="textInput: searchOption, valueUpdate: 'afterkeydown' " placeholder="Search Favorite Locations...">
20+
<input type="text" data-bind="textInput: searchOption, valueUpdate: 'keydown' " placeholder="Search Favorite Locations...">
2121
</div>
2222

23-
<ul data-bind="foreach: myLocationsFilter">
23+
<ul data-bind="foreach: favLocationsFilter">
2424
<li data-bind="text: title, click: $parent.setLocation"></li></a>
2525
</ul>
2626

@@ -38,7 +38,9 @@ <h1>Neighborhood Map:</h1>
3838

3939
<script src="js/lib/knockout-3.2.0.js"></script>
4040
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
41-
<script src="js/app.js"></script>
41+
<script src="js/styles.js"></script>
42+
<script src="js/app.js"></script>
43+
<script src="js/location.js"></script>
4244
<script src="js/bootstrap.min.js"></script>
4345

4446
</body>

Diff for: ‎js/app.js

+17-55
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,10 @@
1-
//list of favorite locations
2-
var favlocations = [
3-
{
4-
title: 'Park Ave Penthouse',
5-
lat: 40.7713024,
6-
lng: -73.9632393,
7-
},
8-
9-
{
10-
title: 'Chelsea Loft',
11-
lat: 40.7444883,
12-
lng: -73.9949465,
13-
},
14-
{
15-
title: 'Union Square Open Floor Plan',
16-
lat: 40.7347062,
17-
lng: -73.9895759,
18-
},
19-
{
20-
title: 'East Village Hip Studio',
21-
lat: 40.7281777,
22-
lng: -73.984377,
23-
},
24-
{
25-
title: 'TriBeCa Artsy Bachelor Pad',
26-
lat: 40.7195264,
27-
lng: -74.0089934,
28-
},
29-
{
30-
title: 'Chinatown Homey Space',
31-
lat: 40.7180628,
32-
lng: -73.9961237,
33-
}
34-
35-
]
36-
37-
1+
//Assigning variables
382
var markers = [];
393
var map;
404

41-
//foursqaure variables
42-
FS_URL = 'https://api.foursquare.com/v2/venues/search';
43-
clientID = '322YK1NCTFEZMVE4DP542QSV13UM3JCEXTIS3MMBBLTVGAVN';
44-
clientSecret = 'XDG3FOKADQQH53LCC1YVJMLBYFCNXVEHPRV1K5OCONCB2MLE';
5+
var FS_URL = 'https://api.foursquare.com/v2/venues/search';
6+
var clientID = '322YK1NCTFEZMVE4DP542QSV13UM3JCEXTIS3MMBBLTVGAVN';
7+
var clientSecret = 'XDG3FOKADQQH53LCC1YVJMLBYFCNXVEHPRV1K5OCONCB2MLE';
458

469

4710
// main viewmodel function
@@ -64,7 +27,7 @@ var ViewModel = function(){
6427
};
6528

6629
//dynamically update the fav location list based input search bar
67-
this.myLocationsFilter = ko.computed(function() {
30+
this.favLocationsFilter = ko.computed(function() {
6831
var result = [];
6932

7033
for (var i = 0; i < favlocations.length; i++) {
@@ -89,9 +52,10 @@ function initMap(){
8952
map = new google.maps.Map(document.getElementById('map'), {
9053
center: {lat: 40.7413549, lng: -73.9980244},
9154
zoom: 12,
92-
mapTypeControl: false
55+
mapTypeControl: false,
56+
styles: styles
9357
});
94-
};
58+
}
9559

9660
//function to make marker
9761
function makeMarker(favlocations){
@@ -120,8 +84,8 @@ function makeMarker(favlocations){
12084
marker.addListener('click', function() {
12185
populateInfoWindow(this, largeInfowindow);
12286
});
123-
};
124-
};
87+
}
88+
}
12589

12690
//function to show marker
12791
function showMarker(location) {
@@ -135,21 +99,21 @@ function showMarker(location) {
13599
bounds.extend(markers[i].position);
136100
}
137101
map.fitBounds(bounds);
138-
};
102+
}
139103

140104

141105
// function to pull info from foursqaure and populate the infowindow
142106
function populateInfoWindow(marker, infowindow) {
143107
// Check to make sure the infowindow is not already opened on this marker.
144-
108+
position = marker.position;
145109
lat = marker.lat;
146110
lng = marker.lng;
147111
title = marker.title;
148112
infowindow.marker = marker;
149113

150114
var apiUrl = 'https://api.foursquare.com/v2/venues/search?ll=' +
151-
lat + ',' + lng + '&client_id=' + clientID
152-
+ '&client_secret=' + clientSecret + '&v=20180212' +'&query=' + title;
115+
lat + ',' + lng + '&client_id=' + clientID +
116+
'&client_secret=' + clientSecret + '&v=20180212' +'&query=' + title;
153117

154118
$.getJSON(apiUrl, function(data){
155119
response = data.response.venues[0];
@@ -167,10 +131,10 @@ function populateInfoWindow(marker, infowindow) {
167131
infowindow.setContent(infowindowHTML);
168132
}else{
169133
infowindow.setContent('<div>' + marker.title + '</div>');
170-
};
171-
});
134+
}
135+
})
172136
infowindow.open(map, marker);
173-
};
137+
}
174138

175139
function runApp(){
176140
ko.applyBindings(new ViewModel());
@@ -186,5 +150,3 @@ function runApp(){
186150

187151

188152

189-
190-

Diff for: ‎js/location.js

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
//list of favorite locations
2+
var favlocations = [
3+
{
4+
title: 'Park Ave Penthouse',
5+
lat: 40.7713024,
6+
lng: -73.9632393,
7+
},
8+
9+
{
10+
title: 'Chelsea Loft',
11+
lat: 40.7444883,
12+
lng: -73.9949465,
13+
},
14+
{
15+
title: 'Union Square Open Floor Plan',
16+
lat: 40.7347062,
17+
lng: -73.9895759,
18+
},
19+
{
20+
title: 'East Village Hip Studio',
21+
lat: 40.7281777,
22+
lng: -73.984377,
23+
},
24+
{
25+
title: 'TriBeCa Artsy Bachelor Pad',
26+
lat: 40.7195264,
27+
lng: -74.0089934,
28+
},
29+
{
30+
title: 'Chinatown Homey Space',
31+
lat: 40.7180628,
32+
lng: -73.9961237,
33+
}
34+
35+
];

Diff for: ‎js/styles.js

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
2+
// Create a styles array to use with the map.
3+
var styles = [
4+
{
5+
featureType: 'water',
6+
stylers: [
7+
{ color: '#19a0d8' }
8+
]
9+
},{
10+
featureType: 'administrative',
11+
elementType: 'labels.text.stroke',
12+
stylers: [
13+
{ color: '#ffffff' },
14+
{ weight: 6 }
15+
]
16+
},{
17+
featureType: 'administrative',
18+
elementType: 'labels.text.fill',
19+
stylers: [
20+
{ color: '#e85113' }
21+
]
22+
},{
23+
featureType: 'road.highway',
24+
elementType: 'geometry.stroke',
25+
stylers: [
26+
{ color: '#efe9e4' },
27+
{ lightness: -40 }
28+
]
29+
},{
30+
featureType: 'transit.station',
31+
stylers: [
32+
{ weight: 9 },
33+
{ hue: '#e85113' }
34+
]
35+
},{
36+
featureType: 'road.highway',
37+
elementType: 'labels.icon',
38+
stylers: [
39+
{ visibility: 'off' }
40+
]
41+
},{
42+
featureType: 'water',
43+
elementType: 'labels.text.stroke',
44+
stylers: [
45+
{ lightness: 100 }
46+
]
47+
},{
48+
featureType: 'water',
49+
elementType: 'labels.text.fill',
50+
stylers: [
51+
{ lightness: -100 }
52+
]
53+
},{
54+
featureType: 'poi',
55+
elementType: 'geometry',
56+
stylers: [
57+
{ visibility: 'on' },
58+
{ color: '#f0e4d3' }
59+
]
60+
},{
61+
featureType: 'road.highway',
62+
elementType: 'geometry.fill',
63+
stylers: [
64+
{ color: '#efe9e4' },
65+
{ lightness: -25 }
66+
]
67+
}
68+
];

0 commit comments

Comments
 (0)