Skip to content

Instantly share code, notes, and snippets.

@vsakaria
Created October 19, 2015 09:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save vsakaria/e7d66e2fe8c99b0d38c5 to your computer and use it in GitHub Desktop.
Save vsakaria/e7d66e2fe8c99b0d38c5 to your computer and use it in GitHub Desktop.
var Backbone = require('backbone');
var Marionette = require('backbone.marionette');
var _ = require('underscore');
var mapTemplate = require('../templates/map.hbs');
var getThemeAssets = require('../../../../helpers/getThemeAssets');
var productsListChannel = Backbone.Wreqr.radio.channel('productsList');
var MapView = Marionette.ItemView.extend({
template: mapTemplate,
className: 'results-map',
initialize: function (options) {
var themeAssets = getThemeAssets();
this.markersPaged = [];
this.mapIcons = this.getMapIcons(themeAssets);
},
getMapIcons: function (themeAssets) {
return {
regular: themeAssets.markers.regular,
highlighted: themeAssets.markers.highlighted,
regularSelected: themeAssets.markers.regularSelected,
highlightedSelected: themeAssets.markers.highlightedSelected,
cluster1: themeAssets.markers.cluster1,
cluster2: themeAssets.markers.cluster2,
cluster3: themeAssets.markers.cluster3
};
},
onRender: function () {
this.renderMap();
this.renderMarkers(this.model.attributes);
},
renderMarkers: function (markers) {
this.bounds = this.createBounds();
if (this.model.get('cluster')) {
this.markerClusterer = this.createMarkerClusterer(this.map, {
maxZoom: 15,
styles: [{
textColor: 'white',
url: this.mapIcons.cluster1,
height: 28,
width: 28
}, {
textColor: 'white',
url: this.mapIcons.cluster2,
height: 33,
width: 33
}, {
textColor: 'white',
url: this.mapIcons.cluster3,
height: 39,
width: 39
}]
});
}
// nonListedHotelMarkers are those in the pagination (i.e. not in the list)
_.each(markers.listedHotelMarkers, this.displayHotelMarker, this);
_.each(markers.nonListedHotelMarkers, this.displayNonListedHotelMarker, this);
this.map.fitBounds(this.bounds);
},
createBounds: function () {
return new window.google.maps.LatLngBounds();
},
createMarkerClusterer: function (map, options) {
return new window.MarkerClusterer(map, [], options);
},
createPoint: function (coords) {
return new window.google.maps.LatLng(coords.latitude, coords.longitude);
},
displayHotelMarker: function (markerData) {
if (markerData.coordinates) {
var point = this.createPoint(markerData.coordinates);
var marker = this.addMarker(point, true, markerData.info.productId);
marker.addListener('click', this.triggerMapMarkerClickedEvent);
this.bindMarkerEvent(marker, markerData, true);
this.bounds.extend(point);
this.markersPaged.push({
marker: marker,
productId: markerData.info.productId
});
}
},
triggerMapMarkerClickedEvent: function () {
productsListChannel.commands.execute('mapMarker:click', { productId: this.productId });
},
displayNonListedHotelMarker: function (markerData) {
if (markerData.coordinates) {
var point = this.createPoint(markerData.coordinates);
var marker = this.addMarker(point, false);
this.bindMarkerEvent(marker, markerData, false);
if (typeof this.markerClusterer !== 'undefined') {
this.markerClusterer.addMarker(marker);
}
}
},
bindMarkerEvent: function (marker, data, shownInPage) {
google.maps.event.addListener(marker, 'click', _.bind(
this.markerClickEvent,
this,
marker,
data,
shownInPage
)
);
},
markerClickEvent: function (marker, data, shownInPage) {
var isMarkerHighlightedOrSelected,
icon;
if (this.markerSelected) {
isMarkerHighlightedOrSelected = this.markerSelected.icon === this.mapIcons.highlightedSelected ||
this.markerSelected.icon === this.mapIcons.highlighted;
icon = isMarkerHighlightedOrSelected ? this.mapIcons.highlighted : this.mapIcons.regular;
this.markerSelected.setIcon(icon);
}
this.markerSelected = marker;
marker.setIcon(shownInPage ? this.mapIcons.highlightedSelected : this.mapIcons.regularSelected);
},
addMarker: function (latLng, isAltIcon, productId) {
var icon = this.mapIcons.regular;
var altIcon = this.mapIcons.highlighted;
return this.createMarker({
position: latLng,
map: this.map,
title: '',
icon: isAltIcon ? altIcon : icon,
productId: productId
});
},
renderMap: function () {
var mapConfig = {
zoom: 14
};
this.map = this.createMap(this.$('.map-canvas')[0], mapConfig);
},
createMarker: function (options) {
return new window.google.maps.Marker(options);
},
createMap: function (element, options) {
return new window.google.maps.Map(element, options);
},
renderMarker: function (coordinates) {
var latLng = this.createPoint(coordinates.latitude, coordinates.longitude);
this.map.setCenter(latLng);
this.addMarker(latLng);
}
});
productsListChannel.reqres.setHandler('new:map:view', function (model) {
return new MapView({ model: model });
});
module.exports = MapView;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment