Discusses the input, storage, and display mechanisms of spatial fields on nodes: how to utilize Geofield's input widgets and output formatters, how to integrate Geofield with Leaflet and OpenLayers, and how to integrate them with Views.

1. Drupal Developer’s Day 2013
OF NODES AND MAPS
Engr. Ranel Padon
ranel.padon@gmail.com | https://github.com/ranelpadon

2. ABOUT ME

3. ABOUT ME
• Senior Software Engineer @ Kite Systems, Ltd.
• Drupal Projects Involvement:
• CNN Travel
• LGIS
• Lecturer, UP DGE (Java/Python OOP Undergrad Courses)
• Lecturer, UP NEC (Web GIS Training Course)
• MS Computer Science (25/30 units)
• Geodetic Engineer
• Involved in computational Java and Python projects
before.

4. OUTLINE
Views
Integration
Geofield
Motivation

5. OUTLINE
I. Motivation
II. Geofield
•
Input Widgets
•
Output Formatters
•
Default Geofield formats
•
Leaflet
•
OpenLayers
III. Views Integration
•
Geofield
•
Leaflet
•
OpenLayers

6. I. MOTIVATION

7. MOTIVATION
• Brain Rules
• Rule #10:
• Vision trumps all other senses.

8. MOTIVATION
• Brain Rules
Rule #10
“Vision is by far our most dominant sense,
taking up half of our brain’s resources.”
“We learn and remember best through
pictures, not through written or spoken
words.

9. MOTIVATION
Milky Way Transit Authority
http://arbesman.net/blog/wp-content/uploads/2012/05/Screen-Shot-2012-06-13-at-10.17.58.png

10. MOTIVATION
London Tube Map
http://www.tubemaplondon.org/images/standard-tube-map-large.jpg

11. MOTIVATION
MMDA Traffic Advisory
http://mmdatraffic.interaksyon.com/system-view.php

12. MOTIVATION
Pattern and Temporal Analysis
• Dr. Abraham Verghese
used maps to help think about his HIV infected patients
Making Maps (Krygier, 2011)

13. MOTIVATION
• Dr. Verghese and his colleagues were stunned when
HIV-infected patients began to dominate their practices.
• What was this urban problem doing in rural Tennessee?
• Dr. Verghese next mapped where his HIV patients lived between 1979
and 1985. The places on the Acquisition map “seemed to circle
the periphery of the United States” and were mostly large cities.
Dr. Verghese learned of a circuitous voyage, a migration from
home and a return, ending in death.
Making Maps (Krygier, 2011)

14. MOTIVATION
Pattern and Temporal Analysis
The acquisition place of Dr. Verghese’s HIV patients.
Making Maps (Krygier, 2011)

15. MOTIVATION
Dr. Verghese’s findings will be hard to came up with if you
will use tables/spreadsheets and charts only, that is, without
using maps for spatial/temporal correlation.
There is something about maps that could not be provided
by text, tables, or charts, or other statistical analysis tools.
Spatial analysis is a deep science on its own.

16. MOTIVATION
Chernoff Faces
(Multivariate Map)
4 Variables in one map!
http://cartastrophe.files.wordpress.com/2010/06/turner_chernoff.jpg

17. MOTIVATION
Identifying UFOs
Making Maps (Krygier, 2011)

18. MOTIVATION
Spatial Connotation (Humor)
http://www.jewsnews.co.il/wp-content/uploads/2013/10/1337.jpg

19. MOTIVATION
News Story
http://www.rappler.com/world/regions/us-canada/38404-us-3-days-attacks-syria

20. MOTIVATION
Flash News
(Oct 26, 2013)
http://finance.yahoo.com/news/earthquake-hits-near-fukushima-japan-172839930.html;_ylt=AwrSyCPVrGpSCUcAeDTQtDMD

21. MOTIVATION
Event Location
http://devsday2013-eorg.eventbrite.com/

22. MOTIVATION
• Drupal Committer’s Location
https://drupal.org/

23. MOTIVATION
Case Study 1:
LGIS Map 1: Home Page Map
Custom/Precise Image Map +
jQuery Map Hilight
http://iesmanila.com/lgis/

24. MOTIVATION
Case Study 1:
LGIS Map 2: Adding coordinates in a page
Using OpenLayers Map Input Widget
http://iesmanila.com/lgis/node/27/edit

25. MOTIVATION
Case Study 1:
LGIS Map 3: Displaying Geofield coordinates
using Geofield’s
Default/Gmap
Output Formatter
http://iesmanila.com/lgis/content/payatas-sanitary-landfill

26. MOTIVATION
Case Study 1:
LGIS Map 4: Geoportal (Views + Geofield + OpenLayers)
http://iesmanila.com/lgis/geoportal

27. MOTIVATION
Case Study 2
CNN Travel Map 1: Adding Geofield coordinates
1. WKT
2. Leaflet Input Widget
http://travel.cnn.com/node/130484/edit

28. MOTIVATION
Case Study 2
CNN Travel Map 2:
Displaying Geofield
using TripAdvisor API
(our sponsor’s API)
http://travel.cnn.com/explorations/escape/destinations/insider-guide-best-madrid-249484

29. II. GEOFIELD

30. GEOFIELD
• Geofield: https://drupal.org/project/geofield
• Requires geoPHP: https://drupal.org/project/geophp
• Requires ctools (Chaos tool suite):
https://drupal.org/project/ctools
• Installs geofield and geofield_map modules

31. GEOFIELD
Requires geoPHP and ctools:

32. GEOFIELD
• Provide widgets for data input and formatters for data
output
• Could be integrated to Entities (nodes/content types,
taxonomy terms, user and comments)

33. GEOFIELD
• common Drupal fields: text, number, dates, image
• special-purpose field: spatial/geo-related fields
• they are tricky to represent in database, since distance
and area computations are not simple arithmetic
operation and must consider map projection, scale,
styling, etc

34. GEOFIELD | GEOPHP
• geoPHP is the workhorse library of Geofield
• could read, write, and store location-related
information.
• could compute centroids, bounding-boxes, length,
area, etc.

35. GEOFIELD | GEOPHP

36. GEOFIELD
Input
Widget
•Lat/Lon
•WKT
•GeoJSON
•Geolocation
•Map
Geofield
Object
DB Object
Output
Formatter
•Lat/Lon
•WKT
•GPX
•KML
•Map

37. GEOFIELD
• Create a new content type
(admin/structure/types/add) called Tourist Spot
• Add Name of the Tourist Spot as the Title field and a
new Coordinates field:

38. GEOFIELD
Coordinates field:
• Field Type: Geofield
• Field Input Widget: Latitude/Longitude

39. GEOFIELD
Coordinates field:
• Geolocation could provide the Default values
• Could auto-locate the current user via IP Address
• Very useful for real-time data like crime reporting, news
scoop, disaster response, etc.

40. GEOFIELD
Make a new Tourist Spot content
>> node/add/tourist-spot:
• Name of the Tourist Spot: Taal Volcano
• Description: The Taal Volcano.
• Coordinates:
• Latitude: 14
• Longitude: 121

41. GEOFIELD

42. GEOFIELD
Configure the Geofield display, default formatter:
>> admin/structure/types/manage/tourist_spot/display

43. GEOFIELD
Configure the Geofield display:
• Latitude/Longitude output formatter

44. GEOFIELD
Configure the Geofield display:
• Latitude/Longitude output formatter

45. GEOFIELD
Configure the Geofield display:
• Geofield Map output formatter (uses Google Maps)
http://www.9gag.com

46. GEOFIELD
Configure the Geofield display:
• Geofield Map output formatter

47. GEOFIELD
Common
Input Widgets
• Lat/Lon
• GeoJSON
• WKT

48. GEOFIELD
Output Formatters
• WKT
• KML
• Geofield Map

49. GEOFIELD
Output Formatter (Further Customization)
• Make sure to both click the Update and Save buttons.

50. GEOFIELD
Output Formatter
• Customized Geofield Map

51. GEOFIELD
For OpenStreet Map output formatter
• install Static Map module
(https://drupal.org/project/staticmap)

52. GEOFIELD
For OpenStreet Map output formatter
• install Static Map module
(https://drupal.org/project/staticmap)

53. GEOFIELD
• The Static Map
output formatter

54. GEOFIELD
Make sure to add a Static Map configuration before
selecting the Geofield’s Static Map formatter.
(admin/config/content/staticmap/list)

55. GEOFIELD
Note that you could use a Leaflet input widget for
Geofield (https://drupal.org/project/leaflet_widget), but
the stable version is good for Geofield 1.x only.

56. GEOFIELD
Leaflet Widget for Geofield

57. GEOFIELD
Installation surprises:
• Make sure that the downloaded Leaflet Widget plugin has
this structure (capitalized L):
>> sites/all/libraries/Leaflet.widget/lib/Leaflet.draw
http://www.9gag.com

58. GEOFIELD
Installation surprises:
• Install Leaflet (but don’t download the newest Leaflet plugin from
Leaflet’s main site.)
• Copy the bundled Leaflet from the downloaded Leaflet.widget:
>> sites/all/libraries/Leaflet.widget/lib/Leaflet
• rename it such that the libraries folder also contains leaflet:
>> sites/all/libraries/leaflet

59. GEOFIELD
• Leaflet Widget for Geofield is tested on Leaflet 0.4.x only
and Geofield 1.x.
• See the related documentation regarding setup and
configuration
• For using the newer & more powerful Leaflet.draw plugin
and some patches for the current module, try to checkout
this fork: https://github.com/acouch/leaflet_draw_widget

60. GEOFIELD | LEAFLET
• Leaflet’s philosophy:
simplicity, performance and usability.
• It’s the jQuery of Mapping.
• Take advantage of HTML5 and CSS3
• Modular design and readable source code.

61. GEOFIELD | LEAFLET
It was created by Vladimir Agafonkin
A beautiful product created by a
well-rounded person.

62. GEOFIELD | LEAFLET
My Leaflet Mashup (integrating Leaflet with jQuery).
You could download the source code here and open the
“leaflet-jquery5.html” file

63. GEOFIELD | LEAFLET
• Drupal’s Leaflet module has 2 versions:
• 7.x-1.x-dev
• sites/all/libraries/leaflet/leaflet.js
• 7.x-1.0-beta3
• Requires sites/all/libraries/leaflet/dist/leaflet.js
• Either case, you could use the latest Leaflet.js plugin.

64. GEOFIELD | LEAFLET
• Install Leaflet 7.x-1.0-beta3
• In admin/structure/types/manage/tourist_spot/display
• Set the Coordinates’ field output format to Leaflet

65. GEOFIELD | LEAFLET
• Configure the Leaflet settings

66. GEOFIELD | LEAFLET
View the page, by default the zoom level is too high.
You must click the “-” button repeatedly to see the map.

67. GEOFIELD | LEAFLET
Workaround 1:
• Apply the patch here
This will also include code patch for a more advanced zoom
settings/configurations in the Geofield’s Leaflet output
formatter.

68. GEOFIELD | LEAFLET
Workaround 2 (Quick and specific zoom):
• Add this line “$map['settings']['zoom'] = 8;”
to /sites/all/modules/leaflet/leaflet.formatters.inc

69. GEOFIELD | LEAFLET
After the workaround:

70. GEOFIELD | LEAFLET
• Drupal’s Leaflet More Maps
• Showcase of all the included
maps here

71. GEOFIELD | LEAFLET
• After installing Leaflet More Maps

72. GEOFIELD | LEAFLET
After installing Leaflet More Maps (Using Mapbox layer)

73. GEOFIELD | LEAFLET
Drupal’s Leaflet Markercluster (try also this module)

74. GEOFIELD | OPENLAYERS
OpenLayers Map object’s components (since it’s modular):
• Map (Base Maps: MapQuest, OSM, GMap, MapBox, etc)
• Layers (Content Types, GPX, KML, GeoJSON, Geofile, etc)
• Style (Marker icons, shadows, line widths, etc)
• Behaviors (Pop-ups, coordinates cursor, show grid, etc)
• Projection (4326, 900913, etc)

75. GEOFIELD | OPENLAYERS
• Install OpenLayers
• Select the OpenLayers output formatter for Geofield
• By default, it uses the Geofield Formatter Map

76. GEOFIELD | OPENLAYERS
Geofield with OpenLayers output formatter

77. GEOFIELD | OPENLAYERS
Geofield with OpenLayers Map input widget:

78. GEOFIELD | OPENLAYERS
• Geofield with OL Map input widget (Default):
admin/structure/types/manage/tourist_spot/fields

79. GEOFIELD | OPENLAYERS
Geofield with custom OpenLayers map:
>> admin/structure/openlayers/maps

80. GEOFIELD | OPENLAYERS
Geofield with custom OpenLayers map:
• Clone first the Geofield Widget Map
s

81. GEOFIELD | OPENLAYERS
admin/structure/openlayers/maps/list/geofield_widget_map/clone

82. GEOFIELD | OPENLAYERS
Geofield with custom OpenLayers map:
admin/structure/openlayers/maps/list/geofield_widget_map/clone
PARAMETER
VALUE
Infos
Map Title:
Pilipinas Geofield Widget Map
Center and
Bounds
Centerpoint: 121, 14
Zoom Level: 6

83. GEOFIELD | OPENLAYERS
• Select the Geofield map with custom OpenLayers map:
admin/structure/types/manage/tourist-spot/fields/field_coordinates_ol_map_

84. GEOFIELD | OPENLAYERS
• The new, custom Geofield OL input widget for adding/editing
Tourist Spot pages
• You may also select the default map value (Latitude, Longitude)

85. GEOFIELD | OPENLAYERS
• Geofield with custom OpenLayers formatter map:
• Clone Geofield Formatter Map
s

86. GEOFIELD | OPENLAYERS
• Geofield with custom OpenLayers map:
admin/structure/openlayers/maps/list/geofield_formatter_map/clone
PARAMETER
VALUE
Infos
Map Title:
Pilipinas Geofield Formatter Map
Center and
Bounds
Centerpoint: 121, 14
Zoom Level: 7
Layers and
Styles
Base Layer: MapQuest Open Aerial
(Enable and Set to Default)

87. GEOFIELD | OPENLAYERS
• Modify the Geofield OL Map formatter
>> admin/structure/types/manage/tourist_spot/display

88. GEOFIELD | OPENLAYERS
The modified page with Pilipinas Geofield OL Map
formatter

89. GEOFIELD | OPENLAYERS
Modifying the Icon marker:
>>
admin/structure/openlayers/maps/list/geofield_formatter_map/clone
• go to Layers and Styles section

90. GEOFIELD | OPENLAYERS
After Modifying the Icon marker’s style:

91. III. VIEWS

92. VIEWS
Views is the make or break of Drupal. Many people find it
to be intimidating and hard. But essentially, it just
answers these 3 questions:
• What?
• Where?
• How?

93. VIEWS
Views is essentially a view of data.
For example, if you’re in a bar with your friend (which could
be drunk already), and suddenly a woman entered the room
your friend may find the woman gorgeous/sexy, but you
might find it just mediocre/ugly.
In that case, there are 2 different Views or perspective: your
View and your friend’s View; while the data (the Woman) is
the same for both of you, it could be portrayed differently.

94. VIEWS
In the same way, Views retrieve data from the database,
selects the content types you want (Blog, News, Product,
Tourist Spot), the fields you want (Title, Images, Author,
Location, Price), filter them (filter by category, filter by
price), apply some pre-processing (compute total, aggregate
data), sort them (sort by surname, sort by area, sort by
publication date), and finally display them in a format you
want (list, grid, charts, maps, gallery).
Hence, a same pool of data could be combined and viewed in
many ways.

95. VIEWS
• What
•
Content Type
•
Fields
• Where
•
Page
•
Block
• How
•
List
•
Table
•
Gallery
•
Chart
•
Map

96. VIEWS | MAP VIEW
• What
•
Content Type (Tourist Spot content type)
•
Fields (Title, Coordinates, other fields you want to include)
• Where
•
Page (a page via URL: /openlayers-tourist-spot or /leaflet-tourist-spot)
•
Block
• How
•
List
•
Table
•
Gallery
•
Chart
•
Map (OpenLayers or Leaflet)

97. VIEWS
To appreciate Views, we must create additional Tourist
Spot pages.
These Tourist Spot pages could be shown later in one map
or technically, in one View.

98. VIEWS
Add the Amanpulo Beach Resort
• Latitude: 11
• Longitude: 121

99. VIEWS
Add the Mt. Apo
• Latitude: 7
• Longitude: 125

100. VIEWS | TABLE VIEW
Drupal’s default Content View (admin/content)

101. VIEWS | TABLE VIEW
Let’s create a custom Table View of Tourist Spot pages for
illustration purposes, before proceeding to Map Views.

102. VIEWS | TABLE VIEW
Add a Table View
of Tourist Spots

103. VIEWS | TABLE VIEW
Configure further the Table View
of Tourist Spots

104. VIEWS | TABLE VIEW
The displayed, custom Table View of Tourist Spots

105. VIEWS | GEOFIELD
The Geofield data type makes it possible for Views to
display collection of nodes in map format.
Leaflet
Map View
Geofield
Views
OpenLayers
Map View

106. VIEWS | LEAFLET
• Create a new Taxonomy Vocabulary called Island Group
>> admin/structure/taxonomy/add
• These will be used for categorizing the Tourist Spots

107. VIEWS | LEAFLET
>> admin/structure/taxonomy/island_group
• These will be used also later as exposed search filters

108. VIEWS | LEAFLET
Add new View:
admin/structure/views/add

109. VIEWS | LEAFLET
admin/structure/views/view/leaflet_map_view

110. VIEWS | LEAFLET
Leaflet View (showing all data), with the Island Group
exposed filter.

111. VIEWS | LEAFLET
Leaflet View filtered as Mindanao Island Group only:
Single point result in Leaflet Views
will be zoomed too high also.
http://www.9gag.com

112. VIEWS | LEAFLET
Leaflet View (Single Instance Zoom workaround)
1. Apply patch from here or
2. Add this line $map['settings']['maxZoom'] = "8";
>> /sites/all/modules/leaflet/leaflet_views/leaflet_views_plugin_style.inc

113. VIEWS | LEAFLET
After the zoom workaround 

114. VIEWS | OPENLAYERS
For OpenLayers Map View (since OL is modular and highlycustomizable, it involves more steps)
1. Create an OpenLayers Map object (MO)
2. Create a new OpenLayers Map View (MV)
3. Create a new OpenLayers Data Overlay View (DOV)
4. Enable the DOV as Map Layer in MO via

115. VIEWS | OPENLAYERS
1. Create an OpenLayers Map object (MO)
>> admin/structure/openlayers/maps

116. VIEWS | OPENLAYERS
2. OpenLayers Map View (MV)

117. VIEWS | OPENLAYERS
2. OpenLayers Map View (MV)

118. VIEWS | OPENLAYERS
• 2. OpenLayers Map View (MV)

119. VIEWS | OPENLAYERS
3. OpenLayers Map View (MV)

120. VIEWS | OPENLAYERS
4. Enable the DOV as Map Layer in MO

121. VIEWS | OPENLAYERS
• The resulting OpenLayers View

122. VIEWS | OPENLAYERS
• Showing the Layers and Graticules window.
• Could be configured in the Behaviors section of every
Map object (see next slide)

123. VIEWS | OPENLAYERS
• Configuring the Graticules:
>> admin/structure/openlayers/maps/list/clone_of_default/edit

124. VIEWS | OPENLAYERS
With Luzon Island Group filter

125. VIEWS | OPENLAYERS
Configure the pop-up behaviour/contents in the
Behaviors section of a map (see next slide).

126. VIEWS | OPENLAYERS
>> admin/structure/openlayers/maps/list/clone_of_default/edit

127. VIEWS | OPENLAYERS
You might want to add Photos field in the Tourist Spot
content type (see next slide), then configure the Tourist
Spot Data Overlay View to include this Photos field in
the data fetched and displayed by its View.

128. VIEWS | OPENLAYERS
Add a Photos field for storing images of the Tourist Spots

129. VIEWS | OPENLAYERS
The Amanpulo Beach Resort showing its photos.

130. VIEWS | OPENLAYERS
For a more detailed documentation about OpenLayers-Views
setup, go here.
The docs in the link above is a highly-recommended reading.

131. SUMMARY
Geofield
Input Widgets
Output Formatters
Default Geofield formats
Leaflet
OpenLayers
Views Integration
Geofield
Leaflet
OpenLayers
http://fc03.deviantart.net/fs71/f/2013/129/8/4/elementary_os_wallpaper_pack_for_windows_by_crossycriss-d5swvpv.jpg

132. RECOMMENDATIONS
• Use Geolocation, Lat/Lon, or OpenLayers Map as input
widget for Geofield. For stability and flexibility sake,
refrain from using the Leaflet Widget for Geofield.
• Use Leaflet (with integrated Leaflet More Maps) or
OpenLayers as output formatter for Geofield.
• Use Leaflet (integrated Map-Data View) or OpenLayers
(separate Map View and Data View) for showing the
listing of entities containing Geofield data.

133. REFERENCES
• Drupal Main Site
• Web Mapping with Drupal Slides
• DrupalOverEasy YouTube Channel

134. THANK YOU

135. WE’RE HIRING!
http://www.ramtracking.com/blog/image.axd?picture=2013%2F8%2FWith+with+us!.jpg