diff --git a/src/app/scripts/cac/control/cac-control-explore.js b/src/app/scripts/cac/control/cac-control-explore.js index 66c5359f1..6be4eff40 100644 --- a/src/app/scripts/cac/control/cac-control-explore.js +++ b/src/app/scripts/cac/control/cac-control-explore.js @@ -405,7 +405,7 @@ CAC.Control.Explore = (function (_, $, MapTemplates, HomeTemplates, Places, Rout if (tabControl.isTabShowing(tabControl.TABS.EXPLORE) && mapControl.isLoaded()) { // allDestinations has been loaded by now mapControl.isochroneControl.drawDestinations(filterPlacesCategory(allDestinations), - destinations); + isochroneDestinationIds); } showPlacesContent(); } @@ -455,8 +455,8 @@ CAC.Control.Explore = (function (_, $, MapTemplates, HomeTemplates, Places, Rout // Include events or tours with any matching destinations. return filterPlacesCategory(_.filter(places, function(place) { const destinationIds = place.destinations ? - _.flatMap(place.destinations, 'id') : [place.placeID]; - return _.intersection(isochroneDestinationIds, destinationIds); + _.flatMap(place.destinations, 'id') : [place.id]; + return _.intersection(isochroneDestinationIds, destinationIds).length; })); } diff --git a/src/app/scripts/cac/home/cac-home-templates.js b/src/app/scripts/cac/home/cac-home-templates.js index 464c8b9d2..b0bd55014 100644 --- a/src/app/scripts/cac/home/cac-home-templates.js +++ b/src/app/scripts/cac/home/cac-home-templates.js @@ -90,6 +90,20 @@ CAC.Home.Templates = (function (Handlebars, moment) { Handlebars.registerPartial('filterDropdown', filterDropdownTemplate); Handlebars.registerHelper('filterPartial', filterPartial); + // helper to get the identifier for a home page card for a place, event, or tour + Handlebars.registerHelper('cardId', function(isEvent, isTour, id) { + var prefix = isEvent ? 'event' : (isTour ? 'tour' : 'place'); + return prefix + '_' + id; + }); + + // helper to get the IDs for all associated destinations, + // for tours or events, or for this destination + Handlebars.registerHelper('placeIds', function(destinations, id) { + var placeIds = (destinations && destinations.length) ? + _.map(destinations, 'id') : [id]; + return JSON.stringify(placeIds); + }); + // date/time formatting helpers for events Handlebars.registerHelper('eventDate', function(dateTime) { var dt = moment(dateTime); // get ISO string @@ -117,7 +131,8 @@ CAC.Home.Templates = (function (Handlebars, moment) { '{{#each destinations}}', '
  • ', '
    ', @@ -166,7 +181,8 @@ CAC.Home.Templates = (function (Handlebars, moment) { '
    ', '{{#if this.placeID}}', 'Directions', '{{/if}}', ' -1; + destinations[destination.id] = destination; var point = _.property('point')(destination); point.properties = _.omit(destination, 'point'); - - // set matched property to true if destination is within isochrone - point.properties.matched = _.findIndex(matched, function(match) { - return match.placeID && (match.placeID === destination.placeID); - }) > -1; + point.properties.matched = !!destination.matched return point; }).value(); + destinationMarkers = {}; destinationsLayer = cartodb.L.geoJson(locationGeoJSON, { pointToLayer: function (geojson, latLng) { @@ -250,18 +253,19 @@ CAC.Map.IsochroneControl = (function ($, Handlebars, cartodb, L, turf, _) { 'href="{{geojson.properties.website_url}}" ', 'target="_blank">Visit website', 'Get Directions

    ' ].join(''); var template = Handlebars.compile(popupTemplate); var popupContent = template({geojson: geojson}); - var markerId = geojson.properties.id + '_' + geojson.properties.placeID; + var markerId = geojson.properties.id; // use a different icon for places outside of the travel than those within it var useIcon = geojson.properties.matched ? destinationIcon: destinationOutsideTravelshedIcon; var marker = new cartodb.L.marker(latLng, {icon: useIcon}) .bindPopup(popupContent, {className: options.selectors.poiPopupClassName}); + marker.matched = geojson.properties.matched; destinationMarkers[markerId] = { marker: marker, destination: destinations[markerId] @@ -281,25 +285,37 @@ CAC.Map.IsochroneControl = (function ($, Handlebars, cartodb, L, turf, _) { }).addTo(map); } - function highlightDestination(destinationId, opts) { + function highlightDestinations(destinationIds, opts) { var defaults = { panTo: false }; + var highlightOpts = $.extend({}, defaults, opts); - if (!destinationId || !destinationMarkers[destinationId]) { - // revert to original marker if set - if (lastHighlightedMarker) { - lastHighlightedMarker.setIcon(destinationIcon); - } + + // If passed no destinations to highlight, un-highlight instead + if ((!destinationIds || !destinationIds.length) && lastHighlightedMarkers) { + _.each(lastHighlightedMarkers, function(marker) { + var icon = marker.matched ? destinationIcon: + destinationOutsideTravelshedIcon; + marker.setIcon(icon); + }); + lastHighlightedMarkers = null; return; } - // Update icon for passed destination - var marker = destinationMarkers[destinationId].marker; - marker.setIcon(highlightIcon); - if (highlightOpts.panTo) { - map.panTo(marker.getLatLng()); + // Update icons for passed destinations + lastHighlightedMarkers = []; + _.each(destinationIds, function(placeId) { + var marker = destinationMarkers[placeId]; + if (marker) { + marker = marker.marker; + marker.setIcon(highlightIcon); + lastHighlightedMarkers.push(marker); + } + }); + // pan to the first destination of those passed, if panning option set + if (highlightOpts.panTo && lastHighlightedMarkers.length) { + map.panTo(lastHighlightedMarkers[0].getLatLng()); } - lastHighlightedMarker = marker; } function clearDestinations() { diff --git a/src/app/scripts/cac/pages/cac-pages-home.js b/src/app/scripts/cac/pages/cac-pages-home.js index e9299e071..84e0d9d73 100644 --- a/src/app/scripts/cac/pages/cac-pages-home.js +++ b/src/app/scripts/cac/pages/cac-pages-home.js @@ -387,23 +387,25 @@ CAC.Pages.Home = (function ($, FilterOptions, ModeOptions, MapControl, TripOpti if (!mapControl || !mapControl.isochroneControl) { return; } - var placeId = $(event.target).closest(options.selectors.placeCard).data('destination-id'); - mapControl.isochroneControl.highlightDestination(placeId, { panTo: true }); + var placeCard = $(event.target).closest(options.selectors.placeCard); + var placeIds = placeCard.data('destination-places'); + mapControl.isochroneControl.highlightDestinations([placeId], { panTo: true }); } function onPlaceHovered(event) { if (!mapControl || !mapControl.isochroneControl) { return; } - var placeId = $(event.target).closest(options.selectors.placeCard).data('destination-id'); - mapControl.isochroneControl.highlightDestination(placeId); + var placeCard = $(event.target).closest(options.selectors.placeCard); + var placeIds = placeCard.data('destination-places'); + mapControl.isochroneControl.highlightDestinations(placeIds); } function onPlaceBlurred() { if (!mapControl || !mapControl.isochroneControl) { return; } - mapControl.isochroneControl.highlightDestination(null); + mapControl.isochroneControl.highlightDestinations(null); } /**