Published on February 17, 2013
WEB MAPPING WITH DRUPAL DrupalCamp Manila 2013 Ranel O. Padon email@example.com facebook.com/ranel.padon
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 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) 5
INTRODUCTION 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. 6
REFERENCE PLANES 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. 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. 7
LATITUDE & LONGITUDE 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. 8
LATITUDE & LONGITUDE Web maps (Google Maps, OpenStreet Maps, etc) utilize the Latitude and Longitude values of certain point. 9
MAP PROJECTION Projecting points, lines, & polygons from a 3D surface to a 2D object introduce errors in shape, area, distances, and directions. 10
PROJECTION SURFACE | Cylindrical 11
PROJECTION SURFACE | Conic 12
PROJECTION SURFACE | Planar 13
FULLER PROJECTION 14
THE BONNE PROJECTION If you need to impress a chick or a client. 15
PROJECTION SURFACES | Summary 16
MISCELLANEOUS PROJECTIONS 17
MAP PROJECTION NOTES 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). 18
MAP PROJECTION NOTES 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. 19
THE EPSG CODES 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 20
THE EPSG CODES | EPSG: 4326 EPSG: 4326 Parameters’ Description (as used in Google Maps, OpenStreet Maps, Panoramio, etc) 21
II. WHY MAP? 22
INTRODUCTION 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. 23
WHY MAP? 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. 24
WHY MAP? 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). 25
WHY MAP? 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. 26
WHY MAP? People are now relying on our NOAH portal. 27
WHY MAP? 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. 28
WHY MAP? Web maps are incorporated in social networking sites. 29
WHY MAP? Location of DrupalCamp Manila 2013 30
WHY MAP? Smartphones and tablets or even cameras are now GPScapable, and make it possible to make geotagged images that can be uploaded to Panoramio.com. 31
WHY MAP? Web maps are now part of our daily lives. 32
WHY MAP? Maps are used in Design & Planning. 33
WHY MAP? Maps are extremely powerful for collaborative/participatory mapping, even for illiterate and indigenous people. It engages the Community. 34
WHY MAP? Maps are used to analyze patterns. 35
WHY MAP? Maps are used for visualizing phenomena. 36
WHY MAP? Maps are good for portraying connectivity, even our LRT/MRT systems utilize this concept. 37
III. SPATIAL DATA STORAGE 38
INTRODUCTION 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 39
III. SPATIAL DATA STORAGE 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. 40
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 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 45
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
V. WHY DRUPAL? 55
INTRODUCTION 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? 56
WHY DRUPAL? | The Web Web makes data transfer faster. Technology evolved from simple, static web pages to dynamic websites; CMS and web technology mashups also developed. 57
WHY DRUPAL? | THE CMS 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. 58
WHY DRUPAL? | Choosing a CMS Choosing a CMS involves choosing language on which the CMS is based. We choose PHP since it’s stable, fast & the most widely-used. 59
WHY DRUPAL? | Mapbender Geo-CMS 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. 60
WHY DRUPAL? | PHP-Based CMS There are many PHP-based CMS. We choose Drupal since it is widely-used, innovative in nature, and has stable modules for web mapping. 61
WHY DRUPAL? | Philosophy 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. 62
WHY DRUPAL? | Principles 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/ 63
WHY DRUPAL? | Innovation Compared to WordPress or Joomla CMSes, Drupal embraces change and prefers innovation than back compatibility 64
WHY DRUPAL? | Innovation 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. 65
WHY DRUPAL? | Community Drupal has huge and active developers all around the world. It’s created by the Community, for the Community. 66
WHY DRUPAL? | Groups & Conferences Drupal has active local groups and frequent conferences. 67
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
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 of Views 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 Locations of Crimes Layer (Crime Content Type) Locations of Hotels Layer (Hotel Content Type) Locations of DrupalCamp Layer (DrupalCamp Content Type) Base Map (OSM Mapnik, Google Maps, MapQuest Maps, etc) Usual configuration involves choosing a Base Map Layer and the Overlay Layers (the content types to be mapped) implemented using the Views module 81
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 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… 86
OUR LGIS PROJECT’S FEATURES 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) 87
VII. END NOTES 88
END NOTES 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. 89
END NOTES 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 the location the location the location of a restaurant you write about in a blog of a sport facility of a crime scene of a tourist spot and so on.. (imagination is your limit) 90
DEMO & TUTORIALS 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 91
UPDATE | WEB MAPPING PART II 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) 92
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!
Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...
In this presentation we will describe our experience developing with a highly dyna...
Presentation to the LITA Forum 7th November 2014 Albuquerque, NM
Un recorrido por los cambios que nos generará el wearabletech en el futuro
Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...
Drupal is an open source platform for building amazing digital experiences. It's made by a dedicated community. Anyone can use it, and it will always be free.
For a project being led by Natural Resources Canada, Earth Sciences Sector, I am looking for a list of Ottawa firms with experience developing in Drupal ...
The Mapping kit is a collection of modules ... Adds content types: map context, web mapping service, map ... Drupal Association members fund grants that ...
Location and Mapping ... User Stories; Mission: To discuss and document topics related to web mapping ... A colleague and I are doing a drupal mapping ...
Eine in das Content Management System Drupal ... Es bietet umfassende GIS-Werkzeuge für Entwickler von Unternehmens- und Web-Anwendungen und ...
WEB MAPPING WITH DRUPAL Ranel O. Padon . WHY WEB? ... WHY MAP WITH DRUPAL? Powerful & Stable Mapping Modules: Geofield, Leaflet, OpenLayers, GMap, etc.
WEB MAPPING WITH DRUPALRanel O. Padon WHY WEB? connectivity & interaction WHY CMS? WHY CMS? . WHY CMS...
Ghana Drupal Website designers, Developers, Web strategy, Development, Design and Open Source Development
Comments about oreilly Mapping with Drupal: Mapping with Drupal by Alan Palazzolo and Thomas Turnbull provides a hands-on, in-depth exploration of a the ...