1. DSL (Domain Specific
Language) for Maps
Mashups
by Ali Raza
05/17/09
Advisor
Dr. Chen

2. Overview
► Abstract
► Keyword List
► Introduction
 Definition of Problem
 Project Objectives
 Development Environment
 Operational Environment
► Requirement Description

3. Overview (Continue..)
 SRS for the project
► Use Cases
► DesignDescription for DSL
► Implementation
 Data Retrieval Element
► Unit Testing of Data Retrieval Element
 Mashup Adapter Element
► Unit Testing of Mashup Adapter
 Call Google Service Element
► Unit Testing of Google Service Element

4. Overview (Continue..)
 Call Flickr Service Element
►Unit Testing of Flickr Service Element
 Call Yelp Service Element
►Unit Testing of Yelp Service Element
► Deployment
► Running Application
► Configuration File
► Exception Handling

5. Overview (Continue..)
► Conclusionand Recommendation for
Enhancement
► Reference

6. Abstract
► The world-wide-web (WWW) has been constantly changing. In recent year
major web services have opened their private networks to the public in the
form of Web APIs. This allows the formation of the custom applications which
use those APIs and local data sources called mashups. These mashups
applications need some kind of unified model language by which users can
create and reuse those mashups. The goal of this project is to build the
unified language (internal domain specific language) for maps mashups which
will satisfy the quality attributes such as modifiability and usability. The reason
for this project is to display that industry needs a domain specific language for
maps mashups. For this purpose the Domain Specific Language (DSL) will be
introduced. This would be a framework, and by using this framework,
organizations can build maps mashups in a uniform manner. As a result
maintainability will become easier with quality output and, organizations can
use fewer resources. Furthermore, this project also demonstrate how user can
remix and reuse different APIs by using this framework, as a result mashups
applications can be developed quickly and easily such as ‘Find a Dentist’ or
‘Find an restaurants ’. This project attempts to provide the framework about
the DSL for maps mashups, and its implementation. It also outlines the
architecture and design specification for maps mashups framework. For this
purpose three major APIs have been selected, Google, Flickr and Yelp API.
Also, for remixing with the user data, mySQL database has been selected.

7. Keywords
► Domain Specific Language for Maps
Mashups, Maps Mashups, Mashups with
Google, Mashups with Flickr, Mashups with
Yelp, DSL for Mashups, Google Maps, DSL
for Google Maps

8. Introduction
► Definition of Problem
 How many times have we seen a website and said “This would be exactly what I
wanted if only…” If only the website owner could take the address for those dentist
or broker or agents and plot them on one map. How often do we wish that we
could make all the different parts of our digital world – our email, word processor
document, photos, search result, maps, and presentations- work together more
flawlessly? After all, it’s all digital malleable information – shouldn’t it all just fit
together?
 In fact, all the data, web sites, and applications we use could fit together. We could
do it by remixing information to create our own mashups. In web development, a
mashup is a web application that combines data from more than one source into a
single integrated tool; mashups seamlessly combine content from the web together
into a new integrated experience. Content used in mashups is typically sourced from
a third party via public interface or so called API.
Mashups = API1 + API2 + API[n]

9. Introduction: Definition of Problem
(Cont)
 These Web APIs (or Web services) are in the form of Representational State Transfer (REST),
Atom Publishing Protocol (APP), and SOAP services, as well as RSS and Atom data services. The
world-wide-web (WWW) paradigm is also shifting towards program Web applications using
dynamic programming languages and frameworks, e.g., JavaScript with AJAX, Ruby with Ruby
on Rails (RoR), and PHP with Zend framework. These frameworks are facilitating web
programming however none of them are focused directly on facilitating services mashups and
helping deal with the common distributed systems issues that arise.
 Domain-specific language (DSL) is a customized language built on top of any programming
language. In addition, DSL is a computer programming language of limited expressiveness
focused on a particular domain. It provides common syntax and semantics to represent
concepts and behaviors of the particular domain. In general, by using or designing DSL, we can
achieve these goals such as abstraction, terse code, simple and natural syntax, ease of
programming and code generation. There are two kinds of DSL; Internal DSLs are written in
host language –conventionally use of subset of host language syntax; External DSLs are
separate to host language – needs a complier/interpreter to execute; Language Workbenches
are IDE design DSLs. Such tools allow users to define the abstract syntax of the language
together with editors and generator.

10. Introduction: Definition of Problem
(Cont)
 Currently there are some tools available in the marketplace which allows
user to build mashups without even writing a code. However, it doesn’t
always mean building mashups is easy. Those techniques employ a widget
approach, where users select, customize and connect to perform complex
operations [11].

11. Introduction: Project Objective
► This project will present an internal DSL (Domain Specific Language) and platform for
services mashups that can improve some of the issues. In particular, (1) gives a uniform
model for service operations’ interactions by using simple and natural syntax, (2) a
common high-level implementation for maps mashups.
► The DSL for maps mashups project will be the framework that will wire Web APIs. Users
(developers) can create any maps mashups quickly. Additionally, this framework will
build the applications which satisfy the quality attributes such as modifiability and
maintainability. To achieve those quality attributes, the DSL for maps mashups will apply
the architectural and design patterns for each quality attribute. As a result, users
(developers) can create any maps with minimum effort.

12. Introduction: Project Objective (Conti..)
► For instance, by using this framework users (developers) can create maps mashups
which can find the dentists or agents or brokers functionality for the insurance company
or find the dealer functionality for any car company. Moreover, this DSL framework will
enhance the quality, productivity, reliability, maintainability, and reusability of the maps
mashups applications by using the architectural and design patterns.
► The project will implement the ‘Find’ use case web application. For instance, by using
this framework, user can easily create the mashups with the data, Google, Flickr and
Yelp API.
► For this purpose, DSL for maps mashups will implement the Dentist Maps web
application. This is because the existing dentist search web applications are using a
legacy web application paradigm to find the dentists. Therefore, they are not very user
friendly and intuitive because they are using Web 1.0 technology.

13. Introduction: Project Objective (Conti..)
► Moreover, in order to complete this project, I will be using the techniques and tools
which I have learned in this program such as applying software requirement specification
(SRS) as per IEEE standard, software architecture specification and detail design
specification. Furthermore, this project will apply quality attribute tactics for the DSL
framework as per SEI guidelines such as availability tactics, modifiability tactics,
performance tactics and usability tactics by using the architectural and design pattern.
So that ‘Find’ use case can be created and developed easily, quickly with quality output.

14. Introduction: Development Environment
► Operating System: Windows
► Runtime: Java Virtual Machine
► IDE: Eclipse
► Server Side Languages: Java, J2EE
► Clients Side Language: JavaScript
► Parsers: JSON, XML
► Web Server: Tomcat
► Technologies and API: AJAX, Struts, JDOM,
JConnector for MySQL,

15. Introduction: Operational Environment
► Runtime: Java Virtual Machine
► Database: MySQL
► Browser: Internet Explorer
► External APIs: Google Maps, Flickr API and
Yelp API

16. Requirement Description
► Project Scope
 The DSL of Maps Mashups will present an internal DSL (Domain Specific Language)
and platform for services mashups that can improve maintainability and productivity.
In particular,
 It gives a uniform model for service operations’ interactions by using simple and
natural syntax
 A common high-level implementation for maps mashups.
 Optimize and Support for IE Browser
 The project will implement the ‘Find’ use case web application. For instance, by
using this framework, user can easily create the mashups with the data, Google,
Flickr and Yelp API.

17. Requirement Description (Conti..)
► Project Perspective
 There are many open source APIs available in the marketplace which allow users to
build mashups functionality. However, there are few which only use the DSL concept
which includes Yahoo Pips and Swashups by IBM product.
 The DSL for maps mashups will be the framework which allows users to wire open
source services. However, due to the resource limitation only Google Maps, Yelp and
Flickr API will used to implement the DSL Maps Mashups. On the other hand, this
initial version will be hopefully continued and in the future it will make use of other
APIs services such as facebook login id, twitter APIs and so on and so forth.
 At the same time other browser support will be added such as FireFox.

18. Requirement Description (Conti..)
► Product Features
 Allow users to send the data
 Allow users to use Google APIs
 Allow users to use Yelp APIs
 Allow users to use Flickr APIs

19. Requirement Description (Conti..)
► Design and Implementation Constrains
 The product shall use the JavaScript technology for the mashups. This is because
the solution should be platform independent, and developers simply add DSL
framework. Additionally, this will help in maintainability and modifiability. This is
because user can modify the mashups without even compile or deploy. Moreover,
this solution is only optimized for Internet Explorer browser.
► User Documentation
 Additionally, all the artifacts will be provided so that it can be modified in the future.

20. Requirement Description (Conti..)
► Assumptions and Dependencies
 Optimize and Support for Internet Explorer Browser.
 For Flickr, users of that DSL must have an user account on Flickr
 User must retrieve a key from Flickr to use Flickr API, Yelp key from Yelp to use Yelp
API and Google Map key to use Google API.
 For Binding Google Map and Flickr, user must have Flickr tag Name stored into the
database
 For Binding Google Map and Yelp, user must have PhoneNumber stored into the
database.

21. Requirement Description (Conti..)
► Software Quality Attribute
 Availability
 Maintainability
 Portability
 Testability

22. Use Case Diagram

23. Design Description
► Attribute Driven Design (ADD) has been selected for the architecture of DSL framework.
► Identify Candidate Architecture Drivers

24. Design Description (Continue..)
► Choose Design Concept that Satisfies Architectural Drivers
 Identify design concerns

25. Design Description (Continue..)
► Capture Preliminary Architecture Views
Dispatch Service Request such
as Google, Yelp or Flickr for
Request for Mashup Service
Mashup with User Data
Invoke Service
Invoke Open Source API

26. Design Description (Continue..)
► Instantiate Architectural Elements and Allocate Responsibility
DSL Framework
Mashup Adapter Data Retrival
Request for Mashups
Call Google Service
Call Yelp Service
Call Flickr Service

27. Design Description (Continue..)
► Assign Responsibilities to Elements according to Patten Type

28. Design Description (Continue..)
► Allocate
Responsibilities associated parent
element among its children.
 Mashups Adapter – This element is responsible for calling different various API. Also,
the data such as user information from the database will be the passed into this
element.
 Call Google Service – This element is responsible for calling Google open Source
Service.
 Call Yelp Service – This element is responsible for calling Yelp open Source Service.
 Call Flickr Service – This element is responsible for calling Flickr open Source Service.

29. Design Description (Continue..)
► Define interfaces for Instantiated Elements

30. Design Description (Continue..)
DSL for Maps Mashups Logical View
DSL for Maps Mashups
Browser/ Get Values from Flickr (Photo
URL)
Client An Application which uses
‘Find Use Case’ Get Values Yelp (Business
Side Reviews etc)
Map Markers on
Google Map
XML for
Google API
Get Latitude
Middleware and Longitude
Get Data
if address will
Layer be provided by
From MySQL
user.
Point
Solutions
Application Database

31. Implementation
► Data Retrieval Element

32. Implementation (Continue..)
► Steps for Data Retrieval Element
 User invoke the action ‘entryAction.do’ or user can provide the address along with
the action, For instance
http://localhost:8080/DSLMapsMashups/entryAction.do?address=3733%20N%20Harbor%
 http://localhost:8080/DSLMapsMashups/entryAction.do
 Then the application goes to action class, if user send address then set all the values
into the customerAddress object, send this request to business delegate
 In business delegate object if customer address is not null then get the latitude and
longitude of the address which user would like to find, for instance dentist or
restaurants, else send this request to DAO object. The latitude and longitude data is
getting received by using GEOCoder class. In this class system is invoking Google
API and along with user provided address and in return system is receiving
coordinates, latitude and longitude.
 In DAO object system connects to mySQL database and retrieves data, and set this
data into the list.
 This list then eventually will be sent into the request object in the Action class
 Action class then calls servlet, XMLOutput.
 XMLOutput then render this list object and transform this object into the XML layout.

33. Implementation (Continue..)
► Creating a Database

34. Implementation (Continue..)
► Unit Testing for Data Retrieval Element

35. Implementation (Continue..)
► Mashup Adapter Element
 mapsMashupsWithFlickrYelp syntax
 mapsMashupsWithFlickr syntax
 mapsMashupsWithYelp syntax
 mapsMashupsWithData syntax

36. Implementation (Continue..)
► mapsMashupsWithFlickrYelp syntax

37. Implementation (Continue..)
► Unit Testing of mapsMashupsWithFlickrYelp syntax
 var mashupAdapter = new MashupAdapter();
 mashupAdapter.mapsMashupsWithFlickrYelp(map, data);

38. Implementation (Continue..)

39. Implementation (Continue..)
► mapsMashupsWithFlickr Syntax

40. Implementation (Continue..)
Unit Testing
 var mashupAdapter = new MashupAdapter();
 mashupAdapter.mapsMashupsWithFlickr(map, data);

41. Implementation (Continue..)
► mapsMashupsWithYelp Syntax

42. Implementation (Continue..)
Unit Testing
 var mashupAdapter = new MashupAdapter();
 mashupAdapter.mapsMashupsWithYelp(map, data);

43. Implementation (Continue..)
► mapsMashupsWithData Syntax

44. Implementation (Continue..)
Unit Testing
 // Creating Mashup with MySQL Data only
 var mashupAdapter = new MashupAdapter();
 mashupAdapter.mapsMashupsWithData(map, data);

45. Implementation (Conti..)
► Call Google Service Element
 setGoogleMap syntax
 For setGoogleMap syntax, there are six parameters,
such as map, set map’s latitude, set map’s longitude,
set maps mid Point, set map Zoom level, set mapModel
like G_NORMAL_MAP, G_HYBRID_MAP. Usage of this
syntax is shown below.
 map = googleMaps.setGoogleMaps(map, 33.913442,
-117.933678, 10, 12, G_NORMAL_MAP);

46. Implementation (Continue..)

47. Implementation (Continue..)
► createMarker syntax
 CreateMarker syntax, create the marker on the Google
Map by using Yelp, Flickr and XML Data. For this
purpose GoogleMakers class has been created. User
must send points (latitude and longitude), name to
display on the popup box, address to display on the pop
box, flickr Image and yelpObj. This method must be
invoked in the Mashup Adapter class, after parsing the
data from the XML, calling Yelp and Flickr.
 var googleMarkers = new GoogleMarkers();
 var marker = googleMarkers.createMarker(point, name,
address, flickrImage, yelpObj);

48. Implementation (Continue)

49. Implementation (Continue..)
► createMarkerYelp syntax
 var googleMarkers = new GoogleMarkers();
 var marker = googleMarkers.createMarkerYelp(point, name,
address, yelpObj);
► createMarkerFlickr syntax
 var googleMarkers = new GoogleMarkers();
 var marker = googleMarkers.createMarkerFlickr(point, name,
address, flickrImage);
► createMarkerData syntax
 var googleMarkers = new GoogleMarkers();
 var marker = googleMarkers.createMarkerData(point, name,
address);

50. Implementation (Continue)
Call Flickr Service Element
► For invoking Flickr API, first of all we need to retrieve Flickr tag name from the XML
data. This tag name is for binding purpose between Google and Flickr. Therefore, DSL
framework uses this tag name from the XML document, constructing Flickr URL, and
invoke Flickr API sync call by using XMLHTTPRequest() object, as a result system
would retrieve the result, image.
► So in otherwords, system is invoking Flickr API which is synchronized call. For this
purpose, we must have an account in Flickr, uploaded all the images and set the tags
for each images. Each data row contains the Flickr Tag, therefore for each row;
system is invoking the Flickr URL [23] with the tags specified. For instance,
► "http://api.flickr.com/services/rest/?
method=flickr.photos.search&api_key=3b7e491810eec61557ba160b4d93bf8d&user_i
d=35651021@N05&tags=" + flickrTag +"&format=json
► As a result, system is getting a flickr response in the form of JSON, from which system
is getting the image URL, for instance
► http://farm4.static.flickr.com/3364/3519357915_0611da1db5_t.jpg
► Then the system will use this URL and create the image HTML element. Additionally,
for this element three anonymous function as been used 1) invokeFlickr, jsonFlickrAPI
and flickr_photo_url. Invoke Flickr is invoking Flickr API and jsonFlickrAPI is getting
the response back from the Flickr and calling flickr_photo_url for image URL.

51. Implementation (Continue)

52. Implementation (Continue)
Call Yelp Service Element
► For invoking Yelp API, first of all we need to retrieve phone number from
the XML data. This phone number element is for binding purpose between
Google and Yelp. Therefore, DSL framework uses this phone number from
the XML document, constructing Yelp URL, and invoke Yelp API sync call by
using XMLHTTPRequest() object, as a result system would retrieve the
result, business object, which will convert in the HTML.
► Similarly for the Yelp, system is invoking Yelp API which is also a
synchronized call. For this purpose DSL is sending request to Yelp API by
using Phone Number. This phone number must be provided to the DSL. For
each row, system is sending the request to Yelp [24] by using following URL
► "http://api.yelp.com/phone_search?phone=" + phoneN +
&ywsid=7bH2vBFox4rT2hgOqzwpWA";
► As a result, system is getting a Yelp response in the form of JSON, from
which system is getting a complete HTML, and sending this to the marker
syntax. Additionally, for this element two anonymous function as been used
1) invokeYelp, and generateInfoWindowHtml. Invoke Yelp is invoking Yelp
API and generateInfoWindowHtml is converting business object in the HTML

53. Implementation (Continue..)

54. Deployment

55. Running Application
► In order to connect to mySQL database we must deploy this
application on Tomcat or any JVM Web Server.
► Since, this solution is a JavaScript Solution and we can provide XML
manual instead of connecting to database, therefore this solution can
be run without even deployment process. For this purpose we can
simply go to UnitTest folder provided with source code, and click of
any file which belongs to demoRestaurants*.html. This is because all
demoRestaurants*.html files are using restaurantsData.xml file for the
demo purpose. Please make sure that this solution has been optimized
on Internet Explore browser; therefore please open those files in IE
only.

56. Configuration File
My SQL
For mySQL, DSL application is using application resource properties, contains all mySQL configuration parameter. Please change according to user
mySQL.
# Database Configration Parameters
database.userName = root
database.password = welcome
database.url = jdbc:mysql://localhost/data
Keys
User must get the key in order to reuse this framework. Currently those keys are used in two places for Yelp and Flickr they are in keyFile.js and for
Google API it’s the part of the HTML file, script tag. Additionally, for GEO coding (latitude and longitude) Google API key has been used.
► keyFile.js
► var YELP_KEY = "7bH2vBFox4rT2hgOqzwpWA";
► //Key for Flickr
► var Flickr_KEY = "3b7e491810eec61557ba160b4d93bf8d";
► All HTML files, where map has been used
► <script src="http://maps.google.com/maps?file=api&v=2&
► key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxTPZYElJSBeBUeMSX5xXgq6lLjHthSAk20WnZ_iuuzhMt60X_ukms-AUg"
► type="text/javascript"></script>
► GeoCoder Class in edu.fullerton.mashups.util package
► private final String BASE_GEOCODER_URL = "http://maps.google.com/maps/geo?";
► private final String ENCODING = "UTF-8";
► private final String GOOGLE_MAPS_KEY = "ABQIAAAAjU0EJWnWPMv7oQ-
jjS7dYxTPZYElJSBeBUeMSX5xXgq6lLjHthSAk20WnZ_iuuzhMt60X_ukms-AUg";
► public CustomAddress getLatLong(CustomAddress customAddress) throws IOException {
► BufferedReader in = new BufferedReader (new InputStreamReader
► (new URL
("http://maps.google.com/maps/geo?q="+URLEncoder.encode (customAddress.getAddress(), ENCODING)
+"&output=csv&key="+GOOGLE_MAPS_KEY).openStream ()));

57. Exception Handing

58. Conclusions and Recommendation for Enhancements
► The DSL for Maps Mashups is the project in which users can reuse and
remix the existing Web APIs, build mashups and implement ‘Find’ use
case in the form of maps for any business domain by using this
framework. As per this framework, user can easily invoke those APIs
rather than complex widgets, and build sophisticated maps mashups
effortlessly. As a result organizations will produce more quality output
and achieve customer satisfaction. This is because DSL framework, can
easily understand user instructions in simple English rather than
complex widgets. For instance, instead of writing the entire code for
Google Maps, Flickr and Yelp API, user can easily invoke those APIs by
using simple interface and get the response back from those APIs.
Similarly, for custom data, user simply needs to invoke the action and
get the response back in the XML format. For mashups, user can just
need to use the plain English language type methods and it will be
build automatically.

59. Conclusions and Recommendation for
Enhancements (Continue..)
► The first version of the DSL for Maps mashups meets all
the requirement specifications as per section 2. This
release is optimized for Internet Explorer browser and as a
result any mashups can be created with Google, Flickr,
Yelp and user data by using this framework. However, the
next release of this framework should account for Firefox
Browser. FireFox was not within the scope of this project.
Additionally, this release was limited to three APIs,
Google , Yelp and Flickr, however, in the future we can
add more APIs such as Delicious, Youtube, Facebook and
MySpace. To add this feature, we need to look into these
application APIs specifications, come up with the
expression and fit into this framework.

60. References
► [1] Raymond Yee 2008, Pro Web 2.0 Mashups: Remixing Data and Web Services.
► [2] Mashups, Wikipedia, http://en.wikipedia.org/wiki/Mashup_(web_application_hybrid)
► [3] E. Michael Maximilien, Ajith Ranabahu and Stefan Tai. 2007. Swashup: situational web applications mashups (ACM) Paper
► [4] Find dentist web applications, http://www.1800dentist.com/
► http://www.findadentist.com/, http://www.dentistdirectory.com/, http://www.ada.org/public/directory/index.asp,
http://www.everydentist.com/,
► https://metlocator.metlife.com/metlocator/execute/Search?
searchType=findDentistMetLife&newSearch=true&referer=http://www.metlife.com/Applications/Corporate/WPS/CDA/PageGenerator/0,1674,P
1078,00.html
► [5] PHP with Zend Framework, http://www.zend.com/en/solutions/web-application-server/
► [6] Ruby on Rails Framework, http://www.rubyonrails.org/
► [7] Len Bass, Paul Clements, Rick Kazman 2007, Software Architecture in Practice. Second Edition. SEI series in Software Engineering
► [8] Find the agent, http://agents.mercuryinsurance.com/agentlocator/
► [9] Find the dealer, http://www.fordvehicles.com/dealerships/, http://www.chevrolet.com/locatedealer/chevy/dealersearch.jsp
► [10] Domain Specific Language, Martin Fowler, http://www.martinfowler.com/dslwip/UsingDsls.html#DefiningDomainSpecificLanguages
► [11] Rattapoom Tuchinda, Pedro Szekely, and Craig A. Knoblock. 2008. Building Mashups By Example. ACM Press
► [12] IEEE. IEEE Std. 830-1998 IEEE Recommended Practice for Software Requirement Specifications. IEEE Computer Society, 1998
► [13] http://www.programmableweb.com/
► [14] Software Engineering Institute Standard - Attribute Driven Design, v2.0
► [15] Google API Key Sign up: http://code.google.com/apis/maps/signup.html
► [16] Google Map API: http://code.google.com/apis/maps/documentation/index.html
► [17] Flickr Key Sign up: http://www.flickr.com/services/api/misc.api_keys.html
► [18] Flickr Photo Search API http://www.flickr.com/services/api/flickr.photos.search.html
► [19] Yelp Key API http://www.yelp.com/developers/getting_started/api_access
► [20] Yelp Phone API: http://www.yelp.com/developers/documentation/phone_api
► [21] Pro JavaScript Design Patterns by Ross Harmes and Dustin Diaz
► [22] Google Map API: http://code.google.com/apis/maps/documentation/index.html
► [23] Flickr Photo Search API http://www.flickr.com/services/api/flickr.photos.search.html
► [24] Yelp Phone API: http://www.yelp.com/developers/documentation/phone_api