PDA

View Full Version : render map with new data in store.



pkvenu
22 Nov 2011, 10:35 AM
Hi Guys,

I have a tab control with map and a time line panel. On a button click i get a json value and populate it into the store and then call a dispatch method in my controller to call the tab control view. The view opens up but the map render method is never called. Can you tell me how do i render the map with the new json data. I have attach the code below.

Controller:
this method is called from button click dispatch method:


showMapBasedOnInputLocation: function (options) {
parking.views.viewport.setActiveItem(
parking.views.map, options.animation
);

Tab Control :



var position = new google.maps.LatLng(37.44885, -122.158592);
var imageFileName;
var infoWindow = new google.maps.InfoWindow({});
var markers = new Array();

var MarkerTemplate = new Ext.XTemplate(

'<div class="mover">',
'<div class="bubble">',
'<div class="bHeader">',
'STREET PARKING ZONE',
'<div class="closeX"></div>',
'</div>',
'<div class="bBody">',
'<div>',
'Blocks near Filbert St.<br />',
'At Stockton St.',
'</div>',
'<div class="spacer10"></div>',
'<div class="borderBreak"></div>',
'<div>',
'<strong>Space Available:</strong> <strong>10%</strong> (1/11)<br />',
'<strong>Current Price:</strong> $2/hr-$8/4hrs',
'</div>',
'<a href="javascript:void(0);" onclick="showBubbleDetailsPage(id)">Show Details</a>&nbsp;&nbsp;<a href="#">Driving Directions</a>',
'</div><!-- END bBody -->',
'<div class="details">',
'<div>',
'<strong>Details:</strong><br />',
'Facility ID: 12345<br />',
'Type: Street<br />',
' Entry Height: 7ft<br />',
' Maximum Time: 24hrs<br />',
'</div>',
' </div><!-- END details -->',
' <div class="clear"></div>',
'<div class="bubbleCorner"><img src="img/global/bubbleCorner.png" width="21" height="22" /></div>',
'</div><!-- END bubble -->',
' </div><!-- END mover -->'

);


var map = new Ext.Map({
title: 'Map',
mapOptions: {
center: new google.maps.LatLng(37.381592, -122.135672),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
}
},
listeners: {
render: function (comp, map) {

if (parking.stores.ParkingFacility.data.items.length > 0) {
pdata = parking.stores.ParkingFacility;
timeline.update(pdata.data.items[0]);
for (var i = 0, ln = pdata.data.items[0].length; i < ln; i++) {
imageFileName = image(pdata.data.items[0][i].Rendering, "ParkingFacility");
addMarkers(pdata.data.items[0][i], pdata.data.items[0][i].Latitude, pdata.data.items[0][i].Longitude, imageFileName, "ParkingFacility");

}
for (var j = 0, len = pdata.data.items[0].length; j < len; j++) {
imageFileName = image(pdata.data.items[0][j].Rendering, "ParkingZone");
addMarkers(pdata.data.items[0][j], pdata.data.items[0][j].CentralLatitude, pdata.data.items[0][j].CentralLongitude, imageFileName, "ParkingZone");
}
}
}
}

});

var image = function (rendering, type) {

var imagefile;
switch (rendering) {
case 0:
if (type == "ParkingFacility") {
imagefile = "icon_blueP.png";

}
else {
imagefile = "icon_blueSP.png";
}
break;
case 1:
if (type == "ParkingFacility")
imagefile = "icon_greenP.png";
else
imagefile = "icon_greenSP.png";
break;

case 2:
if (type == "ParkingFacility")
imagefile = "icon_yellowP.png";
else
imagefile = "icon_yellowSP.png";
break;
case 3:

if (type == "ParkingFacility")
imagefile = "icon_redP.png";
else
imagefile = "icon_redSP.png";
break;
}
return imagefile;
}


var addMarkers = function (data, latitude, longitude, image, content) {

var latLng = new google.maps.LatLng(latitude, longitude);

var icon = new google.maps.MarkerImage("/resources/images/" + image, null, null, new google.maps.Point(0, 34), new google.maps.Size(21, 34));



marker = new google.maps.Marker({
map: map.map,
position: latLng,
icon: icon
});

marker.set('location', data);

google.maps.event.addListener(marker, 'click', function () {
var area = this.get('location');
var infoWindowHtml = content;
infoWindow.setContent(infoWindowHtml);
infoWindow.open(map, this);
});
markers.push(marker);

// setTimeout( function(){ map.panTo (position); } , 1000);

}

function clearMarkers() {
infoWindow.close();
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers.length = 0;
}



var template = new Ext.XTemplate(

'<tpl for=".">',
'<div class="results">',
'<div class="icon">',
'<tpl if="ParkingType != &quot;On-street&quot;">',
'<tpl if="Rendering == 0 ">',
'<img src="/resources/images/icon_blueP.png" width="21" height="34" alt="Parking Facilities Icon" /></div>',
'</tpl>',
'<tpl if="Rendering ==1 ">',
'<img src="/resources/images/icon_greenP.png" width="21" height="34" alt="Parking Facilities Icon" /></div>',
'</tpl>',
'<tpl if="Rendering ==2 ">',
'<img src="/resources/images/icon_yellowP.png" width="21" height="34" alt="Parking Facilities Icon" /></div>',
'</tpl>',
'<tpl if="Rendering ==3 ">',
'<img src="/resources/images/icon_redP.png" width="21" height="34" alt="Parking Facilities Icon" /></div>',
'</tpl>',
'</tpl>',
'<tpl if="ParkingType == &quot;On-street&quot;">',
'<tpl if="Rendering == 0 ">',
'<img src="/resources/images/icon_blueSP.png" width="21" height="34" alt="Parking Zones Icon" /></div>',
'</tpl>',
'<tpl if="Rendering ==1 ">',
'<img src="/resources/images/icon_greenSP.png" width="21" height="34" alt="Parking Zones Icon" /></div>',
'</tpl>',
'<tpl if="Rendering ==2 ">',
'<img src="/resources/images/icon_yellowSP.png" width="21" height="34" alt="Parking Zones Icon" /></div>',
'</tpl>',
'<tpl if="Rendering ==3 ">',
'<img src="/resources/images/icon_redSP.png" width="21" height="34" alt="Parking Zones Icon" /></div>',
'</tpl>',
'</tpl>',
'</div>',
'<div class="info">',
'<strong>{ParkingType}</strong><br />',
'<strong>{Distance}</strong><br />',
'<a href="#" style="text-decoration: underline;">Show All Details</a>',
'<div style="margin-bottom: 8px;"></div>',
'Space Available: <strong>{PercentFull}%</strong> ({OccupiedParkingSpace}/{TotalParkingSpace})<br />',
'Current Price: $8/hr-$35/day<br />',
'Open Today: {TodayTimings}<br />',
'<a href="#" style="text-decoration: underline;">View On Map</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" style="text-decoration: underline;">Get Driving Directions</a><br />',
'</div>',
'<div class="address">',
'{LotName}<br />',
'{Street}<br />',
'{Contact}',
'</div><!-- END address -->',

'<div style="clear: both;"></div>',

'</div>',
'</tpl>'

);


var timeline = new Ext.Panel({
title: 'ResultsList',
scroll: 'vertical',
tpl: template
});


parking.views.map = Ext.extend(Ext.Panel, {
fullscreen: true,
dockedItems: [
{ xtype: 'header' }
],
items: [{
xtype: 'tabpanel',
activeTab: 0,
plain: true,
layoutOnTabChange: true,
tabBar: {
dockedItems: [
{
xtype: 'button',
ui: 'back',
text: 'Start Over',
dock: 'left',
height: 5,
width: 102,
style: { top: '5px !important', height: '30px !important', backgroundimage: 'none !important', color: '#fff !important' },
handler: function () {
Ext.dispatch({
controller: parking.controllers.controller,
action: 'backToForm'
});
}
}

]
},
fullscreen: true,
cardSwitchAnimation: 'slide',
ui: 'light',
items: [map, timeline ]
}],
initComponent: function () {
parking.views.map.superclass.initComponent.apply(this, arguments);
}
});


Can you tell me why the render method is not getting called.

Secondly, when the map does not load properly. I have to minimize the browser window and maximize again tho make the map show on the whole page. Attached the screen shot.


29489



Any help will be really appriciated.

Thanks,

mitchellsimoens
22 Nov 2011, 11:33 AM
If you want to render a new map every time your store changes you will need to remove and then add a new map component.

pkvenu
22 Nov 2011, 11:51 AM
Can you show me an example or code snippet based on my above post on how to do it.

thanks,
Pawan

won.rhee
25 Nov 2011, 12:45 PM
If you want to render a new map every time your store changes you will need to remove and then add a new map component.

Hello, I have following in controller :


this.mapPanel = this.render({
xtype: 'LocationsMapView'
});
this.application.viewport.setActiveItem(this.mapPanel);

//then get DOM of LocationsMapView, get coordinates, then setCenter the map



First time, map shows correctly. But second time, it just shows sencha's default Panel background.
You mentioned removing the map component.

if(this.mapPanel){ this.mapPanel.destroy(); }
I've tried above code but gives me error "Uncaught TypeError: Cannot read property 'parentNode' of undefined"

What concept am i missing regards to render, setactiveitem, then using DOM to get handle on map div that will be used for google map?