The javascript page...
Good stuff up the top, standard stuff towards the bottom.
Twitter and Google maps combined.
Although it ended up as a server-side task, it's staying here.
A current project requires the ability to track an expedition up three of europes highest peaks.
With the money raised going to charity, can we come up with a plan that will allow the world to follow our intrepid explorers en route for free? Let's have a go using twitter and google maps...
We can easily embed a twitter feed into this page using some bog standard html and some ripped off javascript.
Next up, map it. As long as we follow the mantra and 'don't be evil', which we're not 'cos it's all for chaaarity, we can use google map's API simple example and drop it right into our page.
So we've got our embedded 'live(ish)' twitter feed and a static google map. However, the good people at google allow us to set the long and lat of the maps centre point within the code. This means that any co-ordinates sent to our twitter feed can be ported across to google maps script.
So with a bit of custom javascript manipulation the team will be able to 'tweet' their (long/lat) position from a mobile phone, and the whole world will be able to see where they are.
This is all well and good, but a twitter feed of co-ordinates will somewhat limit it's appeal, thus we need to be able to differentiate between a valid co-ordinate and a random 'Hello Mum' message.
Therefore we'll set up the following :-
- A CRON job on our host's server will download an XML document of the whole twitter feed every 30mins,
with the following script:
curl -u myusername:mypassword http://api.twitter.com/1/statuses/user_timeline.xml -o "/somewhereontheserver/curpos.xml"
- Everytime the webpage is requested, we'll run a script that searches the XML doc for a special current position code.
- When the lastest instance of the code is found, we'll drag out the co-ordinates and use them to centre the google earth map.
Click here to see the results.
with the following script:
curl -u myusername:mypassword http://api.twitter.com/1/statuses/user_timeline.xml -o "/somewhereontheserver/curpos.xml"
So while the lastest status update is over on the right (which could say anything), our mapping script uses the latest 'tweet' that contains the 'curpos=' code.
NOTE : There will be a maximum 30 minute delay between twitter update and map update, due to the way the CRON task has been arranged.
At the beginning...
Javascript is primarily a client-side script. Client-side means it runs in your browser, without having to request any information from the server. It's generally used to enhance the users experience, by speeding things up and making everything run smoothly.
A typical useful application would be to test whether the credit card number entered on an ecommerce site is valid. If the user enters a rude word, or anything other than a 16 digit number, we can use javascript to tell the user to behave themselves and try again. This speeds up the whole process, as we don't need to transfer data to/from the server to confirm that 'bunch of arse', although very amusing, isn't a valid CC number.
We can also use javascript to manipulate an object on the screen.
In what is possibly the worst example on the net, here's a quick javascript demo.
The underlying HTML in this document will request the picture from the server. Once the request has been fulfilled, the server can take a back seat. When we click the 'Fade Away' button, Javascript manipulates the properties of the object. In this case, the property is its opacity and the object is the piccy.
If you haven't got a modern browser like firefox or safari this bit won't work, but we can't ignore Internet Explorer, so we have to sort a cross browser compatibility issue.
Cue jQuery; a library of functions that we can place in our javascript folder. We then call the required functions, as and when we need them.
So we call the functions fadeIn() and fadeOut() from jQuery, as opposed to the functions that were created above.
The beauty of using a library like jquery is that these browser compatibility issues have already been sorted.
NOTE : jquery is not an excuse not to learn some javascript.
AJAX test that accesses a couple of text files on the server.
Click to let AJAX change this text
