The document discusses using the Strategy Design Pattern to create a modular maps system for CNN Travel that allows switching between different map APIs. It presents the Mapstraction library as an existing approach but notes issues. The Strategy pattern is applied to create a custom Drupal module that isolates map logic from specific APIs (Google, HERE, Mapbox), enabling flexible switching. The system provides map widgets and services info for partner sites via a common interface regardless of the underlying API in use.

1. Engr. Ranel O. Padon
ranel.padon@gmail.com | https://github.com/ranelpadon
Switchable Map APIs with Drupal

2. About Me
• Software Engineer at Kite Systems (Hong Kong-based company)
– full-time Drupal developer for CNN Travel (our client)
• part-time Python lecturer in University of the Philippines
• involved with programming for 9 years (Python, Java, etc)
• involved in Drupal for the last 4 years
• projects: http://github.com/ranelpadon
• plays competitive football/futsal

3. Topics
• Background
– Use Case
– Mapstraction JS Library and Drupal Module
– Design Patterns
• Strategy Design Pattern
• CNN Travel Maps System
– APIs: Google Maps, HERE Maps, MapBox
– Map Widget
– Service Info

4. Background
• we want to inject maps and custom texts in our
node pages (via CKEditor)
and term pages (via Drupal blocks)
• we will need to have a modular/flexible architecture
for integrating maps since our partners will vary
from time to time.

5. Mapstraction JS Library

6. Mapstraction JS Library

7. Mapstraction JS Library

8. Mapstraction Drupal Module

9. Mapstraction Drupal Module

10. Mapstraction
• “Mapstraction is a Javascript library that provides a
single, common interface for a wide variety of
Javascript map APIs.”
• “It’s designed to enable a developer to switch from
one maps API to another as smoothly and as quickly
as possible.”

11. Mapstraction
• codebase is huge/heavy and complex
• outdated or not well-maintained
• we decided to create a custom library/module
for our needs

12. Design Patterns

13. Design Patterns
• “I’ve been struck by one of the underlying principles
that leads to better designs: remove duplication.
So, avoiding repetition is a simple principle
that leads to good design.”
– Martin Fowler
– http://martinfowler.com/ieeeSoftware/repetition.pdf

14. Design Patterns
• “Identify what is common and what varies,
find a way to isolate the common stuff from the
variations, then remove the redundancy in the
common stuff.”

15. Design Patterns
• Software design patterns are proven/reusable
solutions for usual programming problems
• “.. are formalized best practices that the programmer
can use to solve common problems when designing
an application or system.”
• “.. can speed up the development process
by providing tested, proven development paradigms.”

16. Design Patterns
• they are language-agnostic (Java, PHP, Python, …)
• usually in the context of OOP
(Object-Oriented Programming)

17. Design Patterns

18. Design Patterns

19. Design Patterns

20. Design Patterns

21. Strategy Design Pattern
• We used the Strategy Design Pattern before using
PHP in our advertisement blocks rendering.
• Advertisement content changes dynamically
depending on its region info/context in the page.
• This design pattern is used in some parts of jQuery
core components and in the Controller components/
mechanisms of MVC JavaScript frameworks like
AngularJS.

22. Strategy Design Pattern
• enables an algorithm's behavior to be selected at
runtime:
– defines a family of algorithms,
– encapsulates each algorithm, and
– makes the algorithms interchangeable within that family.

23. Strategy Design Pattern

24. Strategy Design Pattern

25. Strategy Design Pattern
• test the performance of different sorting algorithms
to an array of numbers: shell sort, heap sort, bubble
sort, quicksort, etc.
• Strategy pattern allows the test program to loop
through all algorithms, simply by changing them at
runtime and test each of these against the array.
• All method signatures must be the same so that they
can vary without the client program knowing about
it.

26. Strategy Design Pattern
• product order that needs to be shipped from a
warehouse to a customer.
• Shipping is the Context and the 3 shipping companies
UPS, USPS, and Fedex are the Strategies.

27. Strategy Design Pattern
• The map code logic will not not be tightly coupled to
the TripAdvisor/Booking.com data for better
modularity.
• We could easily switch between HERE Maps API and
Google Maps API and other APIs.
• We could add/remove Map APIs as needed with
minimal code adjustments.

28. Strategy Design Pattern
• Likewise, the same Strategy Design Pattern could be
applied when we expand later our data/content
partners/providers (TripAdvisor, Booking.com, etc).

29. Typical Use Case/Construct

30. Strategy Design Pattern
better, extendable solution

31. Strategy Design Pattern
OOP solution

32. Strategy Design Pattern

33. Strategy Design Pattern

34. Strategy Design Pattern

35. CNN Travel Maps System

36. CNN Travel Maps | Markup

37. CNN Travel Maps | HERE Maps

38. CNN Travel Maps | GMaps

39. CNN Travel Maps | Mapbox

40. CNN Travel Maps | Service Info

41. CNN Travel Maps | Service Info

42. CNN Travel Maps | Service Info
Partner Hotel

43. CNN Travel Maps | Service Info
Partner Hotel

44. CNN Travel Maps | Service Info
TripAdvisor Reviews

45. CNN Travel Maps | Service Info
TripAdvisor Photos

46. CNN Travel Maps JS

50. CNN Travel Maps | Form API

51. CNN Travel Maps System

52. CNN Travel Maps System

53. CNN Travel Maps System

54. CNN Travel Maps System

55. Recommendation
• One of the best resources about Design Patterns:
• https://sourcemaking.com/design_patterns
• https://sourcemaking.com/design-patterns-book

56. Special Thanks
• CNN Travel (http://travel.cnn.com) for the
ideas and inspiration for this presentation.