Jun 21 2010
I don’t know why but it seems that cakephp does not uses the same layout logic for the scaffold view as for the rest of the pages. If you have the same problem, you can set the layout from the controller like this:
<?php class MyController extends AppController { var $scaffold; var $layout = 'mylayout'; } ?>
Jun 05 2010
Recetly I found out a nice google maps helper for Cakephp, but it is based on version 2. There is a new versione of the API, v3, which has many improvements, including faster loading time, better compatibility with mobile devices and more. Since I could not find an helper for this new version, I decided to create it on my own, and here is it!!
First, create the googlemap.php file under views / helpers, and copy/paste this:
<?php
/*
* CakeMap -- a google maps integrated application built on CakePHP framework.
* Based on initial versione from Garrett J. Woodworth : gwoo@rd11.com
* Rewritten by : http://www.small-software-utilities.com
*
* @author info@small-software-utilities.com
* @version 0.2
* @license OPPL
*
* Modified by Mahmoud Lababidi <lababidi@bearsontherun.com>
* Date Dec 16, 2006
* Rewritten by small software utilities <info@small-software-utilities.com>
* Date May, 2010
*/
class GoogleMapHelper extends Helper {
var $errors = array();
var $key = "your key here, not needed for v3";
var $url ="http://maps.google.com/maps/api/js?sensor=false";
function map($default, $style = 'width: 400px; height: 400px' )
{
//if (empty($default)){return "error: You have not specified an address to map"; exit();}
$out = "<div id=\"map\"";
$out .= isset($style) ? "style=\"".$style."\"" : null;
$out .= " ></div>";
$out .= "
<script type=\"text/javascript\">
//<![CDATA[
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var iconimage = \"http://labs.google.com/ridefinder/images/mm_20_red.png\";
var iconshadow = \"http://labs.google.com/ridefinder/images/mm_20_shadow.png\";
var myOptions = {
zoom: ".$default['zoom'].",
center: new google.maps.LatLng(".$default['lat'].", ".$default['long']."),
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: true
};
var map = new google.maps.Map(document.getElementById(\"map\"), myOptions);
// global infowindow object
var globalInfowindow = new google.maps.InfoWindow();
function cleardirs()
{
if(directionsDisplay)
directionsDisplay.setMap(null);
div = document.getElementById('".(isset($default['directions_div'])?$default['directions_div']:'directions_div')."');
if(div)
div.innerHTML = \"\";
}
";
if(isset($default['directions_div']))
{
$out .= "
directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('".$default['directions_div']."'));
function calcRoute(fromid,tolat,tolon) {
directionsDisplay.setMap(map);
from = document.getElementById(fromid).value;
var start = from;
var end = new google.maps.LatLng(tolat,tolon);
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
}
";
}
$out .="
//]]>
</script>";
return $out;
}
function addMarkers(&$data, $icon=null)
{
$out = "
<script type=\"text/javascript\">
//<![CDATA[
";
if(is_array($data))
{
$i = 0;
foreach($data as $n=>$m){
$keys = array_keys($m);
$point = $m[$keys[0]];
if(!preg_match('/[^0-9\\.\\-]+/',$point['longitude']) &&
preg_match('/^[-]?(?:180|(?:1[0-7]\\d)|(?:\\d?\\d))[.]{1,1}[0-9]{0,15}/',$point['longitude'])
&& !preg_match('/[^0-9\\.\\-]+/',$point['latitude']) &&
preg_match('/^[-]?(?:180|(?:1[0-7]\\d)|(?:\\d?\\d))[.]{1,1}[0-9]{0,15}/',$point['latitude']))
{
$out .= "
var point".$i." = new google.maps.LatLng(".$point['latitude'].",".$point['longitude'].");
var marker".$i." = new google.maps.Marker({
position: point".$i.",
map: map,
title:\"".(isset($point['title'])?$point['title']:'')."\",
shadow: iconshadow,
icon: iconimage,
});";
if(isset($point['title'])&&isset($point['html']))
{
$out .= " var infowindow$i = new google.maps.InfoWindow({
content: \"$point[title]$point[html]\"
});
google.maps.event.addListener(marker".$i.", 'click', function() {
infowindow$i.open(map,marker".$i.");
});";
}
$data[$n][$keys[0]]['js']="marker$i.openInfoWindowHtml(marker$i.html);";
$i++;
}
}
}
$out .= "
//]]>
</script>";
return $out;
}
function addClick($var, $script=null)
{
$out = "
<script type=\"text/javascript\">
//<![CDATA[
$script
google.maps.event.addListener(map, 'click', ".$var.", true);
//]]>
</script>";
return $out;
}
function addMarkerOnClick($innerHtml = null)
{
$mapClick = '
var mapClick = function (event) {
var marker = new google.maps.Marker({
position:event.latLng,
icon: iconimage,
map:map
});
var infowindow = new google.maps.InfoWindow({
content: \"'.$innerHtml.'\"
});
google.maps.event.addListener(marker, \'click\', function() {
infowindow.open(map,marker);
});
}
';
return $this->addClick('mapClick', $mapClick);
}
function moveMarkerOnClick($lngctl, $latctl, $innerHtml = null)
{
$mapClick = '
var mapClick = function (event) {
marker0.setPosition(event.latLng);
lngctl = document.getElementById(\''.$lngctl.'\');
latctl = document.getElementById(\''.$latctl.'\');
if(lngctl)
lngctl.value = event.latLng.lng();
if(latctl)
latctl.value = event.latLng.lat();
}
';
return $this->addClick('mapClick', $mapClick);
}
}
?>
To use you just need to add the helper to the controller, or to AppController if you want this in every other controller, like this:
<?php
class MyController extends AppController {
var $helpers = array( 'Googlemap');
....
}
Then, in the view, add these line:
$default = array('type'=>'0','zoom'=>13,'lat'=>'42.5846353751749',
'long'=>'11.5191650390625');
$points = array();
$points[0]['Point'] = array('longitude' =>$default['long'],'latitude' =>$default['lat']);
$key = $googlemap->key;
echo $javascript->link($googlemap->url);
echo $googlemap->map($default,'width: 600px; height: 400px');
echo $googlemap->addMarkers($points);
echo $googlemap->moveMarkerOnClick('StructureLongitudine','StructureLatitudine');
A simple explanation:
points is the array where your store, guess, points! The map methos writes out the js for the map, the addMarkers method add markers to the page. The last method, moveMarkerOnClick, was useful to me, for user placement. With this code you can create a map where the user can click to move the marker. Note that the marker which moves is always the one called marker0. The two methos parameters are the ids of two input boxes, representing latitude and longitude. This id is created automatically by CakePHP by using the usual syntax ControllernameInputname. The default variable contains map type, zoom level, center of the map respectively. You can also add directions to your map by adding a div, setting and id for it and then passing the id in the default array like this:
'directions_div'=>'directions_div'
You can also use the addMarkerOnClick function, which adds a marker when you click on the map. InfoWindows are supported, just add a title and html item to the point array, they will be used to create an infowindow to be displayed when you click on the marker icon.
Hope this helps!
PS: please not that this is a initial version of the helper, use it at your own risk! But please leave here some comments, feature request, bug, or else!
Thanks!
EDIT: According to Amjith, to use this in cakephp v1.3 you must use:
$this->GoogleMap-> instead of $googlemap->
and name the file helper as google_map.php
EDIT 2: According to Duckula, for compatibility with Cake 1.3, you should use:
var $helpers = array( ‘GoogleMap’);
with capital M.
Sorry for these, but I still did not have the chance to try out v1.3, but I will soon!
May 26 2008
I had a problem with the margin CSS property on a website with cake. Actually, I used a CSS template for WordPress, copying the code to my website. The code seemed identical, the CSS too, but while on Firefox everything was ok, using IE 7 the page was left oriented (while using Firefox, or accessing a blog with that theme with Iinternet Explorer 7, it was centered). After a long debugging, i discovered that CakePHP was configured with debug level 1, which outputted the compilation time at the beginning of the page, in a comment. This seemed to upset IE, because when I set the debug level to 1, the comment disappeared and IE 7 displayed the page properly too.
May 04 2008
Sometimes I experience a 404 error while opening a view of a newly added controller. I found out that this issue is due to cache problems, so removing the cache (usually found in tmp/cache) can solve this problem. Also delete the persistent directory inside the cache dir.
Jan 27 2008
Hi all!
I had to insert a tree in order to edit the structure of a menu. I found out that extjs tree are great! It lets you add a tree with dynamic content and move node from the root to leafs. So I tried integrating it, it’s really easy.
I added a js function to the tree javascript (from the reorder example in the extjs package)
function getTreeContents(tree) {
return getNodeContents(tree.root,true);
}
function getNodeContents(node) {
var s = ”;
if(node.childNodes.length > 0)
{
for(var i=0; i<node.childNodes.length; i++) {
s+= node.id+’-'+node.childNodes[i].id +’|';
s += getNodeContents( node.childNodes[i],false);
}
}
return s;
}
This returns a list of parentid-childid which, everytime the tree is changed, I add to a hidden textbox. Then I get the value of this textbox in the controller code, parse it and update all the nodes according to passed values.
That’s it!
Default
Small Fonts
Big Fonts