Take a look at Marylandlawyersearch.net. It's a web site I created so I could help my law firm clients. The idea is simple, its a directory of all my clients. The site could be considered a mash-up. It takes my client data and uses Google's Map API to display them. I also use jQuery because its just so damn fast and helpful.
My first concern was how to get my data dynamically into the site. I didn't want to have to update it every time I added a new client. Well I'm kinda starting in the middle here. I've already created a program to hold all my clients. I did this extremely quick using Ruby on Rails. This tutorial assumes you already have your client data in a database and you can access it via XML. I'll come back later and show how I made my client data program. With Ruby on Rails it was extremely easy to put it all together.
How this works:
- Client data is already in MySQL database
- Viewer visits index.php which reads from our database and outputs data into a JavaScript array
- Data is displayed on a map using Google's Map API
- Viewer clicks for more details and using AJAX we call a PHP file that reads from our data base.
- Returning the data and outputting the detailed information is handled by jQuery
PHP - What outputs the JavaScript
Our main page is mostly all HTML except for one line as shown below.
<?php
require_once(getdata.php');
listAllclientsformap();
?>
The function listAllclientsformap() displays each clients infomation in a JavaScript array. Let's look at that code.
function listAllclientsformap() {
// Where the ruby outputs the headings NOTE: We'll go over in another tutorial how to create and use a Ruby on Rails scaffold.
$requestAddress = "http://path/to/my/clients.xml";
// Reads contents
$xml_str = file_get_contents($requestAddress,0);
// Parses XML
$xml = new SimplexmlElement($xml_str);
// Loops XML
// Here is where each client is read from the XML, then output line by line into a JavaScript array - Easy!.
foreach($xml->client as $client) {
echo "locations.push(Array('$client->lat','$client->lng','$client->firmname','$client->city','$client->id'));\n";
}
}
JavaScript Code - The Output
So now each line that was output looks something like this once the page is loaded.
locations.push(Array('39.17165','-76.619951','Miller & Zois, LLC.','Glen Burnie','1'));
You can see I made a new array called locations, then we fill in that array. So my PHP script did all of that before the page was loaded.
Plotting on map
Now all of our data is dynamic, lets actually work on building the map and plotting the client's locations. It's pretty simple JavaScript now.
Make a new array
var markers = [];
Here we loop over every client. Along the way we extract lat & lng info and make a new variable called point which is a GLatLng object. We then use GMarker to map that point. Using addOverlay we add an overlay for that marker and add the marker to an array called markers
for (var i=0, len=locations.length; i<len; ++i ){
var point = new GLatLng(locations[i][0],locations[i][1]);
marker = new GMarker(point);
map.addOverlay(marker);
markers[i] = marker;
}
var maxWidth = 200;
Now we use jQuery to loop over the array markers we just created to do the following:
- Outputs each client in a ordered list.
- Creates a listener so when the client is clicked they are zoomed in on the map.
- Defines each info window that is displayed when their marker is clicked on.
These next few lines creates the client list that displays below the map. This shows the power of jQuery awesomeness. First we do a loop over each marker
$(markers).each(function(i,marker){
We add a <li> tag for each marker and give it the locList class. Then the clients name inserted. The output will be displays as the image above. Next we define what happens if the <li> tag is clicked on.
$("<li />").addClass('locList').html(locations[i][2]).click( function(){
Here we say to open an info window on the marker if clicked on. Next we define what the inside of that info box. In this case the clients detailed info in the locations array (locations[i][4]). We then say to append all of this before the id list.
marker.openInfoWindowHtml('<div class=\'infoWindow\'> <strong>'+locations[i][2]+'</strong><br>'+locations[i][3]+'<br><a href="#" onClick="showInfo('+locations[i][4]+');">Show Info</a></div>');}).appendTo("#list").wrap("<a href=\"#\" onclick=\"return false;\" style='color:black;'></a>");
Here we add a listener for the marker on the map (separate than our <li> listener). So if anyone clicks on the map marker we tell it to open a info window displaying more info.
GEvent.addListener(marker, "click", function(){
marker.openInfoWindowHtml('<div class=\'infoWindow\'><strong>'+locations[i][2]+'</strong><br>'+locations[i][3]+'<br><a href="#" onClick="showInfo('+locations[i][4]+');">Show Info</a></div>');
});
});
Finally some AJAX
No more playing around - click on a client so it displays them on the map. Now click on Show Info' - you will see the map closes and a new window appears. The resulting text you see is pulled from an external source and is called by the function showDetail. This is done by using jQuery's function .getJson function to query for detailed infomation on that client. It pulls from directly from our Ruby on Rails scaffold which outputs in JSON format without any configuration.
Note: We'll come back to this in another tutorial to learn about Ruby's scaffolding advantages.
The resulting JSON output looks like this:
JavaScript that calls JSON
Now that we know where the JSON comes from, lets go back to the JavaScript that calls it. We use the current client ID. The current client ID is stored in a form field #currentClient. So first we get that value using the function val. Then using jQuery's getJSON we get that URL which returns JSON information about that specific client. The resulting info as above is used and displayed on the map.
function showDetail(){
var clientID = $("#currentClient").val();
var url = "http://pathtomyscaffold/clients/" + clientID + ".json";
$.getJSON(url, function (data) {
$("#firmInformation").html(data.client.firmname);
$("#firmDescription").html(data.client.description);
});
What's next?
- Next we'll have a tutorial on how to quickly create a scaffold using Ruby on Rails. A Ruby on Rails scaffold will allow you to quickly create, edit, and destroy records in a MySQL database. The best part is - is extremely fast & easy. Thanks to Ruby on Rails scaffold you can get more work done in a small amount of time.
Source Files
- PHP that outputs JavaScript - getdata.php
- JavaScript is all visible in the source for MarylandLawyerSearch.net
Email to a friend
Share on Facebook