From 77beea72cc7ff99266b1aaa752adbff604287a88 Mon Sep 17 00:00:00 2001 From: kungfumonk Date: Wed, 12 Apr 2017 10:18:13 -0400 Subject: [PATCH 1/3] Update Map.css Added 2 css class styles --- Map.css | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/Map.css b/Map.css index d302419..5f63d4c 100644 --- a/Map.css +++ b/Map.css @@ -6,7 +6,7 @@ margin: 10px 14px 10px 0px; } -#airport-settings #setting-name { +#airport-settings #setting-headers { width: 128px; float: left; border-right: 1px solid black; @@ -41,4 +41,17 @@ vertical-align: text-bottom; font-size: 32px; font-weight: bold; -} \ No newline at end of file +} + +.tooltip-picture { + display:inline-block; + vertical-align:middle; + padding-right: 2px; +} + +.tooltip-content { + display: inline-block; + vertical-align: middle; + padding-left: 2px; + text-align: center; +} From c3894ba15708db311272032e0b5ee460fe5df7d3 Mon Sep 17 00:00:00 2001 From: kungfumonk Date: Wed, 12 Apr 2017 10:23:41 -0400 Subject: [PATCH 2/3] Update Map.html Added my GoogleAPI key and included Place library. Fixed a id duplication --- Map.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/Map.html b/Map.html index 71eb341..4be9262 100644 --- a/Map.html +++ b/Map.html @@ -4,7 +4,7 @@ Map Sample - + @@ -69,7 +69,7 @@

LLamasoft Map Exercise
-
+
Code
City
State
@@ -88,4 +88,4 @@

LLamasoft Map Exercise

- \ No newline at end of file + From da07c034083018875942bc4cd572ddf274fc4c8a Mon Sep 17 00:00:00 2001 From: kungfumonk Date: Wed, 12 Apr 2017 10:39:06 -0400 Subject: [PATCH 3/3] Update Map.js Made the following changes: - Fill in the rest of the data in the table when a user selects an airport. - Allow a user to remove a marker - *double click the marker - Sort the list so it is easier to find airports - Resolved streamlining data issue by adding an info window inside of the map. - When you selected multiple items it had the possibility to infinitely increase the array. I took care of that by checking if it was in the array before adding the marker. - When a user selects a location it now centers on that location so they do not need to scroll and try to find it. Interesting things I noticed: I have never worked with Google Maps API, so I found this whole demo to be fun. Suggestions for improvements: Add a feature to add markers that are not in the static data. I ended up doing a little extra by adding pictures of the airports. I actually ended up doing that first before I read the instructions just because I was curious about the API. --- Map.js | 171 +++++++++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 130 insertions(+), 41 deletions(-) diff --git a/Map.js b/Map.js index f0a7b14..45d0cbc 100644 --- a/Map.js +++ b/Map.js @@ -1,65 +1,154 @@ var globalMap; +var globalMarkers = []; +var curMarker; +var curSite; +var infowindow; -$(function() { +$(function () { + var MapFcns = { + loadSiteList: function () { + sites.sort(function(a, b){ + if (a.Code < b.Code) return -1; + if (a.Code > b.Code) return 1; + return 0; + }); -var MapFcns = { - loadSiteList: function () { - var airportList = $('#airport-list'); + var airportList = $('#airport-list'); airportList.html(''); airportList.append(''); - for (var i in sites) { - var newOption = $(''); - airportList.append(newOption); - } - }, - - siteListChange: function() { - var ctl = $(this), - airportCode = ctl.val(); - if(airportCode) { - var currAirport = _.findWhere(sites, {Code: airportCode}); + for (var i in sites) { + var newOption = $(''); + airportList.append(newOption); + } + }, + + siteListChange: function () { + var ctl = $(this), + airportCode = ctl.val(); + if (airportCode) { + var currAirport = _.findWhere(sites, { Code: airportCode }); $('#setting-code').text(currAirport.Code); $('#setting-city').text(currAirport.City); - + $('#setting-state').text(currAirport.State); + $('#setting-name').text(String(currAirport.FullSiteName).substring(12, currAirport.FullSiteName.length)); + $('#setting-lat').text(currAirport.Latitude); + $('#setting-long').text(currAirport.Longitude); + var marker = new google.maps.Marker({ - position: {lat: currAirport.Latitude, lng: currAirport.Longitude}, + position: { lat: currAirport.Latitude, lng: currAirport.Longitude }, map: globalMap, title: currAirport.Code }); + + //center the map on the selected airport + globalMap.setCenter(marker.position); + + //Event listener for Mouseover/Hover Over + marker.addListener('mouseover', function (event) { + //set the current values + curMarker = this; + curSite = currAirport; + + //ensure no infowindows are open + infowindow.close(); + + //get picture for airport + var coordinates = new google.maps.LatLng(currAirport.Latitude, currAirport.Longitude); + var service = new google.maps.places.PlacesService(globalMap); + + //create the request for textSearch + var request = { + location: new google.maps.LatLng(currAirport.Latitude, currAirport.Longitude), + radius: '500', + query: currAirport.Code + ' AIRPORT' + }; + + //use a textSearch to get the picture and set the tooltip/infowindow + service.textSearch(request, getPictureCallback); + + }); + + //Event for MouseOut + marker.addListener('mouseout', function (event) { + if (infowindow != null) { + infowindow.close(); + infowindow.setContent(""); + } + }); + + //Event Listener for double click - clears the marker + marker.addListener('dblclick', function (event) { + marker.setMap(null); + }); + + //check if this airport is already a marker + var alreadyMarker = false; + for (var i = 0; i < globalMarkers.length; i++) { + if (marker.title == globalMarkers[i].title) { + alreadyMarker = true; + break; + } + } + if (!alreadyMarker) { + globalMarkers.push(marker); + } } + } } -} + //Callback for textSearch + function getPictureCallback(results, status) { + if (status == google.maps.places.PlacesServiceStatus.OK) { + //get the picture of the airport + var pictureUrl = ""; + if (results[0].photos != null && results[0].photos.length > 0) { + pictureUrl = results[0].photos[0].getUrl({ 'maxWidth': 120, 'maxHeight': 120 }); + } + + //set the infowindow information + htmlInfo = "
"; + htmlInfo += "
" + String(curSite.FullSiteName).substring(12, curSite.FullSiteName.length) + "
"; + htmlInfo += curSite.City + ", " + curSite.State + "
"; + htmlInfo += curSite.Latitude + ", " + curSite.Longitude + "
"; + htmlInfo += "
"; + + infowindow.setContent(htmlInfo); + infowindow.open(globalMap, curMarker); -MapFcns.loadSiteList(); -$('#airport-list').change(MapFcns.siteListChange); -$('#exercise-toggle').click(function() { - var toggleCtl = $(this), - toggleVal = toggleCtl.text(); - if (toggleVal == '-') { - toggleCtl.text('+'); - $('#exercise-instructions').hide(); - } else { - toggleCtl.text('-'); - $('#exercise-instructions').show(); + } } -}); -}); + MapFcns.loadSiteList(); + $('#airport-list').change(MapFcns.siteListChange); + $('#exercise-toggle').click(function () { + var toggleCtl = $(this), + toggleVal = toggleCtl.text(); + if (toggleVal == '-') { + toggleCtl.text('+'); + $('#exercise-instructions').hide(); + } else { + toggleCtl.text('-'); + $('#exercise-instructions').show(); + } + }); +}); +function initMap() { + // Callback function to create a map object and specify the DOM element for display. + globalMap = new google.maps.Map(document.getElementById('airport-map'), { + center: { lat: 42.2814, lng: -83.7483 }, + scrollwheel: true, + zoom: 6 + }); + infowindow = new google.maps.InfoWindow({ + maxWidth: 400, + infoBoxClearance: new google.maps.Size(1, 1), + disableAutoPan: false + }); - -function initMap() { - // Callback function to create a map object and specify the DOM element for display. - globalMap = new google.maps.Map(document.getElementById('airport-map'), { - center: {lat: 42.2814, lng: -83.7483}, - scrollwheel: true, - zoom: 6 - }); - - } \ No newline at end of file +}