diff --git a/app/scripts/early_voting_mgr.js b/app/scripts/early_voting_mgr.js index eb13365..6622e80 100644 --- a/app/scripts/early_voting_mgr.js +++ b/app/scripts/early_voting_mgr.js @@ -52,7 +52,8 @@ define( $el.find('#early-voting-sidebar').html(ejs.render(earlyVotingSidebarTmpl, { moment: moment, locations: earlyVotingLocations, - getDirections: getDirections + getDirections: getDirections, + earlyPollingMarkers: mapService.getEarlyPollingMarkers() })); listenToSidebarEvents(); diff --git a/app/scripts/map_service.js b/app/scripts/map_service.js index b6c14f5..5755bd6 100644 --- a/app/scripts/map_service.js +++ b/app/scripts/map_service.js @@ -1,8 +1,8 @@ define(['json!vendor/EARLY_VOTING_AddressPoints.geojson'], function(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; @@ -34,6 +34,7 @@ define(['json!vendor/EARLY_VOTING_AddressPoints.geojson'], } + var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; var earlyPollingMarkers = []; @@ -52,9 +53,13 @@ define(['json!vendor/EARLY_VOTING_AddressPoints.geojson'], } function createEarlyPollingMarkers() { + + var labelIndex = 0; earlyPollingLocations.forEach(function(poll, index) { var earlyVotingMarker = new google.maps.Marker({ - position: poll.getGeometry().get() + position: poll.getGeometry().get(), + label: labels[labelIndex++ % labels.length], + animation: google.maps.Animation.DROP }); earlyVotingMarker.addListener('click', function() { fireMarkerEvent('click', earlyVotingMarker); @@ -140,10 +145,17 @@ define(['json!vendor/EARLY_VOTING_AddressPoints.geojson'], changeMarkerColor:function(index, color) { + var defaultState = "background: url("+defaultIcon+") no-repeat;height:40px;"; + var hoverState = "background: url("+hoverIcon+") no-repeat;height:40px;"; + if (color === "hover") { - earlyPollingMarkers[index].setIcon(hoverIcon); + earlyPollingMarkers[index].setIcon( hoverIcon ); + earlyPollingMarkers[index].setLabel(""); + document.getElementById('marker_'+index).setAttribute('style', hoverState); } else if (color === "default") { - earlyPollingMarkers[index].setIcon(defaultIcon); + earlyPollingMarkers[index].setIcon(); + earlyPollingMarkers[index].setLabel(labels[index]); + document.getElementById('marker_'+index).setAttribute('style', defaultState); } }, @@ -165,6 +177,10 @@ define(['json!vendor/EARLY_VOTING_AddressPoints.geojson'], subscribeToMarkerEvents: function(cb) { markerEventListeners.push(cb); }, + + getEarlyPollingMarkers: function() { + return earlyPollingMarkers; + }, displayNewPollingPlace: function(latLng, destination, precinct, successCallback, errorCallback) { diff --git a/app/scripts/templates/early_voting_sidebar.ejs b/app/scripts/templates/early_voting_sidebar.ejs index 1152e48..587749f 100644 --- a/app/scripts/templates/early_voting_sidebar.ejs +++ b/app/scripts/templates/early_voting_sidebar.ejs @@ -1,5 +1,15 @@ <% locations.forEach(function(location, i) { %>
+
+   + <%= ""+earlyPollingMarkers[i].label %> +