From e5cc8f4f374efb2aa108ad2cc726d177c820a054 Mon Sep 17 00:00:00 2001 From: Manning Qu Date: Sat, 11 Mar 2017 03:51:58 -0500 Subject: [PATCH] Accessible Metro Map I apologize that it was not even a quarter done as expected. But I did get a lot from this class. Before this, I had no idea of how front end works and how codes structured. Now I have an overview of everything and got this project that I am really passionate about. I submit this idea to a NYU App design contest and made it in the semifinal. I will keep working on it and try my best. Thank you for your help and patience! --- DWD_final_colordone/index.html | 155 +++++++++++++++++++++++++++++++++ DWD_final_colordone/script.js | 42 +++++++++ DWD_final_colordone/style.css | 65 ++++++++++++++ 3 files changed, 262 insertions(+) create mode 100644 DWD_final_colordone/index.html create mode 100644 DWD_final_colordone/script.js create mode 100644 DWD_final_colordone/style.css diff --git a/DWD_final_colordone/index.html b/DWD_final_colordone/index.html new file mode 100644 index 0000000..53fe3f5 --- /dev/null +++ b/DWD_final_colordone/index.html @@ -0,0 +1,155 @@ + + + + Accessible metro map + + + + + + + + + + + + + + + + + + + +
+ + +
+
+

Accessible Metro Station Near Me

+

See stations nearby on the map, or search your location.

+
+
+ + +
+
+ + + + + + + \ No newline at end of file diff --git a/DWD_final_colordone/script.js b/DWD_final_colordone/script.js new file mode 100644 index 0000000..5fce0e0 --- /dev/null +++ b/DWD_final_colordone/script.js @@ -0,0 +1,42 @@ + +$(document).ready(function(){ + $(".nav-tabs a").click(function(){ + $(this).tab('show'); + }); +}); + + +function initMap() { + var map = new google.maps.Map(document.getElementById('map'), { + center: {lat: -34.397, lng: 150.644}, + zoom: 16 + }); + var infoWindow = new google.maps.InfoWindow({map: map}); + + // Try HTML5 geolocation. + if (navigator.geolocation) { + navigator.geolocation.getCurrentPosition(function(position) { + var pos = { + lat: position.coords.latitude, + lng: position.coords.longitude + }; + + infoWindow.setPosition(pos); + infoWindow.setContent('Location found.'); + map.setCenter(pos); + }, function() { + handleLocationError(true, infoWindow, map.getCenter()); + }); + } else { + // Browser doesn't support Geolocation + handleLocationError(false, infoWindow, map.getCenter()); + } +} + +function handleLocationError(browserHasGeolocation, infoWindow, pos) { + infoWindow.setPosition(pos); + infoWindow.setContent(browserHasGeolocation ? + 'Error: The Geolocation service failed.' : + 'Error: Your browser doesn\'t support geolocation.'); +} + diff --git a/DWD_final_colordone/style.css b/DWD_final_colordone/style.css new file mode 100644 index 0000000..d4922aa --- /dev/null +++ b/DWD_final_colordone/style.css @@ -0,0 +1,65 @@ + + #map { + height: 1000px; + + } + + .circleRed { + text-align:center; + color:white; + width: 20px; + height: 20px; + background: red; + -moz-border-radius: 50px; + -webkit-border-radius: 50px; + border-radius: 50px; + position:relative; +} + +.circleGreen { + text-align:center; + color:white; + width: 20px; + height: 20px; + background: green; + -moz-border-radius: 50px; + -webkit-border-radius: 50px; + border-radius: 50px; + position:relative; +} + +.circlePurple { + text-align:center; + color:white; + width: 20px; + height: 20px; + background: purple; + -moz-border-radius: 50px; + -webkit-border-radius: 50px; + border-radius: 50px; + position:relative; +} + +.circleBlue { + text-align:center; + color:white; + width: 20px; + height: 20px; + background: blue; + -moz-border-radius: 50px; + -webkit-border-radius: 50px; + border-radius: 50px; + position:relative; +} + +.circleOrange { + text-align:center; + color:white; + width: 20px; + height: 20px; + background: orange; + -moz-border-radius: 50px; + -webkit-border-radius: 50px; + border-radius: 50px; + position:relative; +} \ No newline at end of file