web mapping with drupal
TRANSCRIPT
WEB MAPPING WITH DRUPAL
Ranel O. Padon
facebook.com/ranel.padon
DrupalCamp Manila 2013
OUTLINE
2
I. GEOGRAPHIC FRAMEWORK
II. WHY MAP?
III. SPATIAL DATA STORAGE
IV. ATTACK OF THE JAVASCRIPT
V. WHY DRUPAL?
VI. DRUPAL WEB MAPPING MODULES
VII. END NOTES
ABOUT ME
futsal coach/player/trainer
licensed Geodetic Engineer
taken graduate course units in MS Computer Science in UP
Lecturer (Programming and Mathematical Subjects):
UP DGE (Department of Geodetic Engineering
Lecturer (Web GIS & Online Mapping Trainings)
UP NEC (National Engineering Center)
Research Associate | GIS Specialists | Python Programmer:
PRTSAS (Pasig River Tributaries Survey and Assessment Study)
*Project of UP DGE & PRRC (Pasig River Rehabilitation Commission)
Freelancer | LGIS Lead Web Developer (team of two):
LGIS: A Philippine GIS-Based Landfill Inventory
Current URL: http://www.iesmanila.com/lgis
Soon-to-be: http://www.lgis.pcieerd.dost.gov.ph/
3
I. GEOGRAPHIC FRAMEWORK
4
INTRODUCTION
5
Web maps are fundamentally based on the
concept of mapping.
Mapping is based on the concepts of:
coordinate systems (the center of the earth,
the plane of origin of latitude, & the plane of origin of longitude)
models of Earth (EPSG codes)
specifying a location (latitude, longitude, & height above a surface
model)
map projections (flattening the Earth)
INTRODUCTION
6
Historically, there are many ideas and theories about the Earth’s shape
Babylonians believed the earth to be shaped like an oyster
philosopher Thales & poet Homer thought the Earth was flat.
others thought it was a cylinder or cube.
In our modern times, some still believe that the earth is flat.
Curiosity, navigation, and conquering territories propelled the development
of obtaining the accurate model of the Earth.
REFERENCE PLANES
7
If the Earth does not rotate on its axis, it’s very hard to define the Equator,
since it’s the only unique plane that will cut the Earth into two equal parts
and at the same time perpendicular to the Earth rotational axis.
After determining the Earth’s shape,
next problem is the origin
of the coordinates.
Latitudes are referred from
the Equator.
Longitudes are referred from
the Greenwich Meridian.
LATITUDE & LONGITUDE
8
Latitude is easier to measure than the Longitude, especially in
the middle of an ocean or desert.
Measuring accurate Longitudes took hundreds of years before
it has been solved. It was solved only around 17-18th century.
GPS revolutionized the Latitude & Longitude measurement.
LATITUDE & LONGITUDE
9
Web maps (Google Maps, OpenStreet Maps, etc) utilize the
Latitude and Longitude values of certain point.
MAP PROJECTION
10
Projecting points, lines, & polygons
from a 3D surface to a 2D object
introduce errors in shape, area,
distances, and directions.
PROJECTION SURFACE | Cylindrical
11
PROJECTION SURFACE | Conic
12
PROJECTION SURFACE | Planar
13
FULLER PROJECTION
14
THE BONNE PROJECTION
15
If you need to impress a chick or a client.
PROJECTION SURFACES | Summary
16
MISCELLANEOUS PROJECTIONS
17
MAP PROJECTION NOTES
18
Map projection is a mathematical process.
Web maps usually use map projections that minimize all the
distortions.
Google Maps, OpenStreet Maps, Bing Maps, MapQuest Maps,
etc uses a variant of Spherical Mercator projection.
They are good in preserving the shape of a
polygon/town/country boundaries, at the expense of error in
area. Hence, they must not be used for sensitive, area-based
analyses (population density, dengue cases per province, etc).
MAP PROJECTION NOTES
19
There are map projections that are good for preserving areas.
But, for usual web map applications (placing a point/placemark
in map for a restaurant you want to write about or for the
venue of a marathon or hackathon), the Spherical Mercator
will suffice.
THE EPSG CODES
20
European Petroleum Survey Group
EPSG compiles a database of Earth ellipsoids,
geodetic datums, geographic and projected
coordinate systems, units of measurement, etc.
Used as coordinate system/projection codes in GIS softwares
or web maps.
Sample EPSG Code Parameters’ Description
THE EPSG CODES | EPSG: 4326
21
EPSG: 4326 Parameters’ Description
(as used in Google Maps, OpenStreet Maps, Panoramio, etc)
II. WHY MAP?
22
INTRODUCTION
23
To appreciate web maps, we must first understand
why people use maps.
A related question is: Do people really care about maps?
Answer: They do.
Maps has a rich mathematical and art (color, typography,
layout, balance, visual hierarchies, etc) foundation.
WHY MAP?
24
The Guinsaugon, Leyte Tragic Landslide in 2006 is a wake-up
call to the Philippines. Many lives could have been saved or
rescued if there were an accurate map at that time:
they could not locate the school believed to contain many
survivors.
WHY MAP?
25
Typhoons like Ondoy and Sendong have left us in pain, and alarmed
the government for more accurate mapping (for more accurate
landslide & flood modeling, rescue operations, logistics, etc).
WHY MAP?
26
Maps could help in damage assessment & rescue operations.
This simple web map has actually been used during the Ondoy
calamity: simple idea that have made a difference.
WHY MAP?
28
Maps are powerful, they have
varied applications, & they are
even used in the popular media
& social networking sites.
Tolkien used maps in the Lord of the Rings Trilogy for envisioning
battle scenes & enriching the
story.
WHY MAP?
29
Web maps are incorporated in
social networking sites.
WHY MAP?
30
Location of
DrupalCamp Manila 2013
WHY MAP?
31
Smartphones and tablets or even cameras are now GPS-
capable, and make it possible to make geotagged images that
can be uploaded to Panoramio.com.
WHY MAP?
32
Web maps are now part of our daily lives.
WHY MAP?
33
Maps are used in Design & Planning.
WHY MAP?
34
Maps are extremely powerful for collaborative/participatory
mapping, even for illiterate and indigenous people.
It engages the Community.
WHY MAP?
35
Maps are used to analyze patterns.
WHY MAP?
36
Maps are used for visualizing phenomena.
WHY MAP?
37
Maps are good for portraying connectivity,
even our LRT/MRT systems utilize this concept.
III. SPATIAL DATA STORAGE
38
INTRODUCTION
39
location data (latitude & longitude) are special
they are not your typical data format: text/number/dates
since you usually want to measure distances and areas, which
are sensitive to coordinate systems & projections, they must
be special objects to be efficiently handled by spatial functions
also, we often want our points, lines, polygons to be easy to
customize/style, we must create new data type format for this
mechanism to be possible
III. SPATIAL DATA STORAGE
40
KML, GPX, and GeoJSON are usually text file formats
WKT is usually implemented as a database object format,
hence faster or more efficient to process.
SPATIAL DATA STORAGE | KML
Keyhole Markup Language
XML variant
popularized by Google, default format in Google Earth
from Keyhole, Inc as acquired by Google in 2004
became an Open Standard in 2008
41
SPATIAL DATA STORAGE | GPX
GPS eXchange Format (2002)
XML schema designed for GPS data format
Native format in GPS-capable smartphones/devices
42
SPATIAL DATA STORAGE | GeoJSON
introduced in 2008
every GeoJSON data structure is also a JSON object
generally more compact than KML/GPX
43
SPATIAL DATA STORAGE | WKT
Well-Known Text
text markup language for representing vector geometry
objects
Well-Known Binary is used to transfer and store the same
information on databases, such as PostGIS and Microsoft SQL
Server
44
SPATIAL DATA STORAGE | WKT vs KML
45
Bottomline: KML is too verbose
KML is stored in a text file (slow IO process)
WKT is stored in a database
WKT has better performance
IV. ATTACK OF THE JAVASCRIPT
46
INTRODUCTION
47
To understand web mapping with Drupal, it’s good to have a
background of the base libraries used in the modules
Web Mapping is a world dominated by JavaScript libraries
Google Maps
OpenLayers
Leaflet
and many others..
Recently, Google has created Dart, generally believed to be the
eventual nemesis of JavaScript
GOOGLE MAPS
48
GOOGLE MAPS
the first web map service
stable, launched on 2005 (8 years ago)
free, but closed-source software model
development through Google Maps API
https://developers.google.com/maps/
49
OPENLAYERS
http://www.openlayers.org/
open-source alternative to Google Maps
toward OpenLayers 3 (with HTML 5 & CSS 3)
50
OPENLAYERS
51
OPENLAYERS
52
LEAFLET
53
LEAFLET
http://leafletjs.com
lighter than a leaf
28 KB of JavaScript Code
designed with simplicity, performance and
usability in mind
very good for mobile phones
version 0.5 only (but with many plugins)
very fast!
utilizes HTML 5 and CSS 3
54
V. WHY DRUPAL?
55
INTRODUCTION
56
Why do we need Drupal? Why not use WordPress or
Joomla instead?
Or maybe why do we need a CMS? Or why web in the
first place?
WHY DRUPAL? | The Web
57
Web makes data transfer faster.
Technology evolved from simple,
static web pages to dynamic
websites; CMS and web
technology mashups also
developed.
WHY DRUPAL? | THE CMS
58
CMS (Content Management System) is
a dynamic way of controlling a Web site,
offering distinct separation of the
content of a site from the style and
code.
CMS-based sites are setup using a
layered system whereby it allows an
end user (editors, encoders, etc) to edit
the content of their site without ever
having to touch code or open messy
and confusing HTML files. Likewise, they
uses a template or theme, making
layout and/or style adjustments does
not require editing every page on the
site.
WHY DRUPAL? | Choosing a CMS
59
Choosing a CMS involves
choosing language on which the
CMS is based. We choose PHP
since it’s stable, fast & the most
widely-used.
WHY DRUPAL? | Mapbender Geo-CMS
60
For a time, we’ve also tried
implementing our LGIS site using
the Mapbender 2.7 (a PHP-based
Geo-CMS). But it’s not
appropriate to our data model.
Nevertheless, the upcoming
Mapbender 3 also looks
promising.
WHY DRUPAL? | PHP-Based CMS
61
There are many PHP-based CMS.
We choose Drupal since it is
widely-used, innovative in nature,
and has stable modules for web
mapping.
WHY DRUPAL? | Philosophy
62
Drupal is a FOSS (Free and Open-Source
Software) and an active member of OSI.
Softwares under the FOSS development method
harnesses the power of distributed peer review
and transparency of development.
WHY DRUPAL? | Principles
63
Drupal project's principles encourage
modularity, standards, collaboration,
ease-of-use, and so on.
This resulted to a CMS with numerous
features, flexible design and various web
application domains.http://www.drupalshowcase.com/
WHY DRUPAL? | Innovation
64
Compared to WordPress or Joomla
CMSes, Drupal embraces change
and prefers innovation than back
compatibility
WHY DRUPAL? | Innovation
65
Compared to other CMSes, Drupal
has a free, stable, powerful &
modern mapping libraries
(OpenLayers, GeoField, Leaflet,
GMap, etc).
Likewise, it has lots of
documentation & resources
regarding the spatial & mapping
tracks of Drupal.
WHY DRUPAL? | Community
66
Drupal has huge and active developers all around the
world.
It’s created by the Community, for the Community.
WHY DRUPAL? | Groups & Conferences
67
Drupal has active local groups and
frequent conferences.
WHY DRUPAL? | Can be tamed.
68
WHY DRUPAL? | Good for beginners.
69
WHY DRUPAL? | Flexible for experts.
70
WHY DRUPAL? | Versatile.
71
V. DRUPAL WEB MAPPING MODULES
72
INTRODUCTION
73
it’s possible to make a web application using hardcore HTML,
CSS, and JavaScript (with mapping toolkits: OpenLayers or
Leaflet and widget toolkits: Dojo, Ext JS, or jQuery UI)
yet, complexity will quickly shoot-up if you have points or data
with many attributes (including embedded pictures & charting
functionality) or if the client needs a user account mechanism
& possibly user hierarchies, and data editing workflow.
you could use Drupal instead
GMAP MODULE
multi-purpose, very heavy
monolithic, tightly-coupled
A better solution: use a module with
loosely-coupled components like:
Geofield | Leaflet | OpenLayers
74
GEOFIELD MODULE
http://drupal.org/project/geofield
stores & displays geospatial data
these spatial fields are also the basis ofViews
for showing the data in the map
requires GeoPHP module
a PHP library for doing geometry operations.
it can read and write WKT, WKB, GeoJSON, KML, or GPX.
75
GEOFIELD MODULE
76
GEOFIELD MODULE
77
LEAFLET MODULE
http://drupal.org/project/leaflet
newer and lighter than OpenLayers
can use the Leaflet More Maps module
not full-featured yet
requires the Libraries module
optional integration with Views module
78
LEAFLET MODULE
79
OPENLAYERS MODULE
http://drupal.org/project/openlayers
very robust & powerful
heavy-weight
customizations (layers, styles, behaviors)
requires the Views module
needs 2 views: one for data, one for map
80
OPENLAYERS MODULE | Illustration
81
Base Map (OSM Mapnik, Google Maps, MapQuest Maps, etc)
Locations of Crimes Layer (Crime Content Type)
Locations of Hotels Layer (Hotel Content Type)
Locations of DrupalCamp Layer (DrupalCamp Content Type)
Usual configuration involves choosing a Base Map Layer and
the Overlay Layers (the content types to be mapped)
implemented using the Views module
THE CARTARO DISTRO
Powerful Drupal Mapping Distribution
for extra heavy-weight requirements
Drupal + Postgre + PostGIS + GeoServer + OpenLayers +…
82
SUMMARY
Geofield is the usual mechanism to input, store, display, attach,
or embed location fields/attributes to content types. It could
utilize the Leaflet and OpenLayers’ maps and settings.
Leaflet is the fastest to setup, with best performance
good for simple needs
good for target clients that heavily use smartphones/tablets
OpenLayers offers great customization in maps, styles, icons,
and behaviors (pop-ups, showing scalebar, fullscreen icon)
Cartaro is used for hardcore site requirements, including
spatial database optimizations.
83
SUMMARY
use Geofield for data input of location (Manage Fields):
map picker widget
latitude/longitude text fields
use Leaflet or OpenLayers for data output (Manage Display):
Geofield data will now appear as a map
for displaying collections of content types with Geofields
use Views with Leaflet or OpenLayers display format:
Leaflet needs one View only
OpenLayers needs 2 Views (Base Layer/Maps + Overlay Layer)
84
COMPARISON OF SPATIAL MODULES
For an exhaustive comparison of geospatial Drupal modules
go to Geospatial Modules Assessment
85
DRUPAL WEB MAPPING PROS
86
1. Customizable Content/Page Types (Data Model)
2. Robust Access Control (User Permissions & Roles)
3. Editorial/Publishing Workflow
4. Map View of Data (Queryable)
5. Table View of Data (Sortable)
6. Chart View of Data (Interactive)
7. Exposed Search/Query Filters
8. Data Imports/Exports, Reports &Summary, & Printing
9. and more…
OUR LGIS PROJECT’S FEATURES
87
1. GeoPortal (Map View)
(Layers, Behaviors, Styles, Queries)
2. Table View
3. User Permission Hierarchies
4. Concurrent Editing
5. Editorial Workflow
6. Dynamic and Scalable System
(Low Maintenance)
7. Modular Design
(Easy to Add Features)
VII. END NOTES
88
END NOTES
89
Web maps are powerful and used in our daily lives.
Web mapping is a form of art and visualization science.
Humans are visual creatures. We are more excited by
pictures or any visual representation, compared to texts.
We imagine things, not texts/numbers.
END NOTES
90
web maps are not hard to implement in Drupal
web maps can add value to your website:
maps showing your products/services’ locations
maps showing all your marathon events or
technological conferences in a month or year, and so on
maps showing all the beaches/hotels in a city/province/region
maps attached to each content
the location of a restaurant you write about in a blog
the location of a sport facility
the location of a crime scene
the location of a tourist spot
and so on.. (imagination is your limit)
DEMO & TUTORIALS
91
I . Using Geofield
II. Leaflet Tutorial
a. Introduction to Leaflet in Drupal 7
a. Using Leaflet and Views
III. OpenLayers Tutorial:
a. Getting Started with OpenLayers in Drupal 7
b. Using OpenLayers and Geofield to Put Image Galleries
on a World Map
UPDATE | WEB MAPPING PART II
92
There’s a part 2 of this Drupal Web Mapping presentation.
It was presented during the Drupal Developer’s Day 2013.
Here’s the link to that presentation:
Web Mapping with Drupal (Part II)
REFERENCES
Palazzolo and Turnbull. Web Mapping with Drupal (2012).
Schuler. Mapping in Drupal (2012).
Krygier & Wood. Making Maps, 2nd Edition (2011).
Drupal | Wikipedia | Google Images
*Some of the images used here have no proper source citation,
they’re mainly used for illustration/educational purposes only --
to unclutter the slides, and in the spirit of openness of data.
Thank You!
Thank You!