This one-page app displays Wikipedia pages about world wonders while displaying their location on Google Maps
This is a KnockoutJS web application, it uses ajax to utilize two distinct APIs.
All information is displayed in 'info boxes' that shows on the map when you press a marker or a list item.
If you press the menu button in the bottom left corner, you are able to:
- Search locations (with live filtering)
- Show and hide markers
- Zoom back to where you started
Note: The default instructions for Web Starter Kit are located in the WSK-documents folder.
- A copy of this repository
- Node.js, bring up a terminal and type
node --version
- Gulp, bring up a terminal and type
gulp --version
To make sure both are installed & updated to the latest version
While located in the project root folder:
- Open a terminal
- You need to make sure Gulp and NodeJS both are updated by following the required steps.
- Run
sudo npm install --global gulp && npm install
- That's it! You can now run
gulp serve
and your default browser will open a tab with the app running- Go to https://localhost:3000
Whenever you make a change and save it, the browser will automatically update.
You can also access the app on other devices while running gulp:serve
& gulp serve:dist
!
-
If you are unable to watch the webpage on other devices, make sure you are on the same network
-
If it's still not working:
- Install a tool like dev-ip with
npm install -g dev-ip
, then rundev-ip
- Copy one of the provided IP addresses and go to gulpfile.babel.js and locate the
serve
andserve:dist
tasks - Find the host value( host: 'IP-address' ), then change 'IP-address' to the one you've just copied
You can try gulp:serve again and just like that, the app should show on other devices.
- Install a tool like dev-ip with
If you are curious about how everything works, go read the documents that come with WSK, in the WSK-documents folder. :)
The API's used are:
- Google Maps
- Wikimedia
- Javascript
- Node JS
- KnockoutJS
- Web Starter Kit
- Gulp
- Google Maps
- Webstorm - Coding
- Webflow - Looks
- Google's styling wizard - Map styling
All contributions a greatly appreciated.
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request :D
This post from the Udacity forums.
This article on utility functions in KO.
The Google Maps references and samples Udacity's Full-Stack Nanodegree(FSND) is the reason this project exists.
All the people who spend their time writing great documentation and all of those amazing people answering questions on Stack Overflow and many other places on the internet. Without you, coding would be extremely exhausting.