Back to contents PHP Python Ruby Choose a language:

The quickest and simplest way to visualise any data you’ve scraped is often via an HTML (+ Javascript) View. In this quick tutorial, you’ll learn what Views are, how they work, and how to write one that leverages the power of both the ScraperWiki API and the Google Maps API.

Making a map in a ScraperWiki View

Let’s start a new View by clicking view, next to New scraper in the ScraperWiki sidebar.

Pick HTML as your language, and then paste this into the Editor window:

<!DOCTYPE html> <html> <head> <title>UK Universities and Colleges</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <meta charset="UTF-8"> <style type="text/css"> html, body, #map_canvas { margin: 0; padding: 0; height: 100%; } </style> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script type="text/javascript"> var map; $(function(){ var myOptions = { zoom: 7, center: new google.maps.LatLng(53.405092, -2.969876), mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('map_canvas'), myOptions); }); </script> </head> <body> <div id="map_canvas"></div> </body> <html>

Save your View, and then click the "Preview" button in the Editor. Your new View will open up in a new window, showing a map of the British Isles, centred on ScraperWiki HQ in Liverpool. Magic!

How did we do it?

This CSS makes the map fill the whole window:

<style type="text/css"> html, body, #map_canvas { margin: 0; padding: 0; height: 100%; } </style>

These two <script> tags pull in the Google Maps Javascript library (required to make the map), and the jQuery javascript library (will come in useful later):

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

And this bit of Javascript sets the location we’d like to centre our map on, and creates the map.

<script type="text/javascript"> var map; $(function(){ var myOptions = { zoom: 7, center: new google.maps.LatLng(53.405092, -2.969876), mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('map_canvas'), myOptions); } </script>

Note how the options include the default zoom level, the location coordinates, and the style of map we’d like to see. Here we’re picking the ROADMAP style, but you could also use SATELLITE for a satellite image, HYBRID for a satellite image with overlayed roads and placenames, and TERRAIN for a map of physical features. For more information, see the Google Maps API documentation.

We could always change the map’s central spot, zoom level, or style later using something like this:

var pos = new google.maps.LatLng(52.11249, -2.61793); map.setCenter(pos); map.setZoom(2); map.setMapTypeId('TERRAIN');

Adding a marker at a specific point is just as easy:

var pos = new google.maps.LatLng(52.11249, -2.61793); var marker = new google.maps.Marker({position:pos, map:map, animation: google.maps.Animation.DROP, title:"OHAI!"});

All you need is a latitude and a longitude. I wonder where we could find some of those…

Getting data out of the ScraperWiki datastore with jQuery

This little bit of code is all we need to get the locations of every UK university and college out of our datastore, and ready to plot on the map:

$.ajax({ url: 'https://api.scraperwiki.com/api/1.0/datastore/sqlite?format=jsondict&name=uk_universities_and_colleges&query=select%20*%20from%20%60universities%60%20where%20latitude%20is%20not%20null', dataType: 'json', success: function(data){ drop_markers(data); } });

Here we’re using the jQuery.ajax() function to call the ScraperWiki datastore and return a list of data points. Once jQuery has received the data, it passes it through a function we’re about to write called drop_markers(). Simple.

If you’d like to know more about jQuery.ajax(), check out our guide to Using Ajax with ScraperWiki.

Putting data on the map

Once the ScraperWiki datastore has returned our data points, we need to get the Google Maps library to plot them on our map. To keep everything neat, we’ll do all of that in the drop_markers() function.

Add this new code to your View, so the whole <script>…</script> part looks like this:

<script type="text/javascript"> var map; $(function(){ var myOptions = { zoom: 10, center: new google.maps.LatLng(0, 0), mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('map_canvas'), myOptions); $.ajax({ url: 'https://api.scraperwiki.com/api/1.0/datastore/sqlite?format=jsondict&name=uk_universities_and_colleges&query=select%20*%20from%20%60universities%60%20where%20latitude%20is%20not%20null', dataType: 'json', success: function(data){ drop_markers(data); } }); function drop_markers(data){ bounds = new google.maps.LatLngBounds(); for(i = 0; i < data.length; i++){ myLatLng = new google.maps.LatLng(data[i].latitude, data[i].longitude); markerOptions = {position: myLatLng, map: map, title: data[i].name}; new google.maps.Marker(markerOptions); bounds.extend(myLatLng); map.fitBounds(bounds); } } }); </script>

The drop_markers() function takes our data points, extracts the latitude and longitude information from each, and plots those points on the map. It then resizes the map to make sure all the points fit on at the same time (very handy!).

If you click the "Preview" button in your Editor now, you’ll be able to see it in action.