The Campus Maps contain several features that will allow students, faculty, parents, or other visitors to easily navigate the BYU-Idaho Campus. It utilizes Google maps API, as well as some KML files to help others locate points of interest around campus. It allows a user to navigate through a list of categories to find specific locations that they would like to find. To aid in finding these points a search function has been added to allow users to search for what they are looking for.
The Maps have been made to read a KML file. (Information on KML). Each KML file represents a category and within this category a user can specify any number of points or polygons.
Because the reading and parsing of the KML files can be slow at times, localStorage has been utilized so that after a KML file is parsed it will save it's information. Then when the person returns to the map it doesn't have to parse the files and just read the information from localStorage.
The maps are also embedable so that people can create their own KML files and have their own map experience on their web page.
These instructions assume that you are using the Ingeniux CMS as that is what BYU-Idaho uses. If you are not, the responsibility is yours to alter any paths for your own use.There is a single file needed and a global options object needed to make the Campus Maps work.
First thing to do is to create an element that will house your map.
<div id="map" style="width: 500px; height: 500px"></div>
You should give your element an id and a width and height.
Next you should create a global options object. Then using Key Value pairs define your options.
var options = {
"element":"map",
"categories":["Documents/Google Maps/CampusBuildings.kml","Documents/Google Maps/Parking.kml"]
}
There are many options you can specify that will allow you to customize your experience.
- element – the id of the element you created to embed the maps into
- includeMenus – Whether or not to include the header and menu. If you do not then all of the points and polygons in your KML file will be displayed on load.
- Takes a true or false Boolean
- default - true
- menuState – Whether the menu should default open or closed
- takes a 0 or 1 for closed and open respectively
- default – 1
- categories – an array of the URLS of your KML files
- takes an array of strings
- campusOverlayVisible – whether you want the campus overlay on your map
- Takes a true or false Boolean
- default – true
- coordinates – the latitude and longitude you want the map to center on when it loads
- Takes an array of floats, latitude first, then longitude
- default – [43.815045,-111.783515]
- embed – whether or not the map is being embedded
- takes a true or false Boolean
- default – false
- zoom – the zoom level you want the map to be at
- takes an integer
- default – 16
- mapView – The map view you wish it to load in satellite or map
- takes a string of either “satellite” or “map”
- default – “satellite”
- Maps no longer use a single JSON file to get the data. Uses multiple KML files created in Google Earth. Each KML file represents a single category
- Maps now work in IE8+, Firefox, Chrome, Safari, and Opera
- Developed using OOP
- Maps can be embedded with a single script file and a global options object
- Categories can now contain any combination of Polygons and Placemarks
- Added search capabilities.
- Added the ability to pull up a location with a unique URL.
- Added sharing functionality
- Uploaded everything to Ingeniux and it now runs in Ingeniux
There are many possible additions that have been proposed to The Campus Maps
- Make Polygons clickable, opening a info window
- Allowing a user to get directions to a location by opening them up in either their native maps app or to the desktop version.
- Making the maps indexable by creating an XML document in Ingeniux that allows search engines to index the unique URLS for each location.
- Making the data be pulled from the schools GIS servers and allow faculty to submit additions.
- Make it location aware so that you can see where you are in relation to everything else.
- Performance enhancements to make it faster and more responsive to user interaction.
- Put everything inside a module to not flood the Window object
- Currently each object has it's own copy of the window and document object to keep them local but if it's in a module this can be changed