Ext.namespace('Ext.alexMap');
Ext.alexMap = Ext.extend(Ext.app.Module, {
too_many_msg: "To see results for your destination you can:
- Edit your search options.
- Double-click the map to zoom in.
- Search above the map for a specific zip or neighborhood.
* with more than 3000 results, map functionality becomes low",
gridTitle: 'List of results:',
gridEmptyText: 'No results found.',
mc: false,
gridStore: false,
gridData: false,
gridStore2: false,
markers: [],
markers_ref: [],
currentClickedRow: false,
mapCenter: false,
working: false,
detailsTpl: new Ext.XTemplate(
'
',
'',
'',
' {feature_class_2} ',
' {name} ',
' ',
'  ',
' {address} ',
' {city} ',
' {price_range} ',
' {moredetails} ',
' More info ',
/*
* you can add more information here to display in the right side panel, fields
* can be referenced like {so}. In order to access a field, it must be included
* in the db json returned, then the Ext.data.Record.create object below.
*/
' |
'
),
init: function() {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
if (Ext.get('searchLink')) {
Ext.get('searchLink').on({
click: {scope: this, fn: function(e){
this.searchWin();
}}
});
}
this.gridData = Ext.data.Record.create([
{name: 'id', type: 'int'},
{name: 'name', type: 'string'},
{name: 'photo', type: 'string'},
{name: 'latitude', type: 'float'},
{name: 'longitude', type: 'float'},
{name: 'feature_class', type: 'string'},
{name: 'feature_class_2', type: 'string'},
{name: 'grades', type: 'string'},
{name: 'linkref', type: 'string'},
{name: 'address', type: 'string'},
{name: 'city', type: 'string'},
{name: 'price_range', type: 'string'},
{name: 'moredetails', type: 'string'}
/*
* you can add more columns to display here, follow the format above and
* the name should be the exact name of the db column, you'll also have to
* add the formatting below for the grid and the formatting for the right
* side panel above.
*/
]);
this.gridStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'http://www.europe.org/query.php'
}),
reader: new Ext.data.JsonReader({
root: 'jgs_rows',
id: 'id',
totalProperty: 'totalCount'
},this.gridData)
});
this.gridStore2 = new Ext.data.Store({
reader: new Ext.data.JsonReader({
root: 'jgs_rows',
id: 'id',
totalProperty: 'totalCount'
},this.gridData)
});
this.gridStore.on({
loadexception : {scope: this, fn: function() {
Ext.getCmp('jgs_gmap').getMap().clearOverlays();
if (Ext.jgs.cmsg) {
Ext.jgs.cmsg.hide();
}
Ext.jgs.msg('Over 3000 results!*', this.too_many_msg);
}},
beforeload: {scope: this, fn: function() {
Ext.getCmp('swInfo').body.update( '
Looking for travel resources' );
if (this.working == true) {
return false;
}
this.working = true
}},
load: {scope: this, fn: function(store,records) {
Ext.getCmp('swInfo').body.update( 'Found ' + store.getCount() + ' travel resources' );
this.working = false;
if (Ext.jgs.cmsg) {
Ext.jgs.cmsg.hide();
}
Ext.getCmp('jgs_gmap').getMap().clearOverlays();
this.markers = [];
this.markers_ref = [];
store.each(
function(r) {
var pt = new GLatLng(r.data.latitude,r.data.longitude);
if ( icon_array[ r.data.feature_class ] ) {
var marker = icon_array[ r.data.feature_class ];
} else {
var marker = false;
}
var m = Ext.getCmp('jgs_gmap').addMarker(
pt,
marker,
false,
false,
{
mouseover: function(e){
Ext.QuickTips.register({
target: Ext.get('mtgt_' + r.data.id),
width: 200,
dismissDelay: 15000,
title: '' + r.data.name + ''
});
}.createDelegate(this),
click: function(e) {
/*
* code below creates orange highlight around marker when clicked,
* color can be changed on line 578 of Helper.js
*/
Ext.getCmp('jgs_gmap').highlightMarker(this.markers_ref[r.data.id]);
this.swapDetails(r);
for(var q = 0; q < this.gridStore.data.items.length; q++) {
if (this.gridStore.data.items[q].data.id == r.data.id) {
currentIndex = q;
break;
}
}
Ext.getCmp('attGrid').getSelectionModel().selectRow(currentIndex);
Ext.getCmp('attGrid').getView().focusRow(currentIndex);
}.createDelegate(this)
},
r.data.id
);
this.markers_ref[ r.data.id ] = m;
this.markers.push(m);
},this
);
/*
* gridsize is the size of the cluster used for marker clsuster and maxZoom is the lowest level where clusters are made
*/
var mcOptions = {gridSize: 80, maxZoom: 10};
this.mc = new MarkerClusterer(Ext.getCmp('jgs_gmap').getMap(), this.markers, mcOptions);
}}
});
}, // end init
swapDetails: function(r) {
/*
* this function fades out the existing panel, overwrites it with new data that has
* been clicked, then fades in new. It uses the detailsTpl variable above for formatting.
*/
Ext.get('rightPanel').fadeOut({
duration:0.2,
useDisplay: true,
scope: this,
callback: function() {
this.detailsTpl.overwrite(Ext.getCmp('rightPanel').body, r.data);
Ext.get('rightPanel').fadeIn({
duration:1.5,
useDisplay: true
});
}
});
},
mapPanel: function() {
var p = {
id: 'jgs_gmap',
xtype: 'gmappanel',
frame: false,
plain: true,
border: false,
collapsible: false,
setCenter: {
lat: default_center_lat,
lng: default_center_lng
},
gmapType: 'map',
mapConfOpts: ['enableScrollWheelZoom','enableDoubleClickZoom'],
mapControls: ['GLargeMapControl3D','GMapTypeControl'],
zoomLevel: default_zoom,
listeners: {
render: {scope: this, fn: function() {
var statusWin = new Ext.Window({
id: 'statusWin',
width: 300,
height: 30,
resizable: false,
closable: false,
layout: 'fit',
plain:false,
frame:false,
border: false,
hideBorders: true,
shadow: false,
autoScroll:false,
items: [{
id: 'swInfo',
cls: 'sw',
html: 'status'
}],
listeners: {
show: function() {
statusWin.alignTo(document, 'tl-tl', [95,85]);
}
}
});
statusWin.show();
Ext.EventManager.onWindowResize(function() {
statusWin.alignTo(document, 'tl-tl', [95,85]);
});
var rs = new Ext.util.DelayedTask(
function() {
var m = Ext.getCmp('jgs_gmap').getMap();
Ext.getCmp('jgs_gmap').hasCluster();
/*
* this sets up events to be triggered when the map is moved, it
* basically gets the bounds of the map viewport and reloads the
* query to get new relevant markers.
*/
GEvent.bind(m, 'moveend', this, function() {
if (Ext.jgs.cmsg) {
Ext.jgs.cmsg.hide();
}
m.clearOverlays();
m.checkResize();
var b = m.getBounds();
var ne = b.getNorthEast();
var sw = b.getSouthWest();
this.gridStore.baseParams = {
northeast_lat: ne.lat(),
northeast_lng: ne.lng(),
southwest_lat: sw.lat(),
southwest_lng: sw.lng()
}
this.gridStore.load();
});
/*
* this loads the initial query based on globally set center lat/lng and zoom,
* which is set in index.html
*/
m.checkResize();
var b = m.getBounds();
var ne = b.getNorthEast();
var sw = b.getSouthWest();
this.gridStore.baseParams = {
northeast_lat: ne.lat(),
northeast_lng: ne.lng(),
southwest_lat: sw.lat(),
southwest_lng: sw.lng()
}
this.gridStore.load();
},
this
);
rs.delay(250);
}},
resize: function() {
if (Ext.getCmp('jgs_gmap').loaded) {
Ext.getCmp('jgs_gmap').getMap().checkResize();
}
}
}
};
return p;
},
/*
* this function creates the bottom grid.
*/
attractionGrid: function() {
var xg = Ext.grid;
var grid = new xg.GridPanel({
id: 'attGrid',
/* title: this.gridTitle,*/
region: 'south',
height: 200,
store: this.gridStore,
cm: new xg.ColumnModel([
/*expander, */
{header: 'Type',width: 10, sortable: true,dataIndex: 'feature_class_2'},
{header: 'Name',width: 30, sortable: true,dataIndex: 'name'},
{header: 'City',width: 20, sortable: true,dataIndex: 'city'},
{header: 'Info',width: 40, sortable: true,dataIndex: 'price_range'}
]),
viewConfig: {
forceFit:true,
deferEmptyText: false,
emptyText: this.gridEmptyText
},
layout: 'fit',
border: true,
stripeRows: true,
/* plugins: expander, */
collapsible: true,
animCollapse: true,
autoScroll: true
});
grid.on({
rowclick: {scope: this, fn: function(grid, rowIndex, columnIndex, e) {
var r = this.gridStore.getAt(rowIndex);
// this code centers the map when a grid item is clicked, however
// it also loads a new query to get markers around centered item,
// so it is commented out to reduce overhead.
//Ext.getCmp('jgs_gmap').getMap().setCenter(
// new GLatLng(
// r.data.latitude,
// r.data.longitude
// )
//);
this.currentClickedRow = r;
this.swapDetails(r);
Ext.getCmp('jgs_gmap').highlightMarker(this.markers_ref[r.data.id]);
}}
});
return grid;
},
searchWin: function() {
var winid = 'win_search';
var win = Ext.WindowMgr.get(winid);
if (!win) {
/*
* code below creates window object with advanced search.
*/
win = new Ext.Window({
id: winid,
title: 'Advanced Search',
width: 500,
height:400,
buttonAlign:'center',
autoScroll: true,
layout: 'fit',
border: false,
closeAction: 'hide',
closable: true,
resizable: true,
draggable: true,
shadow: false,
items: [
new Ext.form.FormPanel({
id: 'search_form',
autoScroll: true,
border:false,
waitMsgTarget: true,
bodyStyle: 'padding: 5px; border: solid 1px #F6971D;',
defaults: {
xtype:'fieldset',
autoHeight:true,
border: true,
layout: 'column',
labelWidth: 120,
width: 60
},
items:[
{
title: 'Attractions',
anchor: '-20 100',
defaults: {
layout: 'form',
autoHeight: true,
border: false,
labelWidth: 90
},
items: [
{
columnWidth:0.3,
items: [{
/*
* this is actual form field
*/
xtype: 'checkbox',
fieldLabel: 'Museums',
name: 'city',
allowBlank: true,
labelWidth: 60
}]
},{
columnWidth:0.3,
items: [
{
xtype: 'checkbox',
fieldLabel: 'Monuments',
name: 'zip',
allowBlank: true
}
]
},{
columnWidth:0.3,
items: [
{
xtype: 'checkbox',
fieldLabel: 'Churches',
name: 'zip',
allowBlank: true
}
]
}
]
},{
title: 'Lodging',
anchor: '-20 100',
defaults: {
layout: 'form',
autoHeight: true,
border: false
},
items: [
{
columnWidth:0.5,
labelWidth: 100,
items: [
{
xtype: 'checkbox',
fieldLabel: 'Chain Hotels',
name: 'min_price'
},
{
xtype: 'checkbox',
fieldLabel: 'Boutique Hotels',
name: 'max_ppu'
},
{
xtype: 'checkbox',
fieldLabel: 'B and B',
name: 'min_cap_rate',
allowBlank: true
}
]
},{
columnWidth:0.5,
labelWidth: 80,
defaults: {
border: false
},
items: [
{
xtype: 'checkbox',
fieldLabel: 'Rentals',
name: 'max_grm',
allowBlank: true
},
{
xtype: 'checkbox',
fieldLabel: 'Hostels',
name: 'max_sqft',
allowBlank: true
},{
xtype: 'checkbox',
fieldLabel: 'Campgrounds',
name: 'max_price',
allowBlank: true
},{
xtype: 'checkbox',
fieldLabel: 'Maximum',
name: 'max_price',
allowBlank: true
}
]
}
]
},{
title: 'Price per Room per Night',
anchor: '-20 100',
defaults: {
layout: 'form',
autoHeight: true,
border: false
},
items: [
{
columnWidth:0.5,
defaults: {
border: false
},
items: [{
html: 'Units'
},{
html: ' '
},{
html: ' '
},{
html: 'Year Built'
}]
},
{
columnWidth:0.25,
labelWidth: 65,
items: [
{
fieldLabel: 'Minimum',
xtype: 'numberfield',
name: 'min_units',
allowBlank: true,
width: 60
},
{
fieldLabel: 'Minimum',
xtype: 'numberfield',
name: 'min_yrbuilt',
allowBlank: true,
width: 60
}
]
},{
columnWidth:0.2,
labelWidth: 65,
items: [
{
fieldLabel: 'Maximum',
xtype: 'numberfield',
name: 'max_units',
allowBlank: true,
width: 60
},
{
fieldLabel: 'Maximum',
xtype: 'numberfield',
name: 'max_yrbuilt',
allowBlank: true,
width: 60
}
]
}
]
},{
title: 'Additional Search Options',
anchor: '-20 100',
defaults: {
layout: 'form',
autoHeight: true,
border: false
},
items: [
{
columnWidth: 1,
labelWidth: 50,
items:[
{
xtype: 'textfield',
fieldLabel: 'Keyword',
name: 'keyword',
allowBlank: true,
emptyText: 'Blank Keyword Text'
}
]
}
]
}],
buttons: [{
text: 'Search',
scope: this,
handler: function() {
var f = Ext.getCmp('search_form').getForm();
if(f.isValid()) {
/*
* code to produce form submit action.
*
* this would just submit form like normal HTML:
* fform.form.submit({ url:'/form.php'});
* but it would then redirect you to another page.
* In order to stay on the same page and just refresh
* map with new information, you need to load up parameters
* of data store that is created above: line 59 this.gridStore
*/
var m = Ext.get('jgs_gmap').getMap();
m.clearOverlays(); // clear markers on map
m.checkResize();
var b = m.getBounds();
var ne = b.getNorthEast();
var sw = b.getSouthWest();
/*
* this example is searching the map based on current viewport, so
* searching for stuff in the existing map.
*/
this.gridStore.baseParams = {
northeast_lat: ne.lat(),
northeast_lng: ne.lng(),
southwest_lat: sw.lat(),
southwest_lng: sw.lng()
/*
* below are additional parameters from form...
* variable to the left is what is submitted to php script,
* variable to right is value from form. obviously the PHP
* script will need to handle these new variables.
*/
/*rentals: f.findField('max_grm').getValue(),
*max_yrbuilt: f.findField('max_yrbuilt').getValue(),
*min_yrbuilt: f.findField('min_yrbuilt').getValue()
*/
}
this.gridStore.load();
/*
* close the window
*/
win.hide();
} else {
Ext.jgs.msg('Alert!', 'Please correct errors before submitting.');
}
}
}
]
})
]
});
win.render(document.body);
win.alignTo(Ext.get('searchLinkBox'), 'tr-br', [15,3]);
}
win.show();
}
});