OF NODES AND MAPS

Engr. Ranel Padon

ranel.padon@gmail.com | https://github.com/ranelpadon

Drupal Developer’s Day 2013

ABOUT ME

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.

OUTLINE

Motivation

Geofield

Views

Integration

OUTLINE

I. Motivation

II. Geofield

• Input Widgets

• Output Formatters

• Default Geofield formats

• Leaflet

• OpenLayers

III. Views Integration

• Geofield

• Leaflet

• OpenLayers

I. MOTIVATION

MOTIVATION

• Brain Rules

• Rule #10:

• Vision trumps all other senses.

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.

MOTIVATION

Milky Way Transit Authority

http://arbesman.net/blog/wp-content/uploads/2012/05/Screen-Shot-2012-06-13-at-10.17.58.png

MOTIVATION

London Tube Map

http://www.tubemaplondon.org/images/standard-tube-map-large.jpg

MOTIVATION

MMDA Traffic Advisory

http://mmdatraffic.interaksyon.com/system-view.php

MOTIVATION

Pattern and Temporal Analysis

• Dr. Abraham Verghese

used maps to help think about his HIV infected patients

Making Maps (Krygier, 2011)

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)

MOTIVATION

Pattern and Temporal Analysis

The acquisition place of Dr. Verghese’s HIV patients.

Making Maps (Krygier, 2011)

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.

MOTIVATION

Chernoff Faces

(Multivariate Map)

4 Variables in one map!

http://cartastrophe.files.wordpress.com/2010/06/turner_chernoff.jpg

MOTIVATION

Identifying UFOs

Making Maps (Krygier, 2011)

MOTIVATION

Spatial Connotation (Humor)

http://www.jewsnews.co.il/wp-content/uploads/2013/10/1337.jpg

MOTIVATION

News Story

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

MOTIVATION

Flash News

(Oct 26, 2013)

http://finance.yahoo.com/news/earthquake-hits-near-fukushima-japan-172839930.html;_ylt=AwrSyCPVrGpSCUcAeDTQtDMD

MOTIVATION

Event Location

http://devsday2013-eorg.eventbrite.com/

MOTIVATION

• Drupal Committer’s Location

https://drupal.org/

MOTIVATION

Case Study 1:

LGIS Map 1: Home Page Map

Custom/Precise Image Map +

jQuery Map Hilight

http://iesmanila.com/lgis/

MOTIVATION

Case Study 1:

LGIS Map 2: Adding coordinates in a page

Using OpenLayers Map Input Widget

http://iesmanila.com/lgis/node/27/edit

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

MOTIVATION

Case Study 1:

LGIS Map 4: Geoportal (Views + Geofield + OpenLayers)

http://iesmanila.com/lgis/geoportal

MOTIVATION

Case Study 2

CNN Travel Map 1: Adding Geofield coordinates

1. WKT

2. Leaflet Input Widget

http://travel.cnn.com/node/130484/edit

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

II. GEOFIELD

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

GEOFIELD

Requires geoPHP and ctools:

GEOFIELD

• Provide widgets for data input and formatters for data

output

• Could be integrated to Entities (nodes/content types,

taxonomy terms, user and comments)

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

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.

GEOFIELD | GEOPHP

GEOFIELD

•Lat/Lon

•WKT

•GeoJSON

•Geolocation

•Map

Input

WidgetDB Object

Geofield

Object

•Lat/Lon

•WKT

•GPX

•KML

•Map

Output

Formatter

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:

GEOFIELD

Coordinates field:

• Field Type: Geofield

• Field Input Widget: Latitude/Longitude

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.

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

GEOFIELD

GEOFIELD

Configure the Geofield display, default formatter:

>> admin/structure/types/manage/tourist_spot/display

GEOFIELD

Configure the Geofield display:

• Latitude/Longitude output formatter

GEOFIELD

Configure the Geofield display:

• Latitude/Longitude output formatter

GEOFIELD

Configure the Geofield display:

• Geofield Map output formatter (uses Google Maps)

http://www.9gag.com

GEOFIELD

Configure the Geofield display:

• Geofield Map output formatter

GEOFIELD

Common

Input Widgets

• Lat/Lon

• GeoJSON

• WKT

GEOFIELD

Output Formatters

• WKT

• KML

• Geofield Map

GEOFIELD

Output Formatter (Further Customization)

• Make sure to both click the Update and Save buttons.

GEOFIELD

Output Formatter

• Customized Geofield Map

GEOFIELD

For OpenStreet Map output formatter

• install Static Map module

(https://drupal.org/project/staticmap)

GEOFIELD

For OpenStreet Map output formatter

• install Static Map module

(https://drupal.org/project/staticmap)

GEOFIELD

• The Static Map

output formatter

GEOFIELD

Make sure to add a Static Map configuration before

selecting the Geofield’s Static Map formatter.

(admin/config/content/staticmap/list)

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.

GEOFIELD

Leaflet Widget for Geofield

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

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

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

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.

GEOFIELD | LEAFLET

It was created by Vladimir Agafonkin

A beautiful product created by a

well-rounded person.

GEOFIELD | LEAFLET

My Leaflet Mashup (integrating Leaflet with jQuery).

You could download the source code here and open the

“leaflet-jquery5.html” file

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.

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

GEOFIELD | LEAFLET

• Configure the Leaflet settings

GEOFIELD | LEAFLET

View the page, by default the zoom level is too high.

You must click the “-” button repeatedly to see the map.

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.

GEOFIELD | LEAFLET

Workaround 2 (Quick and specific zoom):

• Add this line “$map['settings']['zoom'] = 8;”

to /sites/all/modules/leaflet/leaflet.formatters.inc

GEOFIELD | LEAFLET

After the workaround:

GEOFIELD | LEAFLET

• Drupal’s Leaflet More Maps

• Showcase of all the included

maps here

GEOFIELD | LEAFLET

• After installing Leaflet More Maps

GEOFIELD | LEAFLET

After installing Leaflet More Maps (Using Mapbox layer)

GEOFIELD | LEAFLET

Drupal’s Leaflet Markercluster (try also this module)

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)

GEOFIELD | OPENLAYERS

• Install OpenLayers

• Select the OpenLayers output formatter for Geofield

• By default, it uses the Geofield Formatter Map

GEOFIELD | OPENLAYERS

Geofield with OpenLayers output formatter

GEOFIELD | OPENLAYERS

Geofield with OpenLayers Map input widget:

GEOFIELD | OPENLAYERS

• Geofield with OL Map input widget (Default):

admin/structure/types/manage/tourist_spot/fields

GEOFIELD | OPENLAYERS

Geofield with custom OpenLayers map:

>> admin/structure/openlayers/maps

GEOFIELD | OPENLAYERS

Geofield with custom OpenLayers map:

• Clone first the Geofield Widget Map

s

GEOFIELD | OPENLAYERS

admin/structure/openlayers/maps/list/geofield_widget_map/clone

GEOFIELD | OPENLAYERS

Geofield with custom OpenLayers map:

admin/structure/openlayers/maps/list/geofield_widget_map/clone

PARAMETER VALUE

InfosMap Title:

Pilipinas Geofield Widget Map

Center and

Bounds

Centerpoint: 121, 14

Zoom Level: 6

GEOFIELD | OPENLAYERS

• Select the Geofield map with custom OpenLayers map:

admin/structure/types/manage/tourist-spot/fields/field_coordinates_ol_map_

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)

GEOFIELD | OPENLAYERS

• Geofield with custom OpenLayers formatter map:

• Clone Geofield Formatter Map

s

GEOFIELD | OPENLAYERS

• Geofield with custom OpenLayers map:

admin/structure/openlayers/maps/list/geofield_formatter_map/clone

PARAMETER VALUE

InfosMap 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)

GEOFIELD | OPENLAYERS

• Modify the Geofield OL Map formatter

>> admin/structure/types/manage/tourist_spot/display

GEOFIELD | OPENLAYERS

The modified page with Pilipinas Geofield OL Map

formatter

GEOFIELD | OPENLAYERS

Modifying the Icon marker:

>> admin/structure/openlayers/maps/list/geofield_formatter_map/clone

• go to Layers and Styles section

GEOFIELD | OPENLAYERS

After Modifying the Icon marker’s style:

III. VIEWS

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?

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.

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.

VIEWS

• What

• Content Type

• Fields

• Where

• Page

• Block

• How

• List

• Table

• Gallery

• Chart

• Map

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)

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.

VIEWS

Add the Amanpulo Beach Resort

• Latitude: 11

• Longitude: 121

VIEWS

Add the Mt. Apo

• Latitude: 7

• Longitude: 125

VIEWS | TABLE VIEW

Drupal’s default Content View (admin/content)

VIEWS | TABLE VIEW

Let’s create a custom Table View of Tourist Spot pages for

illustration purposes, before proceeding to Map Views.

VIEWS | TABLE VIEW

Add a Table View

of Tourist Spots

VIEWS | TABLE VIEW

Configure further the Table View

of Tourist Spots

VIEWS | TABLE VIEW

The displayed, custom Table View of Tourist Spots

VIEWS | GEOFIELD

Geofield

Leaflet

Map View

OpenLayers

Map View

Views

The Geofield data type makes it possible for Views to

display collection of nodes in map format.

VIEWS | LEAFLET

• Create a new Taxonomy Vocabulary called Island Group

>> admin/structure/taxonomy/add

• These will be used for categorizing the Tourist Spots

VIEWS | LEAFLET

>> admin/structure/taxonomy/island_group

• These will be used also later as exposed search filters

VIEWS | LEAFLET

Add new View:

admin/structure/views/add

VIEWS | LEAFLET

admin/structure/views/view/leaflet_map_view

VIEWS | LEAFLET

Leaflet View (showing all data), with the Island Group

exposed filter.

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

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

VIEWS | LEAFLET

After the zoom workaround

VIEWS | OPENLAYERS

For OpenLayers Map View (since OL is modular and highly-

customizable, 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

VIEWS | OPENLAYERS

1. Create an OpenLayers Map object (MO)

>> admin/structure/openlayers/maps

VIEWS | OPENLAYERS

2. OpenLayers Map View (MV)

VIEWS | OPENLAYERS

2. OpenLayers Map View (MV)

VIEWS | OPENLAYERS

• 2. OpenLayers Map View (MV)

VIEWS | OPENLAYERS

3. OpenLayers Map View (MV)

VIEWS | OPENLAYERS

4. Enable the DOV as Map Layer in MO

VIEWS | OPENLAYERS

• The resulting OpenLayers View

VIEWS | OPENLAYERS

• Showing the Layers and Graticules window.

• Could be configured in the Behaviors section of every

Map object (see next slide)

VIEWS | OPENLAYERS

• Configuring the Graticules:

>> admin/structure/openlayers/maps/list/clone_of_default/edit

VIEWS | OPENLAYERS

With Luzon Island Group filter

VIEWS | OPENLAYERS

Configure the pop-up behaviour/contents in the

Behaviors section of a map (see next slide).

VIEWS | OPENLAYERS

>> admin/structure/openlayers/maps/list/clone_of_default/edit

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.

VIEWS | OPENLAYERS

Add a Photos field for storing images of the Tourist Spots

VIEWS | OPENLAYERS

The Amanpulo Beach Resort showing its photos.

VIEWS | OPENLAYERS

For a more detailed documentation about OpenLayers-Views

setup, go here.

The docs in the link above is a highly-recommended reading.

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

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.

REFERENCES

• Drupal Main Site

• Web Mapping with Drupal Slides

• DrupalOverEasy YouTube Channel

THANK YOU

WE’RE HIRING!

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