GEOG5870/1M: Web-based GIS A course on web-based mapping

How mashups work

Mashups have a generic structure where they integrate data from external (to Google) sources with a Google map base. The external sources may well be (and often are) also external to the producers of the mashup, although this does not necessarily have to be the case. Google Maps can handle many different data types:

In this course we will mainly focus on JSON and GeoJson (which are very similar). However KML is historically important as it was developed for use within Google Earth and Google Maps. KML is an XML notation for expressing geographic data formats. It became an international standard of the Open Geospatial Consortium in 2008 when its status as the open standard for all geobrowsers was assured. An example of a KML file is shown below.

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2">
<Document>
  <name>KML example</name>
  <Placemark>
    <name>School of Geography</name>
    <description>The School of Geography, University of Leeds
    http://www.geog.leeds.ac.uk</description>
    <Point>
      <coordinates>-1.557428,53.807767</coordinates>
    </Point>
  </Placemark>
  <Placemark>
    <name>Old School of Geography: East building</name>
    <description>Old School of Geography, University of Leeds
    http://www.geog.leeds.ac.uk</description>
    <Point>
      <coordinates>-1.556783,53.807836</coordinates>
    </Point>
  </Placemark>
</Document>
</kml>
A simple KML file

In this example, two locations ('Placemarks') are defined. Each placemark has a name, a description and – most importantly – a location. The locations are given in longitude and latitude and in decimal degrees rather than degrees minutes and seconds (i.e. 53.807836, rather than 53° 48' 28.21"). Two points are defined in this example, located on the new building of the School of Geography, and the old building, which it moved out of in 2014, sometimes called "The East Building".

If the above file was placed on a web server, then a link to the file could be pasted into the Google Maps query box, and the resulting map would contain markers at the two points. See this blog post if you are interested. This is a useful facility, as anyone can create a file in this format, publish it, and then use it to map the data. The format is regular, and thus it would be easy to write a program that took some source data with a large number of points, and created a KML file with entries for all the original points.

It is easy to think of many examples where data could be easily plotted using this approach. However, it is ultimately limited, in that there is little control over the presentation of markers or other map elements. Much more can be done by interacting with the Google Maps API. The API (Application Programming Interface) is a set of code options for interacting with Google Maps.

In general, we divide web programs into client-side elements (written in languages like JavaScript) and server-side elements (written in languages such as PHP). Client-side programs are interpreted and processed by the client application – in this case, a web browser. Server-side programs are processed on a web server, in order to dynamically produce the contents of a web page, before sending that web page (or components of one) to the client. Client-side programs may cause server-side programs to run.

In the case of Google Maps, we write client-side code which interacts both with a client-side library of code supplied by Google, and with the Google servers through this library. In JavaScript a 'library' is a collection of one or more chunks of code to do a variety of related jobs. As we'll see, these come as one or more JavaScript files. In Google's case, the library provides client-side mapping, plus access to the Google Maps server. It does both through the API.

You'll have a go at writing some code shortly.


[ Next: API ]
[Course Index]