291 lines
15 KiB
JavaScript
291 lines
15 KiB
JavaScript
define(['jquery', 'underscore', 'backbone', 'text!modules/maps/mapsViewTemplate.html', 'text!modules/maps/infoWindowTemplate.html', 'modules/base/baseView', 'classes/profile'],
|
||
function ($, _, Backbone, mapsViewTemplate, infoWindowTemplate, BaseView, Profile) {
|
||
|
||
var MapsView = BaseView.extend({
|
||
|
||
map: null,
|
||
markers: [],
|
||
openedInfoWindows: [],
|
||
markerClicked: false,
|
||
//initialize template
|
||
template: _.template(mapsViewTemplate),
|
||
infoWindowtemplate: _.template(infoWindowTemplate),
|
||
defaultLatLng: new google.maps.LatLng(45.4654219, 9.1859243), // Default to Milan
|
||
iconPM: {
|
||
url: "http://app.gruppolapastamadre.it/icon.png",
|
||
scaledSize: new google.maps.Size(24, 24)
|
||
},
|
||
iconPMGF: {
|
||
url: "http://app.gruppolapastamadre.it/iconGreen.png",
|
||
scaledSize: new google.maps.Size(24, 24)
|
||
},
|
||
initialize: function () {
|
||
this.id = "MapsView";
|
||
this.markers = [];
|
||
MapsView.__super__.initialize.call(this);
|
||
},
|
||
_centerControl: function(controlDiv, map) {
|
||
var self = this;
|
||
// Set CSS for the control border.
|
||
var controlUI = document.createElement('div');
|
||
controlUI.style.backgroundColor = '#fff';
|
||
controlUI.style.border = '2px solid #fff';
|
||
controlUI.style.borderRadius = '3px';
|
||
controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
|
||
controlUI.style.cursor = 'pointer';
|
||
controlUI.style.marginTop = '10px';
|
||
controlUI.style.marginLeft = '15px';
|
||
controlUI.style.textAlign = 'center';
|
||
controlUI.title = 'Click to recenter the map';
|
||
controlDiv.appendChild(controlUI);
|
||
|
||
// Set CSS for the control interior.
|
||
var controlText = document.createElement('div');
|
||
controlText.style.color = 'rgb(25,25,25)';
|
||
controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
|
||
controlText.style.fontSize = '16px';
|
||
//controlText.style.lineHeight = '32px';
|
||
controlText.style.padding = '4px';
|
||
// controlText.style.paddingRight = '5px';
|
||
controlText.innerHTML = 'Mia Posizione';
|
||
controlUI.appendChild(controlText);
|
||
|
||
// Setup the click event listeners: simply set the map to Chicago.
|
||
controlUI.addEventListener('click', function() {
|
||
if ( navigator.geolocation ) {
|
||
function success(pos) {
|
||
// Location found, show map with these coordinates
|
||
self.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
|
||
}
|
||
function fail(error) {
|
||
self.map.setCenter(self.defaultLatLng); // Failed to find location, show default map
|
||
}
|
||
// Find the users current position. Cache the location for 5 minutes, timeout after 6 seconds
|
||
navigator.geolocation.getCurrentPosition(success, fail, {maximumAge: 500000, enableHighAccuracy:true, timeout: 6000});
|
||
} else {
|
||
self.map.setCenter(self.defaultLatLng); // Failed to find location, show default map
|
||
}
|
||
|
||
});
|
||
},
|
||
_drawMap: function(LatLng){
|
||
var self = this;
|
||
var myOptions = {
|
||
zoom: 10,
|
||
center: LatLng,
|
||
mapTypeId: google.maps.MapTypeId.ROADMAP,
|
||
streetViewControl: false,
|
||
mapTypeControl: false,
|
||
zoomControlOptions: {
|
||
position: google.maps.ControlPosition.RIGHT_CENTER
|
||
}
|
||
};
|
||
self.$el.find("#map-canvas").width(document.documentElement.clientWidth - 32/*Padding content*/);
|
||
self.$el.find("#map-canvas").height(document.documentElement.clientHeight - 151 - self.$el.find('#searchPanel').height());
|
||
self.map = new google.maps.Map(self.$el.find("#map-canvas")[0], myOptions);
|
||
|
||
self.map.addListener("dragend", function(){
|
||
self.markerClicked = true;
|
||
});
|
||
|
||
// Create the search box and link it to the UI element.
|
||
var input = $('<input id="pac-input" data-role="none" class="controls" type="text" placeholder="Ricerca località..." style="display:none;">')[0];
|
||
self.$el.find('div[data-role="content"]')[0].appendChild(input);
|
||
var searchBox = new google.maps.places.SearchBox(input);
|
||
self.map.controls[google.maps.ControlPosition.TOP_CENTER].push(input);
|
||
var centerControlDiv = document.createElement('div');
|
||
var centerControl = self._centerControl(centerControlDiv, self.map);
|
||
|
||
//centerControlDiv.index = 4;
|
||
self.map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(centerControlDiv);
|
||
var markers = [];
|
||
// [START region_getplaces]
|
||
// Listen for the event fired when the user selects a prediction and retrieve
|
||
// more details for that place.
|
||
searchBox.addListener('places_changed', function() {
|
||
var places = searchBox.getPlaces();
|
||
|
||
if (places.length == 0) {
|
||
return;
|
||
}
|
||
|
||
// Clear out the old markers.
|
||
markers.forEach(function(marker) {
|
||
marker.setMap(null);
|
||
});
|
||
markers = [];
|
||
|
||
// For each place, get the icon, name and location.
|
||
var bounds = new google.maps.LatLngBounds();
|
||
places.forEach(function(place) {
|
||
var icon = {
|
||
url: place.icon,
|
||
size: new google.maps.Size(71, 71),
|
||
origin: new google.maps.Point(0, 0),
|
||
anchor: new google.maps.Point(17, 34),
|
||
scaledSize: new google.maps.Size(25, 25)
|
||
};
|
||
|
||
// Create a marker for each place.
|
||
markers.push(new google.maps.Marker({
|
||
map: self.map,
|
||
icon: icon,
|
||
title: unescape(place.name),
|
||
position: place.geometry.location
|
||
}));
|
||
|
||
if (place.geometry.viewport) {
|
||
// Only geocodes have viewport.
|
||
bounds.union(place.geometry.viewport);
|
||
} else {
|
||
bounds.extend(place.geometry.location);
|
||
}
|
||
});
|
||
self.map.fitBounds(bounds);
|
||
});
|
||
|
||
self.map.addListener('bounds_changed', function() {
|
||
var bound = self.map.getBounds();
|
||
searchBox.setBounds(bound);
|
||
});
|
||
$("#pac-input").show();
|
||
|
||
var markersArray = [];
|
||
var latLngFrom = new google.maps.LatLng(85, -180);
|
||
var latLngTo = new google.maps.LatLng(-85, 180);
|
||
$.ajax({
|
||
url: myManifest.Settings.DefaultURL + "/api/spacciatori/bound/" + latLngFrom.lat() + "/"+ latLngFrom.lng() + "/" + latLngTo.lat() + "/"+ latLngTo.lng(),
|
||
//dataType: "json",
|
||
//async: false,
|
||
type: 'GET',
|
||
success: function (resp) {
|
||
resp.forEach(function(ele, index){
|
||
var key = "|" + ele.Latitudine+ "|" + ele.Longitudine+ "|";
|
||
if(!self.markers[key])
|
||
{
|
||
markersArray.push(self._makeMarker(ele, key));
|
||
}
|
||
else if(!self.markers[key][ele.ID])
|
||
{
|
||
ele.Latitudine = parseFloat(ele.Latitudine) + (Math.random() / 500);
|
||
ele.Longitudine = parseFloat(ele.Longitudine) + (Math.random() / 500);
|
||
markersArray.push(self._makeMarker(ele, key));
|
||
}
|
||
});
|
||
|
||
markerClusterer = new MarkerClusterer(self.map, markersArray, {
|
||
maxZoom: 15
|
||
// ,styles: {
|
||
// url: '../images/pin.png',
|
||
// height: 48,
|
||
// width: 30,
|
||
// anchor: [-18, 0],
|
||
// textColor: '#ffffff',
|
||
// textSize: 10,
|
||
// iconAnchor: [15, 48]
|
||
// }
|
||
});
|
||
}
|
||
});
|
||
},
|
||
_makeMarker: function(ele,key){
|
||
var self = this;
|
||
var marker = new google.maps.Marker({
|
||
position: new google.maps.LatLng(ele.Latitudine, ele.Longitudine),
|
||
icon: ele.TipoPM == "4"?self.iconPMGF:self.iconPM,
|
||
//label: ele.Name,
|
||
title: $("<div/>").html(unescape(ele.Name)).text(),
|
||
//map: self.map
|
||
});
|
||
|
||
if(!self.markers[key])
|
||
self.markers[key] = [];
|
||
|
||
self.markers[key][ele.ID] = marker;
|
||
|
||
var infowindow = new google.maps.InfoWindow({
|
||
content: self.infoWindowtemplate({item: ele}),
|
||
closeclick: function(){
|
||
var index = openedInfoWindows.indexOf(this);
|
||
if (index > -1) {
|
||
self.openedInfoWindows.splice(index, 1);
|
||
}
|
||
}
|
||
});
|
||
|
||
marker.addListener('click', function() {
|
||
self.markerClicked = true;
|
||
self.openedInfoWindows.push(infowindow);
|
||
infowindow.open(self.map, marker);
|
||
});
|
||
|
||
return marker;
|
||
},
|
||
onShowed: function(){
|
||
if(this.map)
|
||
return;
|
||
|
||
var self = this;
|
||
|
||
$( window ).resize( function(){
|
||
$("#map-canvas").width(document.documentElement.clientWidth - 32/*Padding content*/);
|
||
$("#map-canvas").height(document.documentElement.clientHeight - 151 - self.$el.find('#searchPanel').height());
|
||
});
|
||
|
||
if ( navigator.geolocation ) {
|
||
function success(pos) {
|
||
// Location found, show map with these coordinates
|
||
self._drawMap(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
|
||
}
|
||
function fail(error) {
|
||
self._drawMap(self.defaultLatLng); // Failed to find location, show default map
|
||
}
|
||
// Find the users current position. Cache the location for 5 minutes, timeout after 6 seconds
|
||
navigator.geolocation.getCurrentPosition(success, fail, {maximumAge: 500000, enableHighAccuracy:true, timeout: 6000});
|
||
} else {
|
||
self._drawMap(self.defaultLatLng); // No geolocation support, show default map
|
||
}
|
||
|
||
$("#map-canvas").click(function(){
|
||
if(self.markerClicked){
|
||
self.markerClicked = false;
|
||
return;
|
||
}
|
||
self.openedInfoWindows.forEach(function(item, index){
|
||
item.close();
|
||
});
|
||
|
||
self.openedInfoWindows = [];
|
||
});
|
||
},
|
||
onClosing: function(){
|
||
var self = this;
|
||
Object.keys(self.markers).forEach(function(key, i){
|
||
Object.keys(self.markers[key]).forEach(function(ID, k){
|
||
self.markers[key][ID].setMap(null);
|
||
});
|
||
});
|
||
|
||
self.markers = [];
|
||
},
|
||
//render the content into div of view
|
||
render: function () {
|
||
if (this.created === true)
|
||
{
|
||
//this.header.title = "pippo";
|
||
MapsView.__super__.render.call(this);
|
||
//this.el is the root element of Backbone.View. By default, it is a div.
|
||
//$el is cached jQuery object for the view's element.
|
||
//append the compiled template into view div container
|
||
this.$el.append(this.header.$el);
|
||
this.$el.append(this.template({app: myManifest, profile: Profile}));
|
||
this.$el.append(this.footer.$el);
|
||
this.$el.find("#infoBtn").addClass("ui-btn-active");
|
||
}
|
||
//$("#homeBtn").addClass("ui-btn-active");
|
||
//return to enable chained calls
|
||
return this;
|
||
}
|
||
});
|
||
return MapsView;
|
||
}); |