So, we should now have a page with a BODY like this:
<DIV id="map"></DIV>
<SCRIPT type="text/JavaScript">
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('http://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution:
'Map data ©OpenStreetMap contributors,
CC-BY-SA, Imagery ©CloudMade',
maxZoom: 18
}).addTo(map);
Copy and paste your PHP and JS files from task 4 into the same directory as the map.html you just created using Leaflet. In the HEAD of the map.html file, add a link to your script.js from task 4 and also a link to the jQuery library, as below:
<SCRIPT language="JavaScript" type="text/JavaScript" src="script.js"></SCRIPT>
<SCRIPT language="JavaScript" type="text/JavaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></SCRIPT>
If we're going to use both JavaScript functions in our webpage (i.e. one to load the Leaflet map and one to return data from the database),
it makes sense to have them in the same file, so the flow is clear. With this in mind, open
script.js and cut and paste the mapping script code from the Leaflet tutorial into the top of your fetchData() method
– remember, as you are pasting into a Javascript file, you don't need to include the script tags from the HTML file.
Make your map object global by calling var map; at the top of the script outside any existing functions then remove the var
declaration from any other references to the map object.
Let's get our map working now the Leaflet script is in script.js. Comment out (using "//") the call to
writeTweets() in script.js so the screen doesn't fill with data, and then in the HTML file change the BODY
tag to the following code to call fetchData() when the page opens:
<BODY onload = "fetchData()">
This method should now run when the page loads. Check you can see your map.
Provided you can see the map, let's now adjust the script so that rather than calling
writeTweets(), it calls another function plotTweets() that adds the Postgres data to the
map.
At the end of the Postgres task, you'll remember than the tweets we were dealing with were in a JavaScript array
tweetData. Very conveniently, Leaflet has a method that will generate an array of geographical
location objects from lats and longs. We can then use this to set up markers. Here's the code:
function plotTweets() {
//Loop through tweetData to create marker at each location
for (var i = 0; i < tweetData.length; i++) {
var markerLocation =
new L.LatLng(tweetData[i].lat, tweetData[i].lon);
var marker = new L.Marker(markerLocation);
map.addLayer(marker);
marker.bindPopup(tweetData[i].body);
}
}
Add this function to your script underneath the previous code, and then call it where you were calling
writeTweets(). Hopefully you can now see the tweets on a map.
While this may seem like overkill, when you could just store the tweets in a Google spreadsheet and press a button to map them, let's step back a bit and look at what we've now got – a full end-to-end software solution stack where we can map our own data, uploaded in whatever fashion we like (we could, for example, get PHP to collect it for us continually), and display it over a variety of basemaps, using any query we fancy. This is a significant advance. It is also a good foundation for a final issue we might like to tackle – getting users to upload their own data.