Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Switchable Map APIs with Drupal


Published on

Presented during the DrupalCamp Cebu 2015. It demonstrates how we handled and integrated multiple, switchable, and extendable map APIs with our Drupal site (CNN Travel). It showcases the modern map APIs particularly the Google Maps, HERE Maps, and MapBox.

Likewise, it will feature the Strategy Design Pattern for easy switching of map objects' context and activating a particular map API. Discussion will include the various entity contexts (node and taxonomy pages), Drupal admin form for inputting API credentials, Drupal.settings' object integration, the template files and other loaded assets, the rendered widgets, as well as the challenges we encountered and their corresponding solutions/workaround.

The session is targeted for those interested in design patterns, web mapping, or implementing switchable JavaScript APIs (multiple chart APIs, map APIs, or any family of 3rd-party APIs).

Published in: Technology
  • Be the first to comment

Switchable Map APIs with Drupal

  1. 1. Engr. Ranel O. Padon | Switchable Map APIs with Drupal
  2. 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: •  plays competitive football/futsal
  3. 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. 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. 5. Mapstraction JS Library
  6. 6. Mapstraction JS Library
  7. 7. Mapstraction JS Library
  8. 8. Mapstraction Drupal Module
  9. 9. Mapstraction Drupal Module
  10. 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. 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. 12. Design Patterns
  13. 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 –
  14. 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. 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. 16. Design Patterns •  they are language-agnostic (Java, PHP, Python, …) •  usually in the context of OOP (Object-Oriented Programming)
  17. 17. Design Patterns
  18. 18. Design Patterns
  19. 19. Design Patterns
  20. 20. Design Patterns
  21. 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. 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. 23. Strategy Design Pattern
  24. 24. Strategy Design Pattern
  25. 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. 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. 27. Strategy Design Pattern •  The map code logic will not not be tightly coupled to the TripAdvisor/ 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. 28. Strategy Design Pattern •  Likewise, the same Strategy Design Pattern could be applied when we expand later our data/content partners/providers (TripAdvisor,, etc).
  29. 29. Typical Use Case/Construct
  30. 30. Strategy Design Pattern better, extendable solution
  31. 31. Strategy Design Pattern OOP solution
  32. 32. Strategy Design Pattern
  33. 33. Strategy Design Pattern
  34. 34. Strategy Design Pattern
  35. 35. CNN Travel Maps System
  36. 36. CNN Travel Maps | Markup
  37. 37. CNN Travel Maps | HERE Maps
  38. 38. CNN Travel Maps | GMaps
  39. 39. CNN Travel Maps | Mapbox
  40. 40. CNN Travel Maps | Service Info
  41. 41. CNN Travel Maps | Service Info
  42. 42. CNN Travel Maps | Service Info Partner Hotel
  43. 43. CNN Travel Maps | Service Info Partner Hotel
  44. 44. CNN Travel Maps | Service Info TripAdvisor Reviews
  45. 45. CNN Travel Maps | Service Info TripAdvisor Photos
  46. 46. CNN Travel Maps JS
  47. 47. CNN Travel Maps | Form API
  48. 48. CNN Travel Maps System
  49. 49. CNN Travel Maps System
  50. 50. CNN Travel Maps System
  51. 51. CNN Travel Maps System
  52. 52. Recommendation •  One of the best resources about Design Patterns: • •
  53. 53. Special Thanks •  CNN Travel ( for the ideas and inspiration for this presentation.