Download as PDF, PPTX
![GEOFIELD | LEAFLET
Workaround 2 (Quick and specific zoom):
• Add this line “$map['settings']['zoom'] = 8;”
to /sites/all/modules/leaflet/leaflet.formatters.inc](https://image.slidesharecdn.com/ofnodesandmaps-131028031435-phpapp01/85/Of-Nodes-and-Maps-Web-Mapping-with-Drupal-Part-II-68-320.jpg)
![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](https://image.slidesharecdn.com/ofnodesandmaps-131028031435-phpapp01/85/Of-Nodes-and-Maps-Web-Mapping-with-Drupal-Part-II-112-320.jpg)
![GEOFIELD | LEAFLET
Workaround 2 (Quick and specific zoom):
• Add this line “$map['settings']['zoom'] = 8;”
to /sites/all/modules/leaflet/leaflet.formatters.inc](https://image.slidesharecdn.com/ofnodesandmaps-131028031435-phpapp01/75/Of-Nodes-and-Maps-Web-Mapping-with-Drupal-Part-II-68-2048.jpg)
![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](https://image.slidesharecdn.com/ofnodesandmaps-131028031435-phpapp01/75/Of-Nodes-and-Maps-Web-Mapping-with-Drupal-Part-II-112-2048.jpg)
Uploaded byRanel Padon
Of Nodes and Maps (Web Mapping with Drupal - Part II)
The document presents insights from the 2013 Drupal Developer's Day, focusing on the integration of geospatial elements using GeoField within Drupal's Views module. It emphasizes the importance of visual data representation through maps, as demonstrated with various case studies including CNN Travel and LGIS, showcasing practical applications and technical configurations. Additionally, the document provides detailed steps on implementing and customizing GeoField and its output formats, including Leaflet and OpenLayers, for effective spatial data management.
More Related Content
Similar to Of Nodes and Maps (Web Mapping with Drupal - Part II)
![UiPath Automation Suite Installation (Hands-On) [2/3]](https://cdn.slidesharecdn.com/ss_thumbnails/automationsuitecommunitysession2-251015095633-a6d862f1-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Of Nodes and Maps (Web Mapping with Drupal - Part II)
- 1. Drupal Developer’s Day2013 OF NODES AND MAPS Engr. Ranel Padon ranel.padon@gmail.com | https://github.com/ranelpadon
- 2.
- 3. ABOUT ME • SeniorSoftware 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.
- 5. OUTLINE I. Motivation II. Geofield • InputWidgets • Output Formatters • Default Geofield formats • Leaflet • OpenLayers III. Views Integration • Geofield • Leaflet • OpenLayers
- 6.
- 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 TransitAuthority http://arbesman.net/blog/wp-content/uploads/2012/05/Screen-Shot-2012-06-13-at-10.17.58.png
- 10.
- 11.
- 12. MOTIVATION Pattern and TemporalAnalysis • Dr. Abraham Verghese used maps to help think about his HIV infected patients Making Maps (Krygier, 2011)
- 13. MOTIVATION • Dr. Vergheseand 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 TemporalAnalysis The acquisition place of Dr. Verghese’s HIV patients. Making Maps (Krygier, 2011)
- 15. MOTIVATION Dr. Verghese’s findingswill 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) 4Variables in one map! http://cartastrophe.files.wordpress.com/2010/06/turner_chernoff.jpg
- 17. MOTIVATION Identifying UFOs Making Maps(Krygier, 2011)
- 18.
- 19.
- 20. MOTIVATION Flash News (Oct 26,2013) http://finance.yahoo.com/news/earthquake-hits-near-fukushima-japan-172839930.html;_ylt=AwrSyCPVrGpSCUcAeDTQtDMD
- 21.
- 22. MOTIVATION • Drupal Committer’sLocation https://drupal.org/
- 23. MOTIVATION Case Study 1: LGISMap 1: Home Page Map Custom/Precise Image Map + jQuery Map Hilight http://iesmanila.com/lgis/
- 24. MOTIVATION Case Study 1: LGISMap 2: Adding coordinates in a page Using OpenLayers Map Input Widget http://iesmanila.com/lgis/node/27/edit
- 25. MOTIVATION Case Study 1: LGISMap 3: Displaying Geofield coordinates using Geofield’s Default/Gmap Output Formatter http://iesmanila.com/lgis/content/payatas-sanitary-landfill
- 26. MOTIVATION Case Study 1: LGISMap 4: Geoportal (Views + Geofield + OpenLayers) http://iesmanila.com/lgis/geoportal
- 27. MOTIVATION Case Study 2 CNNTravel Map 1: Adding Geofield coordinates 1. WKT 2. Leaflet Input Widget http://travel.cnn.com/node/130484/edit
- 28. MOTIVATION Case Study 2 CNNTravel Map 2: Displaying Geofield using TripAdvisor API (our sponsor’s API) http://travel.cnn.com/explorations/escape/destinations/insider-guide-best-madrid-249484
- 29.
- 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 andctools:
- 32. GEOFIELD • Provide widgetsfor data input and formatters for data output • Could be integrated to Entities (nodes/content types, taxonomy terms, user and comments)
- 33. GEOFIELD • common Drupalfields: 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.
- 36.
- 37. GEOFIELD • Create anew 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: • FieldType: Geofield • Field Input Widget: Latitude/Longitude
- 39. GEOFIELD Coordinates field: • Geolocationcould 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 newTourist Spot content >> node/add/tourist-spot: • Name of the Tourist Spot: Taal Volcano • Description: The Taal Volcano. • Coordinates: • Latitude: 14 • Longitude: 121
- 41.
- 42. GEOFIELD Configure the Geofielddisplay, default formatter: >> admin/structure/types/manage/tourist_spot/display
- 43. GEOFIELD Configure the Geofielddisplay: • Latitude/Longitude output formatter
- 44. GEOFIELD Configure the Geofielddisplay: • Latitude/Longitude output formatter
- 45. GEOFIELD Configure the Geofielddisplay: • Geofield Map output formatter (uses Google Maps) http://www.9gag.com
- 46. GEOFIELD Configure the Geofielddisplay: • 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 (FurtherCustomization) • Make sure to both click the Update and Save buttons.
- 50. GEOFIELD Output Formatter • CustomizedGeofield Map
- 51. GEOFIELD For OpenStreet Mapoutput formatter • install Static Map module (https://drupal.org/project/staticmap)
- 52. GEOFIELD For OpenStreet Mapoutput formatter • install Static Map module (https://drupal.org/project/staticmap)
- 53. GEOFIELD • The StaticMap output formatter
- 54. GEOFIELD Make sure toadd a Static Map configuration before selecting the Geofield’s Static Map formatter. (admin/config/content/staticmap/list)
- 55. GEOFIELD Note that youcould 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 forGeofield
- 57. GEOFIELD Installation surprises: • Makesure 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: • InstallLeaflet (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 Widgetfor 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 Itwas created by Vladimir Agafonkin A beautiful product created by a well-rounded person.
- 62. GEOFIELD | LEAFLET MyLeaflet 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 Viewthe page, by default the zoom level is too high. You must click the “-” button repeatedly to see the map.
- 67. GEOFIELD | LEAFLET Workaround1: • 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 Workaround2 (Quick and specific zoom): • Add this line “$map['settings']['zoom'] = 8;” to /sites/all/modules/leaflet/leaflet.formatters.inc
- 69. GEOFIELD | LEAFLET Afterthe 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 Afterinstalling Leaflet More Maps (Using Mapbox layer)
- 73. GEOFIELD | LEAFLET Drupal’sLeaflet Markercluster (try also this module)
- 74. GEOFIELD | OPENLAYERS OpenLayersMap 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 Geofieldwith OpenLayers output formatter
- 77. GEOFIELD | OPENLAYERS Geofieldwith OpenLayers Map input widget:
- 78. GEOFIELD | OPENLAYERS •Geofield with OL Map input widget (Default): admin/structure/types/manage/tourist_spot/fields
- 79. GEOFIELD | OPENLAYERS Geofieldwith custom OpenLayers map: >> admin/structure/openlayers/maps
- 80. GEOFIELD | OPENLAYERS Geofieldwith custom OpenLayers map: • Clone first the Geofield Widget Map s
- 81.
- 82. GEOFIELD | OPENLAYERS Geofieldwith 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 Themodified page with Pilipinas Geofield OL Map formatter
- 89. GEOFIELD | OPENLAYERS Modifyingthe Icon marker: >> admin/structure/openlayers/maps/list/geofield_formatter_map/clone • go to Layers and Styles section
- 90. GEOFIELD | OPENLAYERS AfterModifying the Icon marker’s style:
- 91.
- 92. VIEWS Views is themake 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 essentiallya 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 sameway, 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 | MAPVIEW • 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 AmanpuloBeach Resort • Latitude: 11 • Longitude: 121
- 99. VIEWS Add the Mt.Apo • Latitude: 7 • Longitude: 125
- 100. VIEWS | TABLEVIEW Drupal’s default Content View (admin/content)
- 101. VIEWS | TABLEVIEW Let’s create a custom Table View of Tourist Spot pages for illustration purposes, before proceeding to Map Views.
- 102. VIEWS | TABLEVIEW Add a Table View of Tourist Spots
- 103. VIEWS | TABLEVIEW Configure further the Table View of Tourist Spots
- 104. VIEWS | TABLEVIEW The displayed, custom Table View of Tourist Spots
- 105. VIEWS | GEOFIELD TheGeofield 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 Addnew View: admin/structure/views/add
- 109.
- 110. VIEWS | LEAFLET LeafletView (showing all data), with the Island Group exposed filter.
- 111. VIEWS | LEAFLET LeafletView 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 LeafletView (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 Afterthe zoom workaround
- 114. VIEWS | OPENLAYERS ForOpenLayers 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 WithLuzon Island Group filter
- 125. VIEWS | OPENLAYERS Configurethe 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 Youmight 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 Adda Photos field for storing images of the Tourist Spots
- 129. VIEWS | OPENLAYERS TheAmanpulo Beach Resort showing its photos.
- 130. VIEWS | OPENLAYERS Fora 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 DefaultGeofield 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 MainSite • Web Mapping with Drupal Slides • DrupalOverEasy YouTube Channel
- 134.
- 135.