SlideShare a Scribd company logo
PUT A MAP ON IT!
Enhanced geolocation and mapping with Geo Mashup
http://jeremyclarke.org • @jeremyclarke
Download these slides:
http://slideshare.net/jeremyclarke
Creative Commons Share Alike
http://creativecommons.org/licenses/by-sa/3.0/
WHO IS JEREMY CLARKE?
• Communications Studies at Concordia
University.
• HTML+CSS since 2003
• Montreal WordPress Organizer
• Code & Design for GlobalVoices
OUTLINE
• Geolocation concepts and tagging objects
• Geolocation in “core”WordPress
• Geo Mashup and different map types
• Configuring Geo Mashup
• Design considerations for map display
WHAT IS GEOLOCATION?
• Choosing coordinates for objects
• Displaying location as metadata
• Displaying maps as navigation
• Searching for content by location
GEOLOCATION IN WP?
• Not really.
• Mobile app & wordpress.com allow geotagging
• Barely used in default themes (no maps)
• Standardized metadata for coordinates
https://en.support.wordpress.com/geotagging/
GEOLOCATION IN WP?
https://en.support.wordpress.com/geotagging/
WHY GEOLOCATE?
• Ambient awareness of locale (metadata)
• Colorful, serendipitous discovery (navigation)
• Hyperlocal content (search)
• Just in case (for later)
MAP EVERYTHING?
• No.
• Big, distracting, slow and heavy
• Rarely the most effective navigation
• Consider your unique content
• Use only when needed or harmless
• As always: Put users first
https://wordpress.org/plugins/geo-mashup/
WHY GEO MASHUP?
• You need a plugin and this one works
• Powerful, customizable and integrated across WP
• Co-operates with standard WP geodata
• Has everything: Geotagging, mapping, radius search.
• Free and community-driven.
https://wordpress.org/plugins/geo-mashup/
WHY NOT GEO MASHUP?
• Overkill for many use-cases
• Complex to set up and test
• Requires custom styling (IMHO)
• Awkward code, subtle bugs
• Investigate other plugins if your needs are simple
https://wordpress.org/plugins/tags/geo
EXAMPLE: RISINGVOICES MICROGRANTS
• Navigate grant proposals via map
• Display proposal location on post view
http://rising.globalvoicesonline.org/amazonia-es/
EXAMPLE: GLOBALVOICES
COMMUNITY BLOG
• Map of blog posts on homepage
• Optional location display (shortcode) in posts
http://community.globalvoicesonline.org/
GEOTAGGINGTHINGS
Post editor geolocation User geolocation
Hard part: Choosing a single location
MAP_CONTENT=GLOBAL
• Show all posts on the site
• Click for post preview
• Customize zoom level, style, post
limits etc.
• Full power of WP_Query available
MAP_CONTENT=SINGLE
• Show current post on a map
• Not very interactive
• Optional: Link back to global map
• Insert in content with shortcode
• Display in theme with PHP
MORE MAPTYPES
• Contextual: Show all posts in main WP_Query
• Radius: Show posts within $x km of a location
• Place: Search for country, city, town, postal code
• Custom: Pass in object_ids,WP_Query or taxonomy
• Users: Show your authors/community on a map
• OMG: More options than you want or need
SHORTCODES & PHP
• Almost all features available as [shortcodes]

AND as static PHP methods (functions).
• Shortcodes allow easy display inside post content.
• PHP gives precise control anywhere in your theme.
[geo_mashup_map] -> GeoMashup::map()
[geo_mashup_full_post] -> GeoMashup::full_post()
[geo_mashup_location_info] -> GeoMashup::location_info()
SHORTCODES & PHP
[geo_mashup_map height="200" width="400" zoom="2" add_overview_control="false" add_map_type_control="false"]
<?php echo GeoMashup::map( ‘height=200&width=400&zoom=2&add_overview_control=false&add_map_type_control=false' );?>
echo GeoMashup::map( array(
'height' => 200,
'width' => 400,
'zoom' => 2,
'add_overview_control' => 'false',
'add_map_type_control' => 'false',
);
Complex map: shortcode
Complex map: PHP+wp_parse_args()
Complex map: PHP+array
OVERALL CONFIGURATION
MAP-TYPE CONFIGURATION
INDIVIDUAL MAP OPTIONS
FIXING RESPONSIVENESS
• Horribly unresponsive by default (fixed width+height)
• Use Width: 100% as baseline
• Use Height in px and find a balance
• Height is hardcoded for each map, can’t be responsive :(
SPECIAL MOBILE CONFIG
• Fixed height for desktop will never work for mobile
• Use MobileESP* and custom plugin code to identify
small devices (smartphones)
• Filter height to fit in smartphone screen
• Filter zoom to to match new smaller size
• Consider hiding maps entirely for mobile devices :(
* https://github.com/ahand/mobileesp
RESPONSIVE FUTURE?
• Google Maps can be responsive* but not with Geo Mashup
• CSS hack to maintain aspect ratio (shape) across widths
• Hopefully: Future versions offer aspect ratio argument
* http://www.labnol.org/internet/embed-responsive-google-maps/28333/
STYLING LOCATION POPUPS
• Awful by default.
• Copy template file into your theme
and edit to match:
geo-mashup-info-window.php
• Style CSS with .locationinfo
• Media queries target map iframe, not full window:
@media only screen and (max-width:300px) {
.locationinfo {width: 160px;}
}
GEOLOCATING ATTACHMENTS
• Not supported by Geo Mashup, but possible
• Combine with Media Library Assistant* plugin:
• Enables postmeta & taxonomy for attachments
• Imports metadata from images
• Can import GPS coordinates to standard WP storage*
https://wordpress.org/support/topic/geo-tag-custom-field
https://wordpress.org/plugins/media-library-assistant/
GEOLOCATING ATTACHMENTS
http://middlememory.com/
GEO MASHUP RESOURCES
• Features overview
• Tag reference (shortcodes and template tags)
• PHP API (helper functions and classes)
https://github.com/cyberhobo/wordpress-geo-mashup/wiki/PHP-API
https://github.com/cyberhobo/wordpress-geo-mashup/wiki/Tag-Reference
https://github.com/cyberhobo/wordpress-geo-mashup/wiki/Feature-Usage
• GitHub repository (development and issue tracker)
https://github.com/cyberhobo/wordpress-geo-mashup/
PUT A MAP ON IT!
Enhanced geolocation and mapping with Geo Mashup
http://jeremyclarke.org • @jeremyclarke
Download these slides:
http://slideshare.net/jeremyclarke
Creative Commons Share Alike
http://creativecommons.org/licenses/by-sa/3.0/

More Related Content

What's hot

Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 ThemeCreating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 ThemeAcquia
 
Creating Landing Pages and Layouts for Drupal 8 - DrupalCon Baltimore
Creating Landing Pages and Layouts for Drupal 8 - DrupalCon BaltimoreCreating Landing Pages and Layouts for Drupal 8 - DrupalCon Baltimore
Creating Landing Pages and Layouts for Drupal 8 - DrupalCon BaltimoreSuzanne Dergacheva
 
Creating Dynamic Landing Pages for Drupal with Panels - Webinar
Creating Dynamic Landing Pages for Drupal with Panels - WebinarCreating Dynamic Landing Pages for Drupal with Panels - Webinar
Creating Dynamic Landing Pages for Drupal with Panels - WebinarSuzanne Dergacheva
 
Drupal distributions - how to build them
Drupal distributions - how to build themDrupal distributions - how to build them
Drupal distributions - how to build themDick Olsson
 
What is Drupal? And Why is it Useful? Webinar
What is Drupal? And Why is it Useful? WebinarWhat is Drupal? And Why is it Useful? Webinar
What is Drupal? And Why is it Useful? WebinarSuzanne Dergacheva
 
BDUG Responsive Web Theming - 7/23/12
BDUG Responsive Web Theming - 7/23/12BDUG Responsive Web Theming - 7/23/12
BDUG Responsive Web Theming - 7/23/12ucbdrupal
 
Introduction to the Drupal - Web Experience Toolkit
Introduction to the Drupal - Web Experience ToolkitIntroduction to the Drupal - Web Experience Toolkit
Introduction to the Drupal - Web Experience ToolkitSuzanne Dergacheva
 
Creating a Reusable Drupal Website for Higher Education - at USG Tech Day
Creating a Reusable Drupal Website for Higher Education - at USG Tech DayCreating a Reusable Drupal Website for Higher Education - at USG Tech Day
Creating a Reusable Drupal Website for Higher Education - at USG Tech DaySuzanne Dergacheva
 
DrupalCamp NYC Panels Presentation - April 2014
DrupalCamp NYC Panels Presentation - April 2014DrupalCamp NYC Panels Presentation - April 2014
DrupalCamp NYC Panels Presentation - April 2014Suzanne Dergacheva
 
Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012
Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012
Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012Suzanne Dergacheva
 
Minimalist Theming: How to Build a Lean, Mean Drupal 8 Theme
Minimalist Theming: How to Build a Lean, Mean Drupal 8 ThemeMinimalist Theming: How to Build a Lean, Mean Drupal 8 Theme
Minimalist Theming: How to Build a Lean, Mean Drupal 8 ThemeSuzanne Dergacheva
 
What is Object Oriented CSS?
What is Object Oriented CSS?What is Object Oriented CSS?
What is Object Oriented CSS?Nicole Sullivan
 
Decoupling the Front-end with Modular CSS
Decoupling the Front-end with Modular CSSDecoupling the Front-end with Modular CSS
Decoupling the Front-end with Modular CSSJulie Cameron
 
Wp nhcc portfolio
Wp nhcc portfolioWp nhcc portfolio
Wp nhcc portfoliogregorvios
 
Drupal - Blocks vs Context vs Panels
Drupal - Blocks vs Context vs PanelsDrupal - Blocks vs Context vs Panels
Drupal - Blocks vs Context vs PanelsDavid Burns
 
All about WordPress Posts and Pages WordCamp 2013
All about WordPress Posts and Pages WordCamp 2013 All about WordPress Posts and Pages WordCamp 2013
All about WordPress Posts and Pages WordCamp 2013 New Tricks
 
Creating a Reusable Drupal Website for Higher Education - Webinar
Creating a Reusable Drupal Website for Higher Education - WebinarCreating a Reusable Drupal Website for Higher Education - Webinar
Creating a Reusable Drupal Website for Higher Education - WebinarSuzanne Dergacheva
 

What's hot (20)

Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 ThemeCreating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
 
Creating Landing Pages and Layouts for Drupal 8 - DrupalCon Baltimore
Creating Landing Pages and Layouts for Drupal 8 - DrupalCon BaltimoreCreating Landing Pages and Layouts for Drupal 8 - DrupalCon Baltimore
Creating Landing Pages and Layouts for Drupal 8 - DrupalCon Baltimore
 
Creating Dynamic Landing Pages for Drupal with Panels - Webinar
Creating Dynamic Landing Pages for Drupal with Panels - WebinarCreating Dynamic Landing Pages for Drupal with Panels - Webinar
Creating Dynamic Landing Pages for Drupal with Panels - Webinar
 
Drupal distributions - how to build them
Drupal distributions - how to build themDrupal distributions - how to build them
Drupal distributions - how to build them
 
What is Drupal? And Why is it Useful? Webinar
What is Drupal? And Why is it Useful? WebinarWhat is Drupal? And Why is it Useful? Webinar
What is Drupal? And Why is it Useful? Webinar
 
BDUG Responsive Web Theming - 7/23/12
BDUG Responsive Web Theming - 7/23/12BDUG Responsive Web Theming - 7/23/12
BDUG Responsive Web Theming - 7/23/12
 
Introduction to the Drupal - Web Experience Toolkit
Introduction to the Drupal - Web Experience ToolkitIntroduction to the Drupal - Web Experience Toolkit
Introduction to the Drupal - Web Experience Toolkit
 
Creating a Reusable Drupal Website for Higher Education - at USG Tech Day
Creating a Reusable Drupal Website for Higher Education - at USG Tech DayCreating a Reusable Drupal Website for Higher Education - at USG Tech Day
Creating a Reusable Drupal Website for Higher Education - at USG Tech Day
 
DrupalCamp NYC Panels Presentation - April 2014
DrupalCamp NYC Panels Presentation - April 2014DrupalCamp NYC Panels Presentation - April 2014
DrupalCamp NYC Panels Presentation - April 2014
 
Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012
Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012
Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012
 
Minimalist Theming: How to Build a Lean, Mean Drupal 8 Theme
Minimalist Theming: How to Build a Lean, Mean Drupal 8 ThemeMinimalist Theming: How to Build a Lean, Mean Drupal 8 Theme
Minimalist Theming: How to Build a Lean, Mean Drupal 8 Theme
 
Slides bootstrap-4
Slides bootstrap-4Slides bootstrap-4
Slides bootstrap-4
 
What is Object Oriented CSS?
What is Object Oriented CSS?What is Object Oriented CSS?
What is Object Oriented CSS?
 
Decoupling the Front-end with Modular CSS
Decoupling the Front-end with Modular CSSDecoupling the Front-end with Modular CSS
Decoupling the Front-end with Modular CSS
 
A Custom Drupal Theme in 40 Minutes
A Custom Drupal Theme in 40 MinutesA Custom Drupal Theme in 40 Minutes
A Custom Drupal Theme in 40 Minutes
 
Wp nhcc portfolio
Wp nhcc portfolioWp nhcc portfolio
Wp nhcc portfolio
 
Drupal - Blocks vs Context vs Panels
Drupal - Blocks vs Context vs PanelsDrupal - Blocks vs Context vs Panels
Drupal - Blocks vs Context vs Panels
 
All about WordPress Posts and Pages WordCamp 2013
All about WordPress Posts and Pages WordCamp 2013 All about WordPress Posts and Pages WordCamp 2013
All about WordPress Posts and Pages WordCamp 2013
 
Creating a Reusable Drupal Website for Higher Education - Webinar
Creating a Reusable Drupal Website for Higher Education - WebinarCreating a Reusable Drupal Website for Higher Education - Webinar
Creating a Reusable Drupal Website for Higher Education - Webinar
 
Intro to Drupal
Intro to DrupalIntro to Drupal
Intro to Drupal
 

Viewers also liked

Layar November 5 Webinar - Discover the New Geo SDK
Layar November 5 Webinar - Discover the New Geo SDKLayar November 5 Webinar - Discover the New Geo SDK
Layar November 5 Webinar - Discover the New Geo SDKLayar
 
Keep Your Code Organized! WordCamp Montreal 2013 Presentation slides
Keep Your Code Organized! WordCamp Montreal 2013 Presentation slidesKeep Your Code Organized! WordCamp Montreal 2013 Presentation slides
Keep Your Code Organized! WordCamp Montreal 2013 Presentation slidesJer Clarke
 
The Fast And The Fabulous
The Fast And The FabulousThe Fast And The Fabulous
The Fast And The FabulousNicole Sullivan
 
Our Best Practices Are Killing Us
Our Best Practices Are Killing UsOur Best Practices Are Killing Us
Our Best Practices Are Killing UsNicole Sullivan
 
Mapwork calculations
Mapwork calculationsMapwork calculations
Mapwork calculationsfenslin
 
Geography Skills Revision
Geography Skills RevisionGeography Skills Revision
Geography Skills RevisionRob Marchetto
 
River Changes And Landforms
River Changes And LandformsRiver Changes And Landforms
River Changes And Landformswhiskeyhj
 
Simple Process Mapping Techniques
Simple Process Mapping TechniquesSimple Process Mapping Techniques
Simple Process Mapping TechniquesStephen Deas
 

Viewers also liked (11)

Layar November 5 Webinar - Discover the New Geo SDK
Layar November 5 Webinar - Discover the New Geo SDKLayar November 5 Webinar - Discover the New Geo SDK
Layar November 5 Webinar - Discover the New Geo SDK
 
Keep Your Code Organized! WordCamp Montreal 2013 Presentation slides
Keep Your Code Organized! WordCamp Montreal 2013 Presentation slidesKeep Your Code Organized! WordCamp Montreal 2013 Presentation slides
Keep Your Code Organized! WordCamp Montreal 2013 Presentation slides
 
The Fast And The Fabulous
The Fast And The FabulousThe Fast And The Fabulous
The Fast And The Fabulous
 
Our Best Practices Are Killing Us
Our Best Practices Are Killing UsOur Best Practices Are Killing Us
Our Best Practices Are Killing Us
 
Scalable CSS Architecture
Scalable CSS ArchitectureScalable CSS Architecture
Scalable CSS Architecture
 
Object Oriented CSS
Object Oriented CSSObject Oriented CSS
Object Oriented CSS
 
Mapwork calculations
Mapwork calculationsMapwork calculations
Mapwork calculations
 
Geography Skills Revision
Geography Skills RevisionGeography Skills Revision
Geography Skills Revision
 
River Changes And Landforms
River Changes And LandformsRiver Changes And Landforms
River Changes And Landforms
 
Process Mapping
Process MappingProcess Mapping
Process Mapping
 
Simple Process Mapping Techniques
Simple Process Mapping TechniquesSimple Process Mapping Techniques
Simple Process Mapping Techniques
 

Similar to Put A Map On It! Enhanced geolocation in WordPress with Geo Mashup

Ioannis Doxaras on GIS and Gmaps at 1st GTUG meetup Greece
Ioannis Doxaras on GIS and Gmaps at 1st GTUG meetup Greece Ioannis Doxaras on GIS and Gmaps at 1st GTUG meetup Greece
Ioannis Doxaras on GIS and Gmaps at 1st GTUG meetup Greece CoLab Athens
 
Google Developer Day 2010 Japan: Android や iPhone で活用する Maps API のモバイル端末向け新機能...
Google Developer Day 2010 Japan: Android や iPhone で活用する Maps API のモバイル端末向け新機能...Google Developer Day 2010 Japan: Android や iPhone で活用する Maps API のモバイル端末向け新機能...
Google Developer Day 2010 Japan: Android や iPhone で活用する Maps API のモバイル端末向け新機能...Google Developer Relations Team
 
CKEditor Widgets with Drupal
CKEditor Widgets with DrupalCKEditor Widgets with Drupal
CKEditor Widgets with DrupalRanel Padon
 
Getting Oriented with MapKit: Everything you need to get started with the new...
Getting Oriented with MapKit: Everything you need to get started with the new...Getting Oriented with MapKit: Everything you need to get started with the new...
Getting Oriented with MapKit: Everything you need to get started with the new...John Wilker
 
3 Approaches to Mobile - An A to Z Primer.
3 Approaches to Mobile - An A to Z Primer.3 Approaches to Mobile - An A to Z Primer.
3 Approaches to Mobile - An A to Z Primer.agup2009
 
Trail of Two Maps
Trail of Two MapsTrail of Two Maps
Trail of Two MapsMetroCog
 
Mapping on iOS and Android, Wally McClure
Mapping on iOS and Android, Wally McClureMapping on iOS and Android, Wally McClure
Mapping on iOS and Android, Wally McClureXamarin
 
Mymap4everything - revised
Mymap4everything  - revisedMymap4everything  - revised
Mymap4everything - revisedDynamicweb NA
 
Map box styles in GeoServer and OpenLayers
Map box styles in GeoServer and OpenLayersMap box styles in GeoServer and OpenLayers
Map box styles in GeoServer and OpenLayersJody Garnett
 
Web enabling your survey business ppt version
Web enabling your survey business ppt versionWeb enabling your survey business ppt version
Web enabling your survey business ppt versionrudy_stricklan
 
My experience and suggestions as a web-GIS developer
My experience and suggestions as a web-GIS developerMy experience and suggestions as a web-GIS developer
My experience and suggestions as a web-GIS developerTek Kshetri
 
Performance and Scalability for Maps API Sites (Dev Fest '10 Mexico)
Performance and Scalability for Maps API Sites (Dev Fest '10 Mexico)Performance and Scalability for Maps API Sites (Dev Fest '10 Mexico)
Performance and Scalability for Maps API Sites (Dev Fest '10 Mexico)Ossama Alami
 
Building Responsive Websites with Drupal
Building Responsive Websites with DrupalBuilding Responsive Websites with Drupal
Building Responsive Websites with DrupalSuzanne Dergacheva
 
WordPress Navigation in Responsive Design
WordPress Navigation in Responsive DesignWordPress Navigation in Responsive Design
WordPress Navigation in Responsive Designopenchamp
 
GR8Conf 2011: Building Progressive UIs with Grails
GR8Conf 2011: Building Progressive UIs with GrailsGR8Conf 2011: Building Progressive UIs with Grails
GR8Conf 2011: Building Progressive UIs with GrailsGR8Conf
 
Mobile web in eZ Publish
Mobile web in eZ PublishMobile web in eZ Publish
Mobile web in eZ PublishIgor Vrdoljak
 
Building responsive web mobile mapping applications
Building responsive web mobile mapping applicationsBuilding responsive web mobile mapping applications
Building responsive web mobile mapping applicationsAllan Laframboise
 
Great Responsive-ability Web Design
Great Responsive-ability Web DesignGreat Responsive-ability Web Design
Great Responsive-ability Web DesignMike Wilcox
 

Similar to Put A Map On It! Enhanced geolocation in WordPress with Geo Mashup (20)

Ioannis Doxaras on GIS and Gmaps at 1st GTUG meetup Greece
Ioannis Doxaras on GIS and Gmaps at 1st GTUG meetup Greece Ioannis Doxaras on GIS and Gmaps at 1st GTUG meetup Greece
Ioannis Doxaras on GIS and Gmaps at 1st GTUG meetup Greece
 
Google Developer Day 2010 Japan: Android や iPhone で活用する Maps API のモバイル端末向け新機能...
Google Developer Day 2010 Japan: Android や iPhone で活用する Maps API のモバイル端末向け新機能...Google Developer Day 2010 Japan: Android や iPhone で活用する Maps API のモバイル端末向け新機能...
Google Developer Day 2010 Japan: Android や iPhone で活用する Maps API のモバイル端末向け新機能...
 
TMS Google Mapping Components
TMS Google Mapping ComponentsTMS Google Mapping Components
TMS Google Mapping Components
 
CKEditor Widgets with Drupal
CKEditor Widgets with DrupalCKEditor Widgets with Drupal
CKEditor Widgets with Drupal
 
Getting Oriented with MapKit: Everything you need to get started with the new...
Getting Oriented with MapKit: Everything you need to get started with the new...Getting Oriented with MapKit: Everything you need to get started with the new...
Getting Oriented with MapKit: Everything you need to get started with the new...
 
3 Approaches to Mobile - An A to Z Primer.
3 Approaches to Mobile - An A to Z Primer.3 Approaches to Mobile - An A to Z Primer.
3 Approaches to Mobile - An A to Z Primer.
 
Trail of Two Maps
Trail of Two MapsTrail of Two Maps
Trail of Two Maps
 
Mapping on iOS and Android, Wally McClure
Mapping on iOS and Android, Wally McClureMapping on iOS and Android, Wally McClure
Mapping on iOS and Android, Wally McClure
 
Mymap4everything - revised
Mymap4everything  - revisedMymap4everything  - revised
Mymap4everything - revised
 
Map box styles in GeoServer and OpenLayers
Map box styles in GeoServer and OpenLayersMap box styles in GeoServer and OpenLayers
Map box styles in GeoServer and OpenLayers
 
Web enabling your survey business ppt version
Web enabling your survey business ppt versionWeb enabling your survey business ppt version
Web enabling your survey business ppt version
 
My experience and suggestions as a web-GIS developer
My experience and suggestions as a web-GIS developerMy experience and suggestions as a web-GIS developer
My experience and suggestions as a web-GIS developer
 
Performance and Scalability for Maps API Sites (Dev Fest '10 Mexico)
Performance and Scalability for Maps API Sites (Dev Fest '10 Mexico)Performance and Scalability for Maps API Sites (Dev Fest '10 Mexico)
Performance and Scalability for Maps API Sites (Dev Fest '10 Mexico)
 
Building Responsive Websites with Drupal
Building Responsive Websites with DrupalBuilding Responsive Websites with Drupal
Building Responsive Websites with Drupal
 
WordPress Navigation in Responsive Design
WordPress Navigation in Responsive DesignWordPress Navigation in Responsive Design
WordPress Navigation in Responsive Design
 
GR8Conf 2011: Building Progressive UIs with Grails
GR8Conf 2011: Building Progressive UIs with GrailsGR8Conf 2011: Building Progressive UIs with Grails
GR8Conf 2011: Building Progressive UIs with Grails
 
Mobile web in eZ Publish
Mobile web in eZ PublishMobile web in eZ Publish
Mobile web in eZ Publish
 
Building responsive web mobile mapping applications
Building responsive web mobile mapping applicationsBuilding responsive web mobile mapping applications
Building responsive web mobile mapping applications
 
Hacking up location aware apps
Hacking up location aware appsHacking up location aware apps
Hacking up location aware apps
 
Great Responsive-ability Web Design
Great Responsive-ability Web DesignGreat Responsive-ability Web Design
Great Responsive-ability Web Design
 

More from Jer Clarke

globalvoices.org - How our CC license spawned a world class translation commu...
globalvoices.org - How our CC license spawned a world class translation commu...globalvoices.org - How our CC license spawned a world class translation commu...
globalvoices.org - How our CC license spawned a world class translation commu...Jer Clarke
 
Global Voices proves Creative Commons is Awesome • CC Salon Montreal
Global Voices proves Creative Commons is Awesome • CC Salon MontrealGlobal Voices proves Creative Commons is Awesome • CC Salon Montreal
Global Voices proves Creative Commons is Awesome • CC Salon MontrealJer Clarke
 
Widgetize Everything: Building smarter WordPress themes with Widgets and Temp...
Widgetize Everything: Building smarter WordPress themes with Widgets and Temp...Widgetize Everything: Building smarter WordPress themes with Widgets and Temp...
Widgetize Everything: Building smarter WordPress themes with Widgets and Temp...Jer Clarke
 
NetBeans, IDEs and faster programming for WordPress - WordCamp NYC 2009
NetBeans, IDEs and faster programming for WordPress - WordCamp NYC 2009NetBeans, IDEs and faster programming for WordPress - WordCamp NYC 2009
NetBeans, IDEs and faster programming for WordPress - WordCamp NYC 2009Jer Clarke
 
Caching and Optimization for WordPress
Caching and Optimization for WordPressCaching and Optimization for WordPress
Caching and Optimization for WordPressJer Clarke
 
WordPress Code and Setup Strategies and Advice, WordCamp Toronto '09
WordPress Code and Setup Strategies and Advice, WordCamp Toronto '09WordPress Code and Setup Strategies and Advice, WordCamp Toronto '09
WordPress Code and Setup Strategies and Advice, WordCamp Toronto '09Jer Clarke
 
Global Voices Generic Presentation
Global Voices Generic PresentationGlobal Voices Generic Presentation
Global Voices Generic PresentationJer Clarke
 
Global Voices - Democratising the web with Wordpress and Love
Global Voices - Democratising the web with Wordpress and LoveGlobal Voices - Democratising the web with Wordpress and Love
Global Voices - Democratising the web with Wordpress and LoveJer Clarke
 

More from Jer Clarke (8)

globalvoices.org - How our CC license spawned a world class translation commu...
globalvoices.org - How our CC license spawned a world class translation commu...globalvoices.org - How our CC license spawned a world class translation commu...
globalvoices.org - How our CC license spawned a world class translation commu...
 
Global Voices proves Creative Commons is Awesome • CC Salon Montreal
Global Voices proves Creative Commons is Awesome • CC Salon MontrealGlobal Voices proves Creative Commons is Awesome • CC Salon Montreal
Global Voices proves Creative Commons is Awesome • CC Salon Montreal
 
Widgetize Everything: Building smarter WordPress themes with Widgets and Temp...
Widgetize Everything: Building smarter WordPress themes with Widgets and Temp...Widgetize Everything: Building smarter WordPress themes with Widgets and Temp...
Widgetize Everything: Building smarter WordPress themes with Widgets and Temp...
 
NetBeans, IDEs and faster programming for WordPress - WordCamp NYC 2009
NetBeans, IDEs and faster programming for WordPress - WordCamp NYC 2009NetBeans, IDEs and faster programming for WordPress - WordCamp NYC 2009
NetBeans, IDEs and faster programming for WordPress - WordCamp NYC 2009
 
Caching and Optimization for WordPress
Caching and Optimization for WordPressCaching and Optimization for WordPress
Caching and Optimization for WordPress
 
WordPress Code and Setup Strategies and Advice, WordCamp Toronto '09
WordPress Code and Setup Strategies and Advice, WordCamp Toronto '09WordPress Code and Setup Strategies and Advice, WordCamp Toronto '09
WordPress Code and Setup Strategies and Advice, WordCamp Toronto '09
 
Global Voices Generic Presentation
Global Voices Generic PresentationGlobal Voices Generic Presentation
Global Voices Generic Presentation
 
Global Voices - Democratising the web with Wordpress and Love
Global Voices - Democratising the web with Wordpress and LoveGlobal Voices - Democratising the web with Wordpress and Love
Global Voices - Democratising the web with Wordpress and Love
 

Recently uploaded

Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptxUnpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptxDavid Michel
 
Speed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in MinutesSpeed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in Minutesconfluent
 
UiPath Test Automation using UiPath Test Suite series, part 2
UiPath Test Automation using UiPath Test Suite series, part 2UiPath Test Automation using UiPath Test Suite series, part 2
UiPath Test Automation using UiPath Test Suite series, part 2DianaGray10
 
Designing for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at ComcastDesigning for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at ComcastUXDXConf
 
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlPeter Udo Diehl
 
ODC, Data Fabric and Architecture User Group
ODC, Data Fabric and Architecture User GroupODC, Data Fabric and Architecture User Group
ODC, Data Fabric and Architecture User GroupCatarinaPereira64715
 
Powerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara LaskowskaPowerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara LaskowskaCzechDreamin
 
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualitySoftware Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualityInflectra
 
Exploring UiPath Orchestrator API: updates and limits in 2024 🚀
Exploring UiPath Orchestrator API: updates and limits in 2024 🚀Exploring UiPath Orchestrator API: updates and limits in 2024 🚀
Exploring UiPath Orchestrator API: updates and limits in 2024 🚀DianaGray10
 
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...CzechDreamin
 
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxWSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxJennifer Lim
 
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya HalderCustom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya HalderCzechDreamin
 
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Tobias Schneck
 
UiPath Test Automation using UiPath Test Suite series, part 1
UiPath Test Automation using UiPath Test Suite series, part 1UiPath Test Automation using UiPath Test Suite series, part 1
UiPath Test Automation using UiPath Test Suite series, part 1DianaGray10
 
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Jeffrey Haguewood
 
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...CzechDreamin
 
Motion for AI: Creating Empathy in Technology
Motion for AI: Creating Empathy in TechnologyMotion for AI: Creating Empathy in Technology
Motion for AI: Creating Empathy in TechnologyUXDXConf
 
IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024IoTAnalytics
 
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMsTo Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMsPaul Groth
 
Connector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a buttonConnector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a buttonDianaGray10
 

Recently uploaded (20)

Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptxUnpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
 
Speed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in MinutesSpeed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in Minutes
 
UiPath Test Automation using UiPath Test Suite series, part 2
UiPath Test Automation using UiPath Test Suite series, part 2UiPath Test Automation using UiPath Test Suite series, part 2
UiPath Test Automation using UiPath Test Suite series, part 2
 
Designing for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at ComcastDesigning for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at Comcast
 
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
 
ODC, Data Fabric and Architecture User Group
ODC, Data Fabric and Architecture User GroupODC, Data Fabric and Architecture User Group
ODC, Data Fabric and Architecture User Group
 
Powerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara LaskowskaPowerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara Laskowska
 
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualitySoftware Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
 
Exploring UiPath Orchestrator API: updates and limits in 2024 🚀
Exploring UiPath Orchestrator API: updates and limits in 2024 🚀Exploring UiPath Orchestrator API: updates and limits in 2024 🚀
Exploring UiPath Orchestrator API: updates and limits in 2024 🚀
 
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
 
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxWSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
 
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya HalderCustom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
 
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
 
UiPath Test Automation using UiPath Test Suite series, part 1
UiPath Test Automation using UiPath Test Suite series, part 1UiPath Test Automation using UiPath Test Suite series, part 1
UiPath Test Automation using UiPath Test Suite series, part 1
 
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
 
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
 
Motion for AI: Creating Empathy in Technology
Motion for AI: Creating Empathy in TechnologyMotion for AI: Creating Empathy in Technology
Motion for AI: Creating Empathy in Technology
 
IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024
 
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMsTo Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
 
Connector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a buttonConnector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a button
 

Put A Map On It! Enhanced geolocation in WordPress with Geo Mashup

  • 1. PUT A MAP ON IT! Enhanced geolocation and mapping with Geo Mashup http://jeremyclarke.org • @jeremyclarke Download these slides: http://slideshare.net/jeremyclarke Creative Commons Share Alike http://creativecommons.org/licenses/by-sa/3.0/
  • 2. WHO IS JEREMY CLARKE? • Communications Studies at Concordia University. • HTML+CSS since 2003 • Montreal WordPress Organizer • Code & Design for GlobalVoices
  • 3. OUTLINE • Geolocation concepts and tagging objects • Geolocation in “core”WordPress • Geo Mashup and different map types • Configuring Geo Mashup • Design considerations for map display
  • 4. WHAT IS GEOLOCATION? • Choosing coordinates for objects • Displaying location as metadata • Displaying maps as navigation • Searching for content by location
  • 5. GEOLOCATION IN WP? • Not really. • Mobile app & wordpress.com allow geotagging • Barely used in default themes (no maps) • Standardized metadata for coordinates https://en.support.wordpress.com/geotagging/
  • 7. WHY GEOLOCATE? • Ambient awareness of locale (metadata) • Colorful, serendipitous discovery (navigation) • Hyperlocal content (search) • Just in case (for later)
  • 8. MAP EVERYTHING? • No. • Big, distracting, slow and heavy • Rarely the most effective navigation • Consider your unique content • Use only when needed or harmless • As always: Put users first
  • 10. WHY GEO MASHUP? • You need a plugin and this one works • Powerful, customizable and integrated across WP • Co-operates with standard WP geodata • Has everything: Geotagging, mapping, radius search. • Free and community-driven. https://wordpress.org/plugins/geo-mashup/
  • 11. WHY NOT GEO MASHUP? • Overkill for many use-cases • Complex to set up and test • Requires custom styling (IMHO) • Awkward code, subtle bugs • Investigate other plugins if your needs are simple https://wordpress.org/plugins/tags/geo
  • 12. EXAMPLE: RISINGVOICES MICROGRANTS • Navigate grant proposals via map • Display proposal location on post view http://rising.globalvoicesonline.org/amazonia-es/
  • 13. EXAMPLE: GLOBALVOICES COMMUNITY BLOG • Map of blog posts on homepage • Optional location display (shortcode) in posts http://community.globalvoicesonline.org/
  • 14. GEOTAGGINGTHINGS Post editor geolocation User geolocation Hard part: Choosing a single location
  • 15. MAP_CONTENT=GLOBAL • Show all posts on the site • Click for post preview • Customize zoom level, style, post limits etc. • Full power of WP_Query available
  • 16. MAP_CONTENT=SINGLE • Show current post on a map • Not very interactive • Optional: Link back to global map • Insert in content with shortcode • Display in theme with PHP
  • 17. MORE MAPTYPES • Contextual: Show all posts in main WP_Query • Radius: Show posts within $x km of a location • Place: Search for country, city, town, postal code • Custom: Pass in object_ids,WP_Query or taxonomy • Users: Show your authors/community on a map • OMG: More options than you want or need
  • 18. SHORTCODES & PHP • Almost all features available as [shortcodes]
 AND as static PHP methods (functions). • Shortcodes allow easy display inside post content. • PHP gives precise control anywhere in your theme. [geo_mashup_map] -> GeoMashup::map() [geo_mashup_full_post] -> GeoMashup::full_post() [geo_mashup_location_info] -> GeoMashup::location_info()
  • 19. SHORTCODES & PHP [geo_mashup_map height="200" width="400" zoom="2" add_overview_control="false" add_map_type_control="false"] <?php echo GeoMashup::map( ‘height=200&width=400&zoom=2&add_overview_control=false&add_map_type_control=false' );?> echo GeoMashup::map( array( 'height' => 200, 'width' => 400, 'zoom' => 2, 'add_overview_control' => 'false', 'add_map_type_control' => 'false', ); Complex map: shortcode Complex map: PHP+wp_parse_args() Complex map: PHP+array
  • 23. FIXING RESPONSIVENESS • Horribly unresponsive by default (fixed width+height) • Use Width: 100% as baseline • Use Height in px and find a balance • Height is hardcoded for each map, can’t be responsive :(
  • 24. SPECIAL MOBILE CONFIG • Fixed height for desktop will never work for mobile • Use MobileESP* and custom plugin code to identify small devices (smartphones) • Filter height to fit in smartphone screen • Filter zoom to to match new smaller size • Consider hiding maps entirely for mobile devices :( * https://github.com/ahand/mobileesp
  • 25. RESPONSIVE FUTURE? • Google Maps can be responsive* but not with Geo Mashup • CSS hack to maintain aspect ratio (shape) across widths • Hopefully: Future versions offer aspect ratio argument * http://www.labnol.org/internet/embed-responsive-google-maps/28333/
  • 26. STYLING LOCATION POPUPS • Awful by default. • Copy template file into your theme and edit to match: geo-mashup-info-window.php • Style CSS with .locationinfo • Media queries target map iframe, not full window: @media only screen and (max-width:300px) { .locationinfo {width: 160px;} }
  • 27. GEOLOCATING ATTACHMENTS • Not supported by Geo Mashup, but possible • Combine with Media Library Assistant* plugin: • Enables postmeta & taxonomy for attachments • Imports metadata from images • Can import GPS coordinates to standard WP storage* https://wordpress.org/support/topic/geo-tag-custom-field https://wordpress.org/plugins/media-library-assistant/
  • 29. GEO MASHUP RESOURCES • Features overview • Tag reference (shortcodes and template tags) • PHP API (helper functions and classes) https://github.com/cyberhobo/wordpress-geo-mashup/wiki/PHP-API https://github.com/cyberhobo/wordpress-geo-mashup/wiki/Tag-Reference https://github.com/cyberhobo/wordpress-geo-mashup/wiki/Feature-Usage • GitHub repository (development and issue tracker) https://github.com/cyberhobo/wordpress-geo-mashup/
  • 30. PUT A MAP ON IT! Enhanced geolocation and mapping with Geo Mashup http://jeremyclarke.org • @jeremyclarke Download these slides: http://slideshare.net/jeremyclarke Creative Commons Share Alike http://creativecommons.org/licenses/by-sa/3.0/