From e350a02ed245560792053b14430fb882c0a3487f Mon Sep 17 00:00:00 2001 From: Lucy Qin Date: Sat, 22 Oct 2016 18:39:28 -0400 Subject: [PATCH 1/6] added marker highlighting on sidebar hover --- app/scripts/early_voting_mgr.js | 19 +++++++++++++++++++ app/scripts/map_service.js | 13 +++++++++++++ 2 files changed, 32 insertions(+) diff --git a/app/scripts/early_voting_mgr.js b/app/scripts/early_voting_mgr.js index 4430000..352819b 100644 --- a/app/scripts/early_voting_mgr.js +++ b/app/scripts/early_voting_mgr.js @@ -32,6 +32,24 @@ define( } } + function listenToSidebarEvents() { + var sidebarDivs = $("#early-voting-sidebar").children(); + + sidebarDivs.each(function(i,sb) { + $(sb).mouseover(function() { + mapService.changeMarkerColor(i, "hover"); + }); + + $(sb).mouseout(function() { + + mapService.changeMarkerColor(i, "default"); + +// mapService.changeMarkerColor() + }); + }); + + } + return { init: function() { $el.find('#early-voting-sidebar').html(ejs.render(earlyVotingSidebarTmpl, { @@ -40,6 +58,7 @@ define( getDirections: getDirections })); + listenToSidebarEvents(); mapService.subscribeToMarkerEvents(whenMarkerEventsHappen); } } diff --git a/app/scripts/map_service.js b/app/scripts/map_service.js index 22f176f..9a1d002 100644 --- a/app/scripts/map_service.js +++ b/app/scripts/map_service.js @@ -2,6 +2,11 @@ define(['geojson', 'json!vendor/EARLY_VOTING_AddressPoints.geojson'], function(GeoJSON, earlyPollingJSON) { + + var hoverIcon = "https://mts.googleapis.com/maps/vt/icon/name=icons/spotlight/spotlight-waypoint-a.png&text=•&psize=30&font=fonts/Roboto-Regular.ttf&color=ff333333&ax=44&ay=48&scale=1" + var defaultIcon = "https://mts.googleapis.com/maps/vt/icon/name=icons/spotlight/spotlight-waypoint-b.png&text=•&psize=30&font=fonts/Roboto-Regular.ttf&color=ff333333&ax=44&ay=48&scale=1" + + var DEFAULT_ZOOM_LEVEL = 13; var DEFAULT_CENTER_POSITION = new google.maps.LatLng(42.3736, -71.1106); // Cambridge @@ -135,7 +140,15 @@ define(['geojson', for (var i = 0; i < earlyPollingMarkers.length; i++) { earlyPollingMarkers[i].setMap(map); } + }, + + changeMarkerColor:function(index, color) { + if (color === "hover") { + earlyPollingMarkers[index].setIcon(hoverIcon); + } else if (color === "default") { + earlyPollingMarkers[index].setIcon(defaultIcon); + } }, // Display previous user polling place From 138171a94642d60804aef0e52b9dba717874abcb Mon Sep 17 00:00:00 2001 From: Lucy Qin Date: Sat, 22 Oct 2016 18:48:03 -0400 Subject: [PATCH 2/6] cleaned up indenting --- app/scripts/early_voting_mgr.js | 3 - app/scripts/map_service.js | 270 ++++++++++++------------- app/scripts/polling_location_finder.js | 23 +-- 3 files changed, 136 insertions(+), 160 deletions(-) diff --git a/app/scripts/early_voting_mgr.js b/app/scripts/early_voting_mgr.js index 352819b..1a62ff9 100644 --- a/app/scripts/early_voting_mgr.js +++ b/app/scripts/early_voting_mgr.js @@ -41,10 +41,7 @@ define( }); $(sb).mouseout(function() { - mapService.changeMarkerColor(i, "default"); - -// mapService.changeMarkerColor() }); }); diff --git a/app/scripts/map_service.js b/app/scripts/map_service.js index 9a1d002..a654b2c 100644 --- a/app/scripts/map_service.js +++ b/app/scripts/map_service.js @@ -3,188 +3,180 @@ define(['geojson', function(GeoJSON, earlyPollingJSON) { - var hoverIcon = "https://mts.googleapis.com/maps/vt/icon/name=icons/spotlight/spotlight-waypoint-a.png&text=•&psize=30&font=fonts/Roboto-Regular.ttf&color=ff333333&ax=44&ay=48&scale=1" - var defaultIcon = "https://mts.googleapis.com/maps/vt/icon/name=icons/spotlight/spotlight-waypoint-b.png&text=•&psize=30&font=fonts/Roboto-Regular.ttf&color=ff333333&ax=44&ay=48&scale=1" + var hoverIcon = "https://mts.googleapis.com/maps/vt/icon/name=icons/spotlight/spotlight-waypoint-a.png&text=•&psize=30&font=fonts/Roboto-Regular.ttf&color=ff333333&ax=44&ay=48&scale=1" + var defaultIcon = "https://mts.googleapis.com/maps/vt/icon/name=icons/spotlight/spotlight-waypoint-b.png&text=•&psize=30&font=fonts/Roboto-Regular.ttf&color=ff333333&ax=44&ay=48&scale=1" - var DEFAULT_ZOOM_LEVEL = 13; - var DEFAULT_CENTER_POSITION = new google.maps.LatLng(42.3736, -71.1106); // Cambridge + var DEFAULT_ZOOM_LEVEL = 13; + var DEFAULT_CENTER_POSITION = new google.maps.LatLng(42.3736, -71.1106); // Cambridge - var earlyPollingLocations = new GeoJSON(earlyPollingJSON); + var earlyPollingLocations = new GeoJSON(earlyPollingJSON); - var map = new google.maps.Map(document.getElementById('map'), { - center: DEFAULT_CENTER_POSITION, - zoom: DEFAULT_ZOOM_LEVEL - }); - + var map = new google.maps.Map(document.getElementById('map'), { + center: DEFAULT_CENTER_POSITION, + zoom: DEFAULT_ZOOM_LEVEL + }); - var directionsService = new google.maps.DirectionsService(), - directionsDisplay = new google.maps.DirectionsRenderer({ - map: map, - preserveViewport: true, - panel: document.getElementById('directions') - }); - var markerEventListeners = []; + var directionsService = new google.maps.DirectionsService(), + directionsDisplay = new google.maps.DirectionsRenderer({ + map: map, + preserveViewport: true, + panel: document.getElementById('directions') + }); - var userInputs = { - "precinct": null, - "homeAddress": null, - "destination": null - } + var markerEventListeners = []; + var userInputs = { + "precinct": null, + "homeAddress": null, + "destination": null + } - var earlyPollingMarkers = []; + var earlyPollingMarkers = []; - function clearUserInputs() { - userInputs.precinct = null; - userInputs.homeAddress = null; - userInputs.destination = null; + function clearUserInputs() { + userInputs.precinct = null; + userInputs.homeAddress = null; + userInputs.destination = null; + } - } + function fireMarkerEvent(eventType, marker) { + markerEventListeners.forEach(function(cb) { + cb(eventType, marker); + }); + } - function fireMarkerEvent(eventType, marker) { - markerEventListeners.forEach(function(cb) { - cb(eventType, marker); + function createEarlyPollingMarkers() { + earlyPollingLocations.forEach(function(location) { + var earlyVotingMarker = new google.maps.Marker({ + position: location.position }); - } - - function createEarlyPollingMarkers() { - earlyPollingLocations.forEach(function(location) { - var earlyVotingMarker = new google.maps.Marker({ - position: location.position - }); - earlyVotingMarker.addListener('click', function() { - fireMarkerEvent('click', earlyVotingMarker); - }); - - earlyPollingMarkers.push(earlyVotingMarker); + earlyVotingMarker.addListener('click', function() { + fireMarkerEvent('click', earlyVotingMarker); }); - } - - function clearEarlyMarkers () { - - for (var i = 0; i < earlyPollingMarkers.length; i++) { - earlyPollingMarkers[i].setMap(null); - } - } - + earlyPollingMarkers.push(earlyVotingMarker); + }); + } - function clearPollingLocation() { - if (userInputs.precinct) { - userInputs.precinct.setMap(null); - } - directionsDisplay.setDirections({routes: []}); - - // TODO move UI interaction into its own module - $('.result').removeClass('success'); - $('#notice').removeClass('error').empty(); - $('#info .location, #info .notes').empty(); - $('#directions-link').removeAttr('href'); - } + function clearEarlyMarkers () { + earlyPollingMarkers.forEach(function(marker) { + marker.setMap(null); + }); + } - function getDirections(destination) { - var url; - if (navigator.userAgent.match(/iPhone|iPad|iPod/)) { - url = "http://maps.apple.com/?saddr=Current+Location&daddr="; - } else { - url = "https://maps.google.com/maps?daddr="; - } - return encodeURI(url + destination); + function clearPollingLocation() { + if (userInputs.precinct) { + userInputs.precinct.setMap(null); } - - function displayDirections(latLng, destination, successCallback, errorCallback) { - var request = { - origin: latLng, - destination: destination, - travelMode: google.maps.TravelMode.WALKING - }; - directionsService.route(request, function(result, status) { - if (status === google.maps.DirectionsStatus.OK) { - directionsDisplay.setDirections(result); - if(successCallback) { - successCallback({result: result, status: status}); - } - } else { - if(errorCallback) { - errorCallback({result: result, status: status}); - } - } - }); - - $('#directions-link').attr('href', getDirections(destination)); + directionsDisplay.setDirections({routes: []}); + + // TODO move UI interaction into its own module + $('.result').removeClass('success'); + $('#notice').removeClass('error').empty(); + $('#info .location, #info .notes').empty(); + $('#directions-link').removeAttr('href'); + } + + function getDirections(destination) { + var url; + if (navigator.userAgent.match(/iPhone|iPad|iPod/)) { + url = "http://maps.apple.com/?saddr=Current+Location&daddr="; + } else { + url = "https://maps.google.com/maps?daddr="; } + return encodeURI(url + destination); + } + + function displayDirections(latLng, destination, successCallback, errorCallback) { + var request = { + origin: latLng, + destination: destination, + travelMode: google.maps.TravelMode.WALKING + }; + directionsService.route(request, function(result, status) { + if (status === google.maps.DirectionsStatus.OK) { + directionsDisplay.setDirections(result); + if(successCallback) { + successCallback({result: result, status: status}); + } + } else { + if(errorCallback) { + errorCallback({result: result, status: status}); + } + } + }); + $('#directions-link').attr('href', getDirections(destination)); + } - return { - - displayEarlyPollingMarkers: function() { - - clearPollingLocation(); + return { - map.setCenter(DEFAULT_CENTER_POSITION); - map.setZoom(DEFAULT_ZOOM_LEVEL); + displayEarlyPollingMarkers: function() { - //clearPollingLocation(); - if (earlyPollingMarkers.length <= 0) { - createEarlyPollingMarkers(); - } + clearPollingLocation(); - for (var i = 0; i < earlyPollingMarkers.length; i++) { - earlyPollingMarkers[i].setMap(map); - } - }, + map.setCenter(DEFAULT_CENTER_POSITION); + map.setZoom(DEFAULT_ZOOM_LEVEL); + //clearPollingLocation(); + if (earlyPollingMarkers.length <= 0) { + createEarlyPollingMarkers(); + } - changeMarkerColor:function(index, color) { - if (color === "hover") { - earlyPollingMarkers[index].setIcon(hoverIcon); - } else if (color === "default") { - earlyPollingMarkers[index].setIcon(defaultIcon); - } - }, + for (var i = 0; i < earlyPollingMarkers.length; i++) { + earlyPollingMarkers[i].setMap(map); + } + }, - // Display previous user polling place - displayUserPollingPlace: function() { - clearEarlyMarkers(); + changeMarkerColor:function(index, color) { + if (color === "hover") { + earlyPollingMarkers[index].setIcon(hoverIcon); + } else if (color === "default") { + earlyPollingMarkers[index].setIcon(defaultIcon); + } + }, - if (userInputs.precinct && userInputs.homeAddress && userInputs.destination) { + // Display previous user polling place + displayUserPollingPlace: function() { - userInputs.precinct.setMap(map); - map.fitBounds(userInputs.precinct.getBounds()); - displayDirections(userInputs.homeAddress, userInputs.destination); + clearEarlyMarkers(); - } - }, + if (userInputs.precinct && userInputs.homeAddress && userInputs.destination) { + userInputs.precinct.setMap(map); + map.fitBounds(userInputs.precinct.getBounds()); + displayDirections(userInputs.homeAddress, userInputs.destination); + } + }, - subscribeToMarkerEvents: function(cb) { - markerEventListeners.push(cb); - }, + subscribeToMarkerEvents: function(cb) { + markerEventListeners.push(cb); + }, - displayNewPollingPlace: function(latLng, destination, precinct, successCallback, errorCallback) { + displayNewPollingPlace: function(latLng, destination, precinct, successCallback, errorCallback) { - clearEarlyMarkers(); - clearPollingLocation(); - clearUserInputs(); + clearEarlyMarkers(); + clearPollingLocation(); + clearUserInputs(); - userInputs.precinct = precinct; - userInputs.homeAddress = latLng; - userInputs.destination = destination; + userInputs.precinct = precinct; + userInputs.homeAddress = latLng; + userInputs.destination = destination; - userInputs.precinct.setMap(map); - map.fitBounds(userInputs.precinct.getBounds()); + userInputs.precinct.setMap(map); + map.fitBounds(userInputs.precinct.getBounds()); - displayDirections(latLng, destination, successCallback, errorCallback); + displayDirections(latLng, destination, successCallback, errorCallback); - }, - }; + }, + }; }); diff --git a/app/scripts/polling_location_finder.js b/app/scripts/polling_location_finder.js index 63b7a43..189d737 100644 --- a/app/scripts/polling_location_finder.js +++ b/app/scripts/polling_location_finder.js @@ -1,21 +1,13 @@ -define(['jquery', 'geojson', - 'json!vendor/ELECTIONS_WardsPrecincts.geojson', +define(['jquery', 'geojson', + 'json!vendor/ELECTIONS_WardsPrecincts.geojson', 'json!vendor/ELECTIONS_PollingLocations.geojson', - 'map_service'], + 'map_service'], function($, GeoJSON, precinctsJSON, locationsJSON, mapService) { - + 'use strict'; var precincts = new GeoJSON(precinctsJSON), pollingLocations = new GeoJSON(locationsJSON); - - - // function showResults() { - // $('.voting-result').show(); - // } - - // // keep track of user precinct across calls so we can erase previous precincts if necessary - // var userPrecinct; function getUserPrecinct(latLng) { @@ -64,9 +56,7 @@ define(['jquery', 'geojson', } else { var pollingLocation = getPollingLocation(userPrecinct); $('.result').addClass('success'); - // showResults(); - // highlight the precinct on the map - + var destination = pollingLocation.geojsonProperties.Address + ', Cambridge, MA'; mapService.displayNewPollingPlace(latLng, destination, userPrecinct, successCallback, errorCallback); // userPrecinct.setMap(map); @@ -76,9 +66,6 @@ define(['jquery', 'geojson', $('#info .location').text(pollingLocation.geojsonProperties.LOCATION); $('#info .notes').text(pollingLocation.geojsonProperties.LOCATION_NOTE); - - - // show step-by-step directions } }; }); From 86543192651790c65d33ff894a891a286a37c900 Mon Sep 17 00:00:00 2001 From: Lucy Qin Date: Mon, 24 Oct 2016 22:31:44 -0400 Subject: [PATCH 3/6] marker changes color on hover --- app/scripts/map_service.js | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/app/scripts/map_service.js b/app/scripts/map_service.js index a654b2c..79901da 100644 --- a/app/scripts/map_service.js +++ b/app/scripts/map_service.js @@ -53,14 +53,22 @@ define(['geojson', function createEarlyPollingMarkers() { earlyPollingLocations.forEach(function(location) { - var earlyVotingMarker = new google.maps.Marker({ + var marker = new google.maps.Marker({ position: location.position }); - earlyVotingMarker.addListener('click', function() { - fireMarkerEvent('click', earlyVotingMarker); + marker.addListener('click', function() { + fireMarkerEvent('click', marker); }); - earlyPollingMarkers.push(earlyVotingMarker); + marker.addListener('mouseover', function() { + marker.setIcon(hoverIcon); + }); + + marker.addListener('mouseout', function() { + marker.setIcon(defaultIcon); + }); + + earlyPollingMarkers.push(marker); }); } From 2ee1a2c8c3b3f1ceecca0de03dde97acec0d562d Mon Sep 17 00:00:00 2001 From: Lucy Qin Date: Tue, 25 Oct 2016 20:53:32 -0400 Subject: [PATCH 4/6] expands div on marker click --- app/scripts/app.js | 5 ----- app/scripts/early_voting_mgr.js | 7 +++++++ app/scripts/polling_location_finder.js | 2 -- app/scripts/templates/early_voting_sidebar.ejs | 2 +- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/app/scripts/app.js b/app/scripts/app.js index c2bd820..3e34698 100644 --- a/app/scripts/app.js +++ b/app/scripts/app.js @@ -8,7 +8,6 @@ require.config({ bootstrapCarousel: '../bower_components/bootstrap-sass/assets/javascripts/bootstrap/carousel', bootstrapCollapse: '../bower_components/bootstrap-sass/assets/javascripts/bootstrap/collapse', bootstrapDropdown: '../bower_components/bootstrap-sass/assets/javascripts/bootstrap/dropdown', - bootstrapModal: '../bower_components/bootstrap-sass/assets/javascripts/bootstrap/modal', bootstrapPopover: '../bower_components/bootstrap-sass/assets/javascripts/bootstrap/popover', bootstrapScrollspy: '../bower_components/bootstrap-sass/assets/javascripts/bootstrap/scrollspy', bootstrapTab: '../bower_components/bootstrap-sass/assets/javascripts/bootstrap/tab', @@ -40,9 +39,6 @@ require.config({ bootstrapDropdown: { deps: ['jquery'] }, - bootstrapModal: { - deps: ['jquery', 'bootstrapTransition'] - }, bootstrapPopover: { deps: ['jquery', 'bootstrapTooltip'] }, @@ -189,7 +185,6 @@ require(['jquery', var link = $('').text(result.formatted_address).data('location', result.geometry.location).on('click', addressClickHandler); $('
  • ').append(link).appendTo($ul); } - $('.modal').modal('hide'); } } diff --git a/app/scripts/early_voting_mgr.js b/app/scripts/early_voting_mgr.js index 071b0f5..69208eb 100644 --- a/app/scripts/early_voting_mgr.js +++ b/app/scripts/early_voting_mgr.js @@ -25,7 +25,14 @@ define( function whenMarkerEventsHappen(eventType, marker) { if (eventType === 'click') { for (var i = 0; i < earlyVotingLocations.length; i++) { + if (marker.getPosition().equals(earlyVotingLocations[i].getPosition())) { + var collapsedToggle = Boolean(document.getElementById('#collapse-toggle'+i).getAttribute("aria-expanded")); + + if (collapsedToggle) { + $('#collapse'+i).collapse('show'); + } + $el.scrollTo($('#location'+i), 800); } } diff --git a/app/scripts/polling_location_finder.js b/app/scripts/polling_location_finder.js index 189d737..94ea20d 100644 --- a/app/scripts/polling_location_finder.js +++ b/app/scripts/polling_location_finder.js @@ -59,8 +59,6 @@ define(['jquery', 'geojson', var destination = pollingLocation.geojsonProperties.Address + ', Cambridge, MA'; mapService.displayNewPollingPlace(latLng, destination, userPrecinct, successCallback, errorCallback); - // userPrecinct.setMap(map); - // map.fitBounds(userPrecinct.getBounds()); // display location notes $('#info .location').text(pollingLocation.geojsonProperties.LOCATION); diff --git a/app/scripts/templates/early_voting_sidebar.ejs b/app/scripts/templates/early_voting_sidebar.ejs index 4fcfdd6..01848dc 100644 --- a/app/scripts/templates/early_voting_sidebar.ejs +++ b/app/scripts/templates/early_voting_sidebar.ejs @@ -2,7 +2,7 @@