Web Programming Course Overview: Bootstrap.js, Custom Markers, and Google Maps API\

1. Info + Web Tech Course • Web Programming • Anselm Spoerri PhD (MIT) • SC&I @ Rutgers University • aspoerri@rutgers.edu

2. Lecture 5 - Overview • Quiz 2 • Ex1 Revision Due Feb 25 • Discussion 1 = Week 11 Due Apr 14 • Learning How to Interact with Other Developers, using Online Resources AND Meeting with Local Developers by joining a MeetUp (5% of Course Grade) • Ex2 Lab Due Feb 24 • Bootstrap.js v4 • What to Do BEFORE Next Class • Bootstrap.js videos in Week 6 (in green)

3. Ex2 – Week 4 Recap: Recursive Geocoding Function • Create Geocode function for address • https://developers.google.com/maps/documentation/javascript/geocoding • vargeocoder = new google.maps.Geocoder(); asynchronous function • geocode(request:GeocoderRequest, callback:function(GeocoderResultArray, GeocoderStatus)) • Can place marker once geocode returned  place marker in callback function • Create automateGeocodePlaceMarker(geocoderUse, locIndex) • geocoderUse.geocode({'address': locObjUse.address}, • function(results, status) { • if (status === 'OK') { • // assign geocode to locObj + specify map to use + place marker • // recursive function call only if locIndex + 1 < locArray.length • } else { // Geocoder NOT OK because QUERY LIMIT triggered • setTimeout(function(){automateGeocodePlaceMarkerand use locIndex) • } • }); • Create placeMarker (locationObjUse, mapToUse) • addListener('click', function(){}) • Customize Info Window: div contains h2 and p elements | Float category info

4. Ex2 – Week 4 Recap: Custom Markers and Info Windows • Use Custom Markers • https://developers.google.com/maps/documentation/javascript/custom-markers • Define nested object • icons = { Restaurant: { icon: iconBase + 'parking_lot_maps.png' }} • https://fusiontables.google.com/DataSource?docid=1BDnT5U1Spyaes0Nj3DXciJKa_tuu7CzNRXWdVA#map:id=3 • Customize Info Window • https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple • Format location info and width = 400 • h2 element used for location name, • p element for category and floated to left, • pelement for short info, • Border = 2px and left border = 10px. • Add click eventListener • Make map draggable

5. Ex2 Lab – Add Radio Button and Checkbox Control • Add Form • Assign name and id = “myForm” • Add Radio Buttons to control whether category info is shown in Info Window • http://www.w3schools.com/js/js_validation.asp • document.forms["myForm"]["category"].value •  call in Info Window eventListener • Add Checkboxes to control which categories are shown in map • addEventListener(“submit”, updateMap); • Create updateMap function • event.preventDefault(); • https://developers.google.com/maps/documentation/javascript/examples/marker-remove • var markers = []; markers.push(marker);  call in placeMarker • for (i = 0; i < numLocations; i++) • if (document.getElementById(currentLocation.category).checked) { • currentMarker.setMap(mapToUse); • } else { currentMarker.setMap(null); }

6. Bootstrap • Bootstrap.jspopular, used by many sites • Framework | Responsive Layout | Mobile First | Use HTML, CSS and JS • v4: https://www.w3schools.com/bootstrap4/default.asp • v3 : https://www.w3schools.com/bootstrap/default.asp • Need to Organize and Write Code in Specific Way • Pre-built CSS (need to use specific classes) and JS Functionality • Used for Prototyping and Scaffolding web sites • Installation: Basic or Advanced and requires jQuery • https://www.w3schools.com/bootstrap4/bootstrap_get_started.asp • https://getbootstrap.com/docs/4.0/getting-started/introduction/ • https://getbootstrap.com/docs/3.3/getting-started/ • Standard = CDN vs Customize = Download Source

7. Bootstrap 4 – Grid System and Core Concepts • Grid System 12 columns https://www.w3schools.com/bootstrap4/bootstrap_grid_basic.asp • Easy to compute column width and gutter | Added predefined CSS classes • Core Concepts: Containers, Rows and Columns • Container: controls layout and incl. 15px padding • Fixed: responds to media query break points (.container) • Fluid: responds to parent width (.container-fluid) • Rows: horizontal group of columns  placed in container and include columns • Remove padding using negative margins • Columns: Gutter = 30px = L= 15px + R = 15px • .col-SIZE-SPAN SIZE= break point becomes 1 column | SPAN= # columns to span • SIZE: (extra small) | sm | md | lg| xl • SPAN: needs to add up to 12 • Multiple Columns: class="col-sm-6 col-md-4"

8. Bootstrap 4 – Grid System and Core Concepts • Supports latest, stable releases of all major browsers (IE 9 < not supported) • Default font-size of 16px = 1em and line-height is 1.5. Typography • Bootstrap 4 Grid System12 columns and five classes: • .col- (extra small devices - screen width < 576px) • .col-sm- (small devices - screen width >= 576px) • .col-md- (medium devices - screen width >= 768px) • .col-lg- (large devices - screen width >= 992px) • .col-xl- (xlarge devices - screen width >=1200px) • Tips: Each class scales up – same widths for sm and md, only need to specify sm. Easy way to create equal width columns for all devices: only use.colclass. • Difference between Bootstrap 3 and Bootstrap 4 • Bootstrap 4uses flexbox, instead of floats. CSS Flexbox Tutorial • Grid columns without a specified width will automatically layout as equal width

9. Bootstrap – Grid System and Core Concepts • Columns:col-SIZE-SPAN https://www.w3schools.com/bootstrap4/bootstrap_grid_system.asp • SIZE: extra small | sm | md | lg| xl • SPAN: needs to add up to 12 • 1 Column  SPAN = 12 • 2 Column  SPAN = 6 • 3 Column  SPAN = 4 • 4 Column  SPAN = 3 • 6 Column  SPAN = 2 • 12 Column  SPAN =1 • Multiple Columns: class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2" • 2 Items  class="col-xl-6" • 4 Items  class="col-lg-6 col-xl-3" • 6 Items  class="col-md-6 col-lg-4 col-xl-2" • 12 Items  class="col-md-6 col-lg-4 col-xl-3" • 12 Items  class="col-sm-6 col-md-4 col-lg-3 col-xl-2" • 12 Items  class="col-sm-4 col-md-3 col-lg-2 col-xl-1" • Atom Editing: CTRL + / and ALT + F3

10. Bootstrap – Grid System and Core Concepts • Offset Columns:col-SIZE-offset-SPAN • Remember to reset offset at greater screen widths • Nesting Columns: gives more layout flexibility • https://www.w3schools.com/bootstrap4/bootstrap_grid_examples.asp • Utility Classes • .h1 … .h6 also as inline element • .small • .lead • Alignment: .text-left | .text-right | .text-center • Transformation: .text-lowercase | .text-capitalize | .text-uppercase • <blockquote><footer>: .blockquote | .blockquote-reverse • Lists: .list-unstyled | .list-inline • Targets Some Built-In Elements • <mark> | <s> | <del> | <ins> | <strong> | <em> | <dl>, <dt>, <dd> • <code> |<kbd> | <var> | <samp> | <pre> | <pre class="pre-scrollable"> • Utilities without need for CSS https://www.w3schools.com/bootstrap4/bootstrap_utilities.asp

11. Bootstrap 4 – Demo • Create HTML5 page • Add meta element <meta name="viewport" content="width=device-width, initial-scale=1"> • Add CDN links for needed Bootstrap CSS and JS libraries • Create DIVS for .container, .row and .col-*-* • Add img element 12 times • Progressively add needed CSS classes for 5 display sizesand specify needed SPANto achieve desired responsive layout • Use Find and Replace to update CSS classes col-applied to column elements