Notre Dame de Namur University Campus Map Project - ndnumobile/web GitHub Wiki

Welcome to the web wiki!

NDNUMobile/Web Project

The main goal of this project was to create a map of Notre Dame de Namur University for prospective students and university workers. This map features icons leading to each campus location. Each location features a description, along with visual and audio aids. Other features of this web page include a list of links to each campus location as well as helpful documents and a search bar. This map will assist students and visitors to both orienteer and learn about the locations and features of the university.

List of Project Files:

  • MapTest4.html- file containing the basic structure of the NDNU map website in HTML Code.
  • MapTest.css- file containing the color structures and layouts in CSS code for the mapTest4.html file.
  • AutoComplete.css- css stylesheet for the auto-complete feature in the searchBar.
  • Default.css- css stylesheet for setting the structure of the header, footer and modal.
  • MapBox.js- Javascript file containing functions associated with Mapbox APIs. These functions detail the map utilities.
  • CustomIcons- a directory containing icon images for each location.
  • ModalFunctions.js- javascript file containing functions for closing modals on reset or closing windows. Closes the welcoming modal if the user chooses so, welcome modal is displayed if the person clicks on welcome button.
  • AutoComplete.js- javascript file used for autocomplete function for the search Bar.
  • locationSearch.js- javascript file used to complete searches with the advanced-demo selector.

Languages Used for the Construction of this Project

  1. HTML
  2. CSS
  3. Javascript
  4. JSON
  5. Mapbox

List of Featured Locations

  • Academic Success Center
  • Administration
  • Bookstore
  • Business Office
  • Cafeteria
  • Campanille
  • Campus Center
  • Career Services
  • Center for Spirituality
  • Counseling and Health Services
  • Cunningham Chapel Annex
  • Cuvilly Hall
  • Dean of Students/Student Affairs
  • Financial Aid
  • Gavin Hall
  • Housing
  • Human Resources
  • International Student Office
  • Julie Billiard Hall
  • Koret Athletic Field
  • Library Lawn
  • Madison Art Center
  • New Hall
  • Office of Diversity
  • Ralston Hall Mansion
  • Ralston Hall Annex
  • Registrar
  • Sister Dorothy Stang Center
  • Saint Joseph Hall
  • Saint Mary's Hall
  • Student Life and Leadership Office
  • Tabard Inn
  • Taube Center
  • The Apartments
  • The Carl and Celia Berta Gellert Library
  • The Quad
  • Toso Residences
  • Walter Gleason Gym
  • Weigand Gallery
  • Writing Center

How the Actual Mapbox Program is being used and actually completed:

With the use of a special access token:

mapboxgl.accessToken = 'Security Key Here';

Then set up bounds for the Mapbox:

var bounds = [ [-122.293931, 37.508234], // Southwest coordinates [-122.274592, 37.527414] // Northeast coordinates ];

Then set up the variable map box:

var map = new mapboxgl.Map({ container: 'map', // container id // style: 'mapbox://styles/seprothx/ciypcnvrv000m2rpj08pi5jgy', //stylesheet location for staging 'ndnuZ' mapbox style. style: 'mapbox://styles/seprothx/ciz1d7tzs00172rqbzvwq71wp', //map style location for production 'ndnuZ-copy' mapbox style. center: [-122.285060, 37.517295], //starting map position. zoom: 16.9, // starting zoom maxBounds: bounds //sets boundry that the map will pan within. });

Add navigation controls for zoom and reset north. Upper right default position.

var nav = new mapboxgl.NavigationControl(); map.addControl(nav, 'bottom-right');

Function for centering the map in Mapbox:

var ctrMap = document.getElementById('ctrMapBtn'); ctrMap.onclick = function(){ map.flyTo({center: [-122.285060, 37.517295], speed: 0.3, zoom: 16.9, bearing: 0, pitch: 0}); $("#wrapper").toggleClass("toggled",true); }

Adding of markers to the Mapbox map:

geojson.features.forEach(function(marker) { var imgS = marker.properties.icon;

Javascript function for the opening of the Welcoming Modal:

openWelcomeModal.onclick = function(){ modalopen.innerHTML = '<div id="modalContent" class="modal-content2 autoModal ">'

            `+'<div class="modal-header2 autoModal">'`
                `+'<div class= "modal-image2"><img src="http://i.imgur.com/A35ss2e.png" alt="argo"></div>'`
                `+'<div class="modal-title2">Welcome to the NDNU Campus Tour!</div>'`
                `+'<span onClick="ribbonClose()" class="close2">&times;</span>'`
            `+'</div>'`

            `+'<div id="modalPrime" class="modal-body2 autoModal">'`
                `+'<h4>This is an interactive map.</h4>'`
                `+'<p><u>Helpful Hints</u></p>'`
                `+'<p2><span class="glyphicon glyphicon-check"></span>  Use the search bar above to search for a location, or click on map locations for a popup description.<br> <span class="glyphicon glyphicon-check"></span> Use the navigation menu in the upper left corner to see a list of campus buildings, find printable school documents or browse FAQ\'s.<br><span class="glyphicon glyphicon-check"></span> To close a popup window: click the close button in the top right, or click anywhere on the map. </p2>'`
            `+'</div>'`
            `+'<div class="modal-footer2 autoModal">'`
            `+'</div>'`
        `+'</div>';`
`modalopen.className = "modal2 autoModal";`
`modalopen.style.display = "block";`

`$("#wrapper").toggleClass("toggled");`

}

Sample JSON function which describes a university location:

{ "type": "Feature", "properties": { "title": "Cuvilly Hall", "description": "Cuvilly Hall houses a minority of classrooms. It is located up the hill from Ralston Manor and the Weigand Gallery.", "image": "https://www.youtube.com/embed/0oiWSImRNEw", "history": "Named after a small village in Picardy, France, where St. Julie Billiart was Born in 1751.", "video": "https://www.youtube.com/embed/wcF3hWxleFg", "icon": "https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_(2011).png" }, "geometry": { "coordinates": [-122.287009,37.517927], "type": "Point" } },

JSON File Details allowing the playing of the audio and the video

"video": "https://www.youtube.com/embed/wcF3hWxleFg",

"icon": "./customIcons/gradCap.svg",

Sample function which leads to the location being marked on map:

function pressBtnCampus() { var z = document.getElementById('location5').innerHTML;

	if(z == "Campus Center")
	{
    	map.flyTo({center: [-122.284934,37.517124],speed: 0.3});
    	var popup = new mapboxgl.Popup({closeOnClick: true})
    	.setLngLat([-122.284934,37.517124])
    	.setHTML('<h3>Campus Center</h3><p>The Campus center is comprised of the Academic Success Center, Admissions Office, International Student Office, and Student Life and Leadership Office</p>')
    	.addTo(map);
    }
}

An example of the CSS Code used to change the structure and features of the website:

#navbar-white.navbar-default .navbar-nav>li>ul>li>a:hover{ color:#006699; background-color:gold; /*Hovering with gold color*/ }

New additions to the Json file with pictures and videos integrated.

{ "type": "Feature", "properties": { "title": "Cafeteria", "description": "Our cafeteria provides a variety of meals and snacks prepared by Bon Appetit. There are vegetarian, vegan, and gluten-free options.", "image": "./img/placeholder.gif", "audio": "./audio/PinkNoise_15min.mp3", "history": "Test test test", "video": "https://www.youtube.com/embed/wcF3hWxleFg", "icon": "./customIcons/forkAndKnife.svg", "iconSize":[25,25] }, "geometry": { "coordinates": [-122.285235,37.517219], "type": "Point" } }

Code for showing the buildings on the pictures once one clicks the icon:

else if(x == "New Hall") {

      `map.flyTo({`
          `center: [-122.285694,37.517938],`
          `speed: 0.3});`
      `var popup = new mapboxgl.Popup({closeOnClick: true})`
      `.setLngLat([-122.285694,37.517938])`
      `.setHTML('<h3>' + geojson.features[6].properties.title + '</h3><iframe class="popup-image" allowfullscreen="allowfullscreen" frameborder="0" scrolling="auto" src="' + geojson.features[6].properties.image + '"></iframe><p>' + geojson.features[6].properties.description + '</p><br>'`
             `+ '<a href="#" onClick="popUpModal(\'' + geojson.features[6].properties.title + '\',\'' +   geojson.features[6].properties.history + '\',\'' + geojson.features[6].properties.video + '\',\'' + geojson.features[6].properties.image  + '\',\'' + geojson.features[6].properties.description + '\')" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">History</a>')`
      `.addTo(map);`

}

JSON modification with the video associated with respective buildings:

var geojson = { "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": { "id": "1", "parentId": "", "locType": "building", "title": "St. Mary Hall", "description": "Saint Mary’s hall houses the majority of classrooms. Newly remodeled, the science and computer labs are located in this building along with public safety, financial aid, the registrar, and the business office.", "image": "./img/stMarys.JPG", "audio": "./audio/stMarysHistory.mp3", "history": "Named for Our Lady, Notre Dame, mother of Jesus Christ.", "video": "https://www.youtube.com/embed/wcF3hWxleFg", "icon": "./customIcons/gradCap.svg", "iconSize":[25,25] }, "geometry": { "coordinates": [-122.2849,37.51675], "type": "Point" } },

The functions used for linking the NDNU Map to the Documents:

<li class="dropdown-submenu"> <a href="#" class="dropdown-sublink">Student Forms<span class="caret"></span></a> <ul class="dropdown-menu">

<li><a href="http://www.ndnu.edu/human-resources/files/2013/01/employee-handbook.pdf">Employee Handbook</a></li>

<li><a href="http://www.ndnu.edu/human-resources/files/2013/01/faculty-handbook-part-1.pdf">Faculty Handbook</a</li>

<li><a href="http://www.ndnu.edu/human-resources/files/2013/01/part-time-faculty-guidebook.pdf">Part Time Faculty Handbook</a></li>

<li><a href="http://www.ndnu.edu/human-resources/files/2013/01/governance-handbook.pdf">Governance Handbook</a></li>

<li><a href="http://www.ndnu.edu/academics/files/2013/06/add-drop-form.pdf">Add or Drop</a></li>

<li><a href="http://www.ndnu.edu/academics/files/2013/06/request-for-administrative-course-withdrawal.pdf">Withdrawal</a></li>

<li><a href="http://www.ndnu.edu/academics/files/2013/06/application-for-ndnu-certificate.pdf">Application NDNU Certificate</a></li>

<li><a href="http://www.ndnu.edu/academics/files/2013/06/change-of-major-form.pdf">Change of Major</a></li>

<li><a href="http://www.ndnu.edu/academics/files/2013/06/student-registration-form.pdf">Student Registration</a></li>

<li><a href="http://www.ndnu.edu/academics/files/2013/06/transcript-request.pdf">Unofficial Transcript Request</a></li>

<li><a href="http://www.ndnu.edu/academics/files/2013/06/undergraduate-change-of-program-form.pdf">Undergraduate Change of Program</a></li>

<li><a href="http://www.ndnu.edu/academics/files/2013/06/authorization-to-release-information-to-a-third-party.pdf">Authorization Info Release</a></li>

</ul> </li>

Localization Requirements Met

The website is compatible with Spanish language using Google Translate.

Auto-complete function allowing from automatic completion of the location name

Uses advanced-demo selector, choices include all the location names, for loop used with the location choices, document gets element by ID and that results in the automatic filling of the location in the search bar.

var locationSearch = new autoComplete({ selector: '#advanced-demo', minChars: 1, source: function(term, suggest){ term = term.toLowerCase(); var choices = [['St. Mary\'s Hall'], ['Financial Aid'], ['Registrar'], ['Business Office'], ['Public Safety'], ['Cafeteria'], ['The Carl and Celia Berta Gellert Library'], ['Library Lawn'], ['Walter Gleason Gym'], ['Campus Center'], ['Academic Success Center'], ['Admissions'], ['International Student Office'], ['Student Life & Leadership Office'], ['The Quad'], ['Writing Center'], ['Cunningham Chapel Annex'], ['Center for Spirituality'], ['Julie Billiart Hall'], ['Dean of Students/Student Affairs'], ['Career Services'], ['St. Joseph Hall'], ['Housing'], ['The Apartments'], ['Koret Athletic Field'], ['Toso Residence (Compiegne)'], ['Human Resources'], ['Administration'], ['New Hall'], ['Counseling and Health Services'], ['Taube Center'], ['Theatre'], ['Ralston Hall'], ['Weigand Gallery'], ['Madison Art Center'], ['Cuvilly Hall'], ['Bookstore'], ['Gavin Hall'],['Province Center']]; var suggestions = []; for (i=0;i<choices.length;i++) if (~(choices[i][0]+' '+choices[i][1]).toLowerCase().indexOf(term)) suggestions.push(choices[i]); suggest(suggestions); },

        `renderItem: function (item, search){`
            `search = search.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&amp;');`
            `var re = new RegExp("(" + search.split(' ').join('|') + ")", "gi");`
            `return '<div class="autocomplete-suggestion" data-langname="'+item[0]+'" data-lang="'+item[1]+'" data-  val="'+search+'">'+item[0].replace(re, "<b></b>")+'</div>';`
        `},`

        `onSelect: function(e, term, item){`
            `console.log('Item "'+item.getAttribute('data-langname')+' ('+item.getAttribute('data-lang')+')" selected by '+  (e.type == 'keydown' ? 'pressing enter' : 'mouse click')+'.');`
            `document.getElementById('advanced-demo').value = item.getAttribute('data-langname');`
        `}`
    `});`
⚠️ **GitHub.com Fallback** ⚠️