diff --git a/index.html b/Advanced/index.html similarity index 88% rename from index.html rename to Advanced/index.html index a806f50..7020dde 100644 --- a/index.html +++ b/Advanced/index.html @@ -4,25 +4,27 @@ Citi Bike - + + + + - - - - - - + + + + + @@ -32,6 +34,7 @@ + @@ -39,6 +42,7 @@ + diff --git a/Advanced/static/css/leaflet.extra-markers.min.css b/Advanced/static/css/leaflet.extra-markers.min.css new file mode 100644 index 0000000..128c285 --- /dev/null +++ b/Advanced/static/css/leaflet.extra-markers.min.css @@ -0,0 +1 @@ +.extra-marker{background:url("../img/markers_default.png") no-repeat 0 0;width:35px;height:46px;position:absolute;left:0;top:0;display:block;text-align:center}.extra-marker-shadow{background:url("../img/markers_shadow.png") no-repeat 0 0;width:36px;height:16px}@media (min--moz-device-pixel-ratio:1.5),(-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5),(min-resolution:1.5dppx){.extra-marker{background-image:url("../img/markers_default@2x.png");background-size:540px 184px}.extra-marker-shadow{background-image:url("../img/markers_shadow@2x.png");background-size:35px 16px}}.extra-marker i{color:#fff;margin-top:10px;display:inline-block;font-size:14px}.extra-marker i.icon{margin-right:0;opacity:1}.extra-marker-circle-red{background-position:0 0}.extra-marker-circle-orange-dark{background-position:-36px 0}.extra-marker-circle-orange{background-position:-72px 0}.extra-marker-circle-yellow{background-position:-108px 0}.extra-marker-circle-blue-dark{background-position:-144px 0}.extra-marker-circle-blue{background-position:-180px 0}.extra-marker-circle-cyan{background-position:-216px 0}.extra-marker-circle-purple{background-position:-252px 0}.extra-marker-circle-violet{background-position:-288px 0}.extra-marker-circle-pink{background-position:-324px 0}.extra-marker-circle-green-dark{background-position:-360px 0}.extra-marker-circle-green{background-position:-396px 0}.extra-marker-circle-green-light{background-position:-432px 0}.extra-marker-circle-black{background-position:-468px 0}.extra-marker-circle-white{background-position:-504px 0}.extra-marker-square-red{background-position:0 -46px}.extra-marker-square-orange-dark{background-position:-36px -46px}.extra-marker-square-orange{background-position:-72px -46px}.extra-marker-square-yellow{background-position:-108px -46px}.extra-marker-square-blue-dark{background-position:-144px -46px}.extra-marker-square-blue{background-position:-180px -46px}.extra-marker-square-cyan{background-position:-216px -46px}.extra-marker-square-purple{background-position:-252px -46px}.extra-marker-square-violet{background-position:-288px -46px}.extra-marker-square-pink{background-position:-324px -46px}.extra-marker-square-green-dark{background-position:-360px -46px}.extra-marker-square-green{background-position:-396px -46px}.extra-marker-square-green-light{background-position:-432px -46px}.extra-marker-square-black{background-position:-468px -46px}.extra-marker-square-white{background-position:-504px -46px}.extra-marker-star-red{background-position:0 -92px}.extra-marker-star-orange-dark{background-position:-36px -92px}.extra-marker-star-orange{background-position:-72px -92px}.extra-marker-star-yellow{background-position:-108px -92px}.extra-marker-star-blue-dark{background-position:-144px -92px}.extra-marker-star-blue{background-position:-180px -92px}.extra-marker-star-cyan{background-position:-216px -92px}.extra-marker-star-purple{background-position:-252px -92px}.extra-marker-star-violet{background-position:-288px -92px}.extra-marker-star-pink{background-position:-324px -92px}.extra-marker-star-green-dark{background-position:-360px -92px}.extra-marker-star-green{background-position:-396px -92px}.extra-marker-star-green-light{background-position:-432px -92px}.extra-marker-star-black{background-position:-468px -92px}.extra-marker-star-white{background-position:-504px -92px}.extra-marker-penta-red{background-position:0 -138px}.extra-marker-penta-orange-dark{background-position:-36px -138px}.extra-marker-penta-orange{background-position:-72px -138px}.extra-marker-penta-yellow{background-position:-108px -138px}.extra-marker-penta-blue-dark{background-position:-144px -138px}.extra-marker-penta-blue{background-position:-180px -138px}.extra-marker-penta-cyan{background-position:-216px -138px}.extra-marker-penta-purple{background-position:-252px -138px}.extra-marker-penta-violet{background-position:-288px -138px}.extra-marker-penta-pink{background-position:-324px -138px}.extra-marker-penta-green-dark{background-position:-360px -138px}.extra-marker-penta-green{background-position:-396px -138px}.extra-marker-penta-green-light{background-position:-432px -138px}.extra-marker-penta-black{background-position:-468px -138px}.extra-marker-penta-white{background-position:-504px -138px}.extra-marker .fa-number:before{content:attr(number)} \ No newline at end of file diff --git a/Advanced/static/css/style.css b/Advanced/static/css/style.css new file mode 100644 index 0000000..bd25956 --- /dev/null +++ b/Advanced/static/css/style.css @@ -0,0 +1,39 @@ +html, +body, +#map-id { + height: 100%; + padding: 0; + margin: 0; +} + +.legend { + padding: 10px; + font-family: Sanchez, serif; + font-size: 16px; + font-weight: bold; + line-height: 18px; + color: #555; + background-color: white; + border-radius: 5px; + box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); +} + +.legend .low { + color: #ec8a2e; +} + +.legend .empty { + color: #a0353a; +} + +.legend .coming-soon { + color: #f4ba48; +} + +.legend .healthy { + color: #1b904f; +} + +.legend .out-of-order { + color: #007dff; +} diff --git a/Advanced/static/img/markers_default.png b/Advanced/static/img/markers_default.png new file mode 100644 index 0000000..2c81d15 Binary files /dev/null and b/Advanced/static/img/markers_default.png differ diff --git a/Advanced/static/img/markers_default@2x.png b/Advanced/static/img/markers_default@2x.png new file mode 100644 index 0000000..35ff61b Binary files /dev/null and b/Advanced/static/img/markers_default@2x.png differ diff --git a/Advanced/static/img/markers_shadow.png b/Advanced/static/img/markers_shadow.png new file mode 100644 index 0000000..33cf955 Binary files /dev/null and b/Advanced/static/img/markers_shadow.png differ diff --git a/Advanced/static/img/markers_shadow@2x.png b/Advanced/static/img/markers_shadow@2x.png new file mode 100644 index 0000000..1116503 Binary files /dev/null and b/Advanced/static/img/markers_shadow@2x.png differ diff --git a/static/js/leaflet.extra-markers.min.js b/Advanced/static/js/leaflet.extra-markers.min.js similarity index 100% rename from static/js/leaflet.extra-markers.min.js rename to Advanced/static/js/leaflet.extra-markers.min.js diff --git a/static/js/logic.js b/Advanced/static/js/logic.js similarity index 97% rename from static/js/logic.js rename to Advanced/static/js/logic.js index 790b5e3..9840a03 100644 --- a/static/js/logic.js +++ b/Advanced/static/js/logic.js @@ -1,6 +1,3 @@ -// let newYorkCoords = [40.73, -74.0059]; -// let mapZoomLevel = 12; - // Create the tile layer that will be the background of our map. let streetmap = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' @@ -50,7 +47,7 @@ let info = L.control({ // When the layer control is added, insert a div with the class of "legend". info.onAdd = function() { - var div = L.DomUtil.create("div", "legend"); + let div = L.DomUtil.create("div", "legend"); return div; }; // Add the info legend to the map. @@ -166,4 +163,4 @@ function updateLegend(time, stationCount) { "

Low Stations: " + stationCount.LOW + "

", "

Healthy Stations: " + stationCount.NORMAL + "

" ].join(""); -} \ No newline at end of file +} diff --git a/Basic/index.html b/Basic/index.html new file mode 100644 index 0000000..38eb0b1 --- /dev/null +++ b/Basic/index.html @@ -0,0 +1,32 @@ + + + + + Citi Bike + + + + + + + + + + + + + + + + +
+ + + + + + diff --git a/static/css/style.css b/Basic/static/css/style.css similarity index 100% rename from static/css/style.css rename to Basic/static/css/style.css diff --git a/static/js/logic (1).js b/Basic/static/js/logic.js similarity index 66% rename from static/js/logic (1).js rename to Basic/static/js/logic.js index d617494..2960d16 100644 --- a/static/js/logic (1).js +++ b/Basic/static/js/logic.js @@ -1,16 +1,12 @@ -// var newYorkCoords = [40.73, -74.0059]; -// var mapZoomLevel = 12; - -// Create the createMap function. function createMap(bikeStations) { - // Create the tile layer that will be the background of our map. let streetmap = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { - attribution: '© OpenStreetMap contributors' + attribution: '© OpenStreetMap contributors' }); - // Create a baseMaps object to hold the lightmap layer. + + // Create a baseMaps object to hold the streetmap layer. let baseMaps = { "Street Map": streetmap }; @@ -31,33 +27,32 @@ function createMap(bikeStations) { L.control.layers(baseMaps, overlayMaps, { collapsed: false }).addTo(map); - } -// Create the createMarkers function. + function createMarkers(response) { // Pull the "stations" property from response.data. let stations = response.data.stations; - // Initialize an array to hold the bike markers. - let bikeMarkers =[]; + // Initialize an array to hold bike markers. + let bikeMarkers = []; // Loop through the stations array. + for (let index = 0; index < stations.length; index++) { + let station = stations[index]; + // For each station, create a marker, and bind a popup with the station's name. - for (let i = 0; i < stations.length; index++) { - let station = stations[index]; - - let bikeMarker = L.marker([station.lat, station.lon]) + let bikeMarker = L.marker([station.lat, station.lon]) .bindPopup("

" + station.name + "

Capacity: " + station.capacity + "

"); - - + // Add the marker to the bikeMarkers array. - bikeMarkers.push(bikeMarkers); - } + bikeMarkers.push(bikeMarker); + } + // Create a layer group that's made from the bike markers array, and pass it to the createMap function. createMap(L.layerGroup(bikeMarkers)); } -let bikeurl = "https://gbfs.citibikenyc.com/gbfs/en/station_information.json"; + // Perform an API call to the Citi Bike API to get the station information. Call createMarkers when it completes. -d3.json(bikeurl).then(createMarkers); +d3.json("https://gbfs.citibikenyc.com/gbfs/en/station_information.json").then(createMarkers); diff --git a/static/js/style.js b/static/js/style.js deleted file mode 100644 index 8897f73..0000000 --- a/static/js/style.js +++ /dev/null @@ -1,25 +0,0 @@ -// Toggle Animation by Class - -;(function($) { - $(function() { - $('nav ul li > a:not(:only-child)').click(function(e) { - $(this) - .siblings('.nav-dropdown') - .slideToggle() - $('.nav-dropdown') - .not($(this).siblings()) - .hide() - e.stopPropagation() - }) - $('html').click(function() { - $('.nav-dropdown').hide() - }) - // Toggle open and close nav styles on click - $('#nav-toggle').click(function() { - $('nav ul').slideToggle(); - }); - $('#nav-toggle').on('click', function() { - this.classList.toggle('active') - }) - }) -})(jQuery) \ No newline at end of file