I am developing an interactive map using the Yii framework and the Yii egmap extension . I would like to refresh the map (ajax) when the user clicks on the checkboxes as shown in the figure:
I can do this on the server side (refresh the whole page) with the following code:
<?php
Yii::app()->clientScript->registerScript('filterscript',"
$('#filter_all').click(function() {
$(\"input[name='filter\[\]']\").prop('checked', this.checked);
window.location.href = 'http://' + window.location.host + window.location.pathname + '?tags=sale,rent,residential,commercial,agricultural';
});
$(\"input[name='filter\[\]']\").click(function() {
var tags = '?tags=';
var tmp=new Array();
$('#filter_all').prop('checked', !$(\"input[name='filter\[\]']:not(:checked)\").length);
$('input[type=checkbox]').each(function () {
if (this.checked)
tmp.push($(this).val());
});
tags += tmp.join(',');
window.location.href = 'http://' + window.location.host + window.location.pathname + tags;
});
$('#filter_all').prop('checked', !$(\"input[name='filter\[\]']:not(:checked)\").length);
",CClientScript::POS_READY);
?>
And the map is created using the EGMap extension with this code:
<?php
if (isset($_COOKIE['latlng'])){
list($lat,$long) = explode(',',htmlentities(htmlspecialchars(strip_tags($_COOKIE['latlng']))));
}else{
$lat = 3.159553312559541;
$long = 101.71481802016604;
}
Yii::import('ext.gmap.*');
$gMap = new EGMap();
$gMap->setJsName('map');
$gMap->zoom = 10;
$mapTypeControlOptions = array(
'sensor'=>true,
'position'=> EGMapControlPosition::LEFT_BOTTOM,
'style'=>EGMap::MAPTYPECONTROL_STYLE_DROPDOWN_MENU
);
$gMap->mapTypeControlOptions= $mapTypeControlOptions;
$gMap->setWidth('100%');
$gMap->setHeight(500);
$gMap->setCenter($lat, $long);
$icon = new EGMapMarkerImage("http://".$_SERVER['HTTP_HOST'].Yii::app()->baseUrl."/images/bighouse.png");
$icon->setSize(32, 37);
$icon->setAnchor(16, 16.5);
$icon->setOrigin(0, 0);
$status_type = array(
0=>'success',
1=>'warning',
2=>'important',
3=>'important',
);
$condition = '';
$sale_cond = '';
$rent_cond = '';
if ($match['sale']==='' && $match['rent']==='' && $match['residential']==='' && $match['commercial']==='' && $match['agricultural']===''){
$condition = "AND (
(MATCH (tags) AGAINST ('sale')
AND MATCH (tags) AGAINST ('residential'))
OR
(MATCH (tags) AGAINST ('rent')
AND MATCH (tags) AGAINST ('residential') )
OR
(MATCH (tags) AGAINST ('sale')
AND MATCH (tags) AGAINST ('commercial'))
OR
(MATCH (tags) AGAINST ('rent')
AND MATCH (tags) AGAINST ('commercial') )
OR
(MATCH (tags) AGAINST ('sale')
AND MATCH (tags) AGAINST ('agricultural'))
OR
(MATCH (tags) AGAINST ('rent')
AND MATCH (tags) AGAINST ('agricultural') )
)";
}else{
if ($match['sale']!=''){
$sale_cond = "MATCH (tags) AGAINST ('sale')";
if ($match['residential']!=''){
$cond[1] = "(".$sale_cond." AND MATCH (tags) AGAINST ('residential'))";
}
if ($match['commercial']!=''){
$cond[2] = "(".$sale_cond." AND MATCH (tags) AGAINST ('commercial'))";
}
if ($match['agricultural']!=''){
$cond[3] = "(".$sale_cond." AND MATCH (tags) AGAINST ('agricultural'))";
}
if ($match['residential']!='' || $match['commercial']!='' || $match['agricultural']!=''){
$sale_cond = implode(' OR ', $cond);
}
}
if ($match['rent']!=''){
$rent_cond = "MATCH (tags) AGAINST ('rent')";
if ($match['residential']!=''){
$cond[1] = "(".$rent_cond." AND MATCH (tags) AGAINST ('residential'))";
}
if ($match['commercial']!=''){
$cond[2] = "(".$rent_cond." AND MATCH (tags) AGAINST ('commercial'))";
}
if ($match['agricultural']!=''){
$cond[3] = "(".$rent_cond." AND MATCH (tags) AGAINST ('agricultural'))";
}
if ($match['residential']!='' || $match['commercial']!='' || $match['agricultural']!=''){
$rent_cond = implode(' OR ', $cond);
}
}
if ($sale_cond!=''){
$condition = 'AND '.$sale_cond;
if ($rent_cond!=''){
$condition .= ' OR '.$rent_cond;
}
}elseif ($rent_cond!=''){
$condition = 'AND '.$rent_cond;
}
}
$props = Property::model()->findAll('active=1 '.$condition);
if ($props!==null){
foreach ($props as $prop){
$status_label='<span class="label label-'.$status_type[(int)$prop['status']].'">'.$list_status[(int)$prop['status']].'</span>';
$prop_photo = '';
$win_height = '110px';
if (is_file('images/property/'.$prop['photo'])){
$prop_photo = '<img src="http://'.$_SERVER['HTTP_HOST'].Yii::app()->baseUrl.'/images/property/'.$prop['photo'].'" /><br />';
$win_height = '310px';
}
$email_img = '<img src="http://'.$_SERVER['HTTP_HOST'].Yii::app()->baseUrl.'/site/strtoimg?pid='.$prop['id'].'" />';
$view_link = '<div style="float:left"><a href="'.Yii::app()->baseUrl.'/public/view/'.$prop['id'].'">View this property</a></div>';
$edit_link = '';
if (!Yii::app()->user->isGuest && (int)$prop['user_id']===(int)Yii::app()->user->id){
$edit_link = '<div style="float:right"><a href="'.Yii::app()->baseUrl.'/prop/update/'.$prop['id'].'">Edit this property</a></div>';
}
$links = '<div>'.$view_link.' '.$edit_link.'</div>';
$info_window = new EGMapInfoWindow('<div style="height:'.$win_height.'">'.
$prop_photo.
substr($prop['description'],0,40).'...'.'<br />'.
'Price: '.$prop['price'].'<br />'.
'Email: '.$email_img.'<br />'.
'Tel: '.$prop['contact_phone'].'<br />'.
$status_label.' Added: '.$prop['date_upload'].'<br />'.
$links.
'</div>');
$marker = new EGMapMarker($prop['latitude'], $prop['longitude'], array('title' => $prop['title'],'icon'=>$icon));
$marker->addHtmlInfoWindow($info_window);
$gMap->addMarker($marker);
}
}
$gMap->renderMap();
?>
All these codes are in the view file. The map is created by the EGMap extension in the html element with id EGMapContainer0. Any idea how to get map updates via ajax in case of click on the checkboxes?
Thank.