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);
}
/**