On Saturday I attended the biggest PHP Unconference of Pune. It got huge response and everyone was amazed to see such a big PHP community. I planned to give a session on “OpenSocial” at this camp. Saturday morning started with heavy rains but call for volunteers made me to reach camp at 8:45 AM. Unfortunately I was not knowing anyone except Amit, with whom I communicated through emails.
I reached to see 3-4 volunteers already present over there but not Amit (:. I called Amit to know he is on the way. I was curious to register my session as soon as possible for which I prepared burning mid night oil. Someone from volunteers told me that registration for sessions will start at 10 AM and there will be votes through Wiki to select sessions. As my topic was of much interest I was sure I will win the votes.
Alahs!!! But it turned in to disappointment when I saw a girl marking slots on the white board. Peeyush took marker from her and went stright to book almost all of the sessions at 7th Floor. First session registered at 7th Floor for 11:00 AM was OpenSocial, exactly my topic. Someone told me that 4th floor is having only seating capacity of 100. As no session before 4:00 PM was available at 7th Floor, I booked 2:00 PM session on 4th floor with name “OpenSocial : Building Orkut applications using PHP” . I forgot to add name of my organization “Clarion Technologies Pvt. Ltd.” which I added after initial introduction session at 10:50 AM.
Morning sessions
First session I attended was OpenSocial. Frankly speaking I didn’t liked it much even his topic was also OpenSocial. I answered one question asked by another camper during this session for which Peeyush given me Satyam T-Shirt. Thanks Peeyush. I got a chance to announce my session, as current session was also about OpenSocial. I was a bit tense before this session, thinking I will not get any attendance for my session. But after session I was quite relaxed that much is left which I can cover during my session. The next session was continuation of this which was “Shindig and OpenSocial”. This was again bouncer for most of the people, where I again got chance to answer one question. I liked the way Satyam guys make advertise of their company saying they deal with OpenSocial and something like partner of Google for this. But they wrongly mentioned that through application we can access database of Orkut ( or there is shared database) and we can not store information of our application on our own server.
Lunch Time
Before lunch I got a chance to meet my ex Clarionite friends. We enjoyed lunch together. I was happy to listen that some of them came to attend my session when they see my session phpcamp site.
My Session
I reached 10 mins before my session time at 4th Floor. It was really a small hall compared to 7th Floor. By the time I set up my presentation, TV and my data card internet, hall was almost full. Before starting session I just looked at the audience and I was surpised to see amlost 60% of the attendies were standing because of less space. Hall was completely packed and there was no room even to stand. Subestian was standing just behind me (close to door) and looking at my laptop as he was having back towards TV screen. I started session with some history and introduction of OpenSocial followed by around 3 small code examples. Because of internet at my laptop I was able run these applications on Orkut Sandbox. Seems like most of the participants liked the idea and they understood the concept well.
A lot of questions by audience confirmed that they understood basic concepts of how to create the application. When I got the suggestion from someone ( I think Rahul ) to store information of MySpace, Orkut users in our database and link their accounts. I was very happy as it was indication that concept is perceived by them very well.
At the end of session the big applaud made me proud that I conducted session at the Camp. I enjoyed cofee with Asish after session and then we went to 7th floor to attended session on OWASP.
Session on OWASP was something new and sheding light on security concerns. By that time I missed the BOF’s going on at other side.
Once all sessions were completed I returned home happily having never forgetting memories in mind. I made many new friends like Rahul, Tarun, Prasoon, Amit, Deepak, Rohit, Pankaj, Sebestian throgh this camp. PHPCamp rocked !!!!!
Note :- Presentation and code that I used at session is available here http://www.myphpdunia.com/phpcamp.html
Yahoo GUI library has a rich set of controls for web development.
“The Yahoo! User Interface (YUI) Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX. The YUI Library also includes several core CSS resources. All components in the YUI Library have been released as open source under a BSD license and are free for all uses.”
See the page http://developer.yahoo.com/yui/
You can download the Yahoo UI library from http://developer.yahoo.com/yui/download/
For example, see the Menu control in Yahoo UI library - http://developer.yahoo.com/yui/menu/index.html
How to get which area of map user is looking at?
-
var boundary=map.getBounds();
Boundary varible contains latitude and longitude of two corners of a map. This represents the rectangle shown at map. You can add a event listner to always retrun you these boundary co-ordinates whenever user moves map or zoomIn/Zoom our. Eg. At below code a function “show_cities” is called whenvever map shown to user is changed.
-
-
map = new GMap2(document.getElementById("map"));
-
map.addControl(new GLargeMapControl());
-
map.setCenter(new GLatLng(18.520469,73.856621), 8);
-
GEvent.addListener(map, "moveend", function()
-
{
-
var boundary=map.getBounds();
-
// show_cities(boundary,0);
-
});
Marker ManagerAdding a large number of markers to a Google map may both slow down rendering of the map and introduce too much visual clutter, especially at certain zoom levels. The marker manager utility provides a solution to both of these issues, allowing efficient display of hundreds of markers on the same map and the ability to specify at which zoom levels markers should appear.
While adding markers using Markermanager you can define their min and max zoom levels. Markers will be shown at this zoom level range only. This is very useful when you have so many markers to show on a map.
e.g. you are showing marker for each registered user at site and there are thousands of users to your site. Best way is to user marker manager showing only one icon representing each country at large zoom level. At intermediate zoom level you can show icons representing states and at detailed zoom level actual icons representing user locations can be shown. This elimiates the cluttered view of showing thousands of icons at higher zoom level.
More References to learn about Google map -
Google Maps API Developers Guide http://code.google.com/apis/maps/documentation/index.html
Discussion Group http://groups.google.com/group/Google-Maps-API
Google Map API References http://code.google.com/apis/maps/documentation/reference.html
Gallary of Demos http://code.google.com/apis/maps/documentation/demogallery.html
At last article I talked about Google Map basic concepts. At map you can show different control options to pan/zoom map, showing driving directions, map types etc.
Generally used controls are -
GLargeMapControl - a large pan/zoom control used on Google Maps. Appears in the top left corner of the map by default.
GSmallMapControl - a smaller pan/zoom control used on Google Maps. Appears in the top left corner of the map by default.
-
-
var map = new GMap2(document.getElementById("map"));
-
map.addControl(new GSmallMapControl());
-
These controls can be positioned on map by adding an optional second parameter to method GControlPosition.
-
-
var map = new GMap2(document.getElementById"map"));
-
var mapTypeControl = new GMapTypeControl();
-
var topRight = new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10,10));
-
map.addControl(mapTypeControl, topRight);
-
You can even modify markup of these standard controls but thats not the scope of our article :). More information on google map controls can be found at http://code.google.com/apis/maps/documentation/controls.html
At last article I mentioned how to add markers to the map. Interestingly we can change icons for the markup. Instead of default 
marker you can use same fancy icons like 
or 
. This is also helpful to show different icons for different type of markers. E.g. if you are showing locations of users, subscribers, agents, resellers etc. at your site, you can use different icon representing each of this user type on map.
-
-
// Create a base icon for all of our markers that specifies the
-
// shadow, icon dimensions, etc.
-
var baseIcon = new GIcon(G_DEFAULT_ICON);
-
baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
-
baseIcon.iconSize = new GSize(20, 34);
-
baseIcon.shadowSize = new GSize(37, 34);
-
baseIcon.iconAnchor = new GPoint(9, 34);
-
baseIcon.infoWindowAnchor = new GPoint(9, 2);
-
-
// Create icon for this point using our icon class
-
var letteredIcon = new GIcon(baseIcon);
-
letteredIcon.image = "http://www.google.com/mapfiles/markerA.png";
-
-
// Set up our GMarkerOptions object
-
markerOptions = { icon:letteredIcon };
-
var marker = new GMarker(point, markerOptions);
-
Google Map API lets anyone embed maps at your webpage with JavaScript. The Maps API is a free service, available for any web site that is free to consumers. Please see their terms of use for more information.
Stating with google maps is very Simple.
1. Generate a key for your domain
2. Embed this Javascript file from google at your webpage http://maps.google.com/maps?file=api&v=2&key={YOUR_KEY} Don’t forget to replace the {YOUR_KEY} with actual key for your domain.
3. Create a div where you would like map to appear
4. Put JS code at your page to show the map.
Below code produes a map as shown in the image
-
<script src=’http://maps.google.com/maps?file=api&v=2&key={YOUR_KEY}’></script>
-
<div id="mapdiv" style="border: 1px solid #979797; width: 400px; height: 300px;">
-
</div>
-
<script language="Javascript">
-
<pre>if (GBrowserIsCompatible())
-
{
-
var map = new GMap2(document.getElementById("mapdiv"));
-
map.setCenter(new GLatLng(37.4328, -122.077), 13);
-
}
-
</script>
Note: Don’t forget to put html and body tags at your page. Otherwise map sometimes gives JS error.
If you are wondering from where I got the desired co-ordinates of city that I wanted to show, again Google maps Geo is here for your help. Use this URL http://maps.google.com/maps/geo?q=Pune,India&output=xml&key={YOUR_KEY} to find co-ordinates of any city that you want.
a. To Show zoom control options at left side of map use
map.addControl(new GSmallMapControl());
b. To add marker at map use GMarker function for creation of marker followed by addOverlay to addto add marker to map.
var marker = new GMarker(new GLatLng(18.520470,73.856621));
map.addOverlay(marker);
c. Want to show some message after clicking on the marker? Very simple.
GEvent.addListener(marker, “click”, function() {
var html = ‘<div style=”width: 210px; padding-right: 10px”>Hey!! This is lovely city Pune, where I work.</div>’;
marker.openInfoWindowHtml(html);
});
Wow!!! We are done. Finally this is how the map should look.
During past few months I observed that see so many developers face problems with div based layout. One of the major poblem they face in creating columns using div. We are very used to tables and we know its preety simple to create different columns through tables, just like
-
<table> <tr><td> Column 1</td><td>Column 2</td><td> Column 3 </td></tr></table>
Now what if you want to create similar structure using divs. Is it really difficult? Certainly not. Just create a main div and now place 3 divs inside it. Important is giving width to each div and mentioning “flot:left” for the inner divs.
-
<style>
-
#main { width:400px; height:300px; }
-
.left { width: 100px; height: 300px; float:left; }
-
.center { width: 200px; height: 300px; float:left; }
-
.right { width: 100px; height: 300px; float:left; }
-
</style> <div id=
"main"> <div class=
"left">Column
1</div> <div class=
"center">Column
2</div> <div class=
"right">Column
3</div> </div>
If you want all divs of same size like equal width columns then no need to even create different style for each column. Code shown below will also work for you.
-
<style>
-
#main { width:400px; height:300px; }
-
.sub { width: 100px; height: 300px; float:left; }
-
</style>
-
-
<div id=
"main"> <div class=
"sub">Column
1</div> <div class=
"sub">Column
2</div> <div class=
"sub">Column
3</div> </div>
