Working with Mashups - Calculating Muslim Prayer Times Based on Google Maps

By Aymen A. Solyman

"Mashup" is a term that describes"Web 2.0" websites that join the features of one website to another one. According to Wikipedia, a mashup is a Web application that combines data (content) from more than one source into a single integrated tool. An example is the use of spatial data from Google maps, added to location information, added to business data, thereby creating a new and distinct Web service that was not originally provided by any of those sources.

A mashup web application has three parts:
  1. A Web page that provides a new service using its own data and data from other sources (from additional content providers)
  2. An additional content provider that makes data available across the Web through an API and using different Web protocols
  3. The user of the mashup, who often uses a Web browser to display the Web page containing the mashup
Mashups are based on SOA (service orientated architecture) friendly data and access standards such as WSDL (Web Services Description Language), HTTP (Hypertext Transfer Protocol) and RSS (really simple syndication). Mashups range from ad-hoc applications mashing together data from a couple of sources in a simple way, to complex applications that aggregate well-groomed services with other data sources and feeds to create entirely different perspectives on the original data. Development of mashups can be done by everyday Web users with knowledge of scripting.

Mapping Mashups
It all started with a man named Paul Rademacher who took Google maps (which launched in 2005) to the next level when he created, the very first Google maps mashup. To make his hunt for a new house easier, he essentially hacked Google maps, modifying the application to overlay information on houses for sale or rent from, a popular site for classified advertisements. Google employees were impressed, writing on a company Web page that Rademacher's site"blew our minds right off our shoulders." Since then, online mapping applications have become far more sophisticated. The major players in online mapping have all embraced mashups and now offer APIs (application programming interfaces) that allow developers to integrate online maps with their own websites and data.

Top APIs for Mashups. Source: Programmable Web.

An API is a set of software routines, protocols and tools that provides a developer with all the building blocks for developing an application program for a specific platform (environment). An API also provides an interface that allows a program to communicate with other programs, running in the same environment. There are many types of APIs: operating system APIs, application APIs, toolkit APIs and Web APIs.

Google Maps APIs
The Google Maps API is based on a simple set of classes. These classes can be used within a JavaScript container, directly within an HTML page, and linked to a database. All of the functionality of a Google Map is based on this simple premise of an embedded JavaScript object built into a Web page. The interface to the API is straightforward, but the simplicity hides some powerful classes, objects and interfaces that enable it to manipulate the Google Map. By combining this interface with the data you want to display, you can support interactive elements on the Web page without having to reload the page or redisplay portions of the map. The key feature of working with Google Maps APIs is using the longitude and latitude of any feature of the map.

According to Programmable Web, mapping mashups represent about 50% of total developed (submitted) mashups, and Google presents about 46% of those.

The Common Features of the Mapping APIs
The big three - Google, Yahoo, and Microsoft Virtual Earth - have basically converged, and their map display APIs look more or less alike, implementation details aside. Each offers a way to display a map on a Web page using JavaScript, control the geographic extents and scale of the map, add markers to that map, and trigger various actions based on a flexible user interaction event model. Figure 1 shows the standard data flow in the mapping APIs.

Figure 1 – Data flow diagram. (Click for larger view).

An Example: Calculating the Prayer Times, Distance and Direction to Makkah based on Google Maps APIs
In order to calculate prayer times, three factors must be considered: date, location and methods of calculation. Figure 3 shows the main parameters of the prayer times equation.

The application uses Google Maps to retrieve the longitude and latitude of any selected point on the map, and sends these coordinates to the Web service to retrieve the basic data of the selected location (location data, time zone data, weather data and elevation data), as shown in figure 4. The location coordinates (longitude and latitude from Google Maps), plus time zone and country name ( are used as parameters in the prayer times equations.

Figure 2 – The main parameters of the prayer times equations. (Click for larger view).

Methods and parameters of calculating the prayer times:

1. Muslims have five prayer times each day (Fajr - Dohur - Aser - Maghrab - Isha); the time the sun rises also needs to be calculated.

2. Prayer times are calculated based on (four Muslims Mazhabs): Almazhab AlSHAFI-Al Malki- AlHanbali. Almazhab AlHanafi not considered.

3. The world is classified into five regions in the equations:
  • Gulf Countries (Saudi Arabia-Qatar-Kuwait-UAE-Bahrain-Oman-Yemen) are based on OM-ALQURA (Makkah Almokarama) calendar.
  • USA and Canada are based on Islamic Union of North America.
  • Egypt is based on Egyptian General Survey Authority.
  • Pakistan is based on Islamic University of Science Karachi.
  • The other countries are based on Muslim World League.
4. Prayer times equations are calculated based on Astronomical Algorithms by Jean Meeus.
For example, to calculate the Fajr prayer time, we use the following equation:
TF = ACOS ((SIN(-18)-SIN(ASIN(SIN(23.439-0.0000004*D)*SIN(L +1.915*SIN(M)+0.02*SIN(2*M)))*SIN(Lat))/(COS(ASIN(SIN(23.439-0.0000004*D)

D = ((367*Y)-(INT((7/4)*(Y+INT((M+9)/12))))+INT(275*(M/9))+d-730531.5)
M = 357.528+0.9856003*D

5. Distance and direction to Makkah Almokarama are calculated based on Haversine formula.

The formula states: For two points on a sphere (of radius R) with latitudes φ1 and φ2, latitude separation Δφ = φ1 − φ2, and longitude separation Δλ, where angles are in radians, the distance d between the two points (along a great circle of the sphere; see spherical distance) is related to their locations by the formula:

Figure 3 – The Arab Locator interface. (Click for larger view).

Google Maps APIs Resources
Google API Documentation
Working with Google maps
Articles and Tutorials on Google maps
Google Maps Mania
Google Mashup Editor, Google
Programmable Web (Keeping you up to date with mashups)

Published Tuesday, December 16th, 2008

Written by Aymen A. Solyman

If you liked this article subscribe to our newsletter...stay informed on the latest geospatial technology

© 2016 Directions Media. All Rights Reserved.