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 Theme
Acquia
 
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
Suzanne 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 - Webinar
Suzanne Dergacheva
 
Drupal distributions - how to build them
Drupal distributions - how to build themDrupal distributions - how to build them
Drupal distributions - how to build them
Dick 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? Webinar
Suzanne 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/12
ucbdrupal
 
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
Suzanne 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 Day
Suzanne Dergacheva
 
DrupalCamp NYC Panels Presentation - April 2014
DrupalCamp NYC Panels Presentation - April 2014DrupalCamp NYC Panels Presentation - April 2014
DrupalCamp NYC Panels Presentation - April 2014
Suzanne 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 2012
Suzanne 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 Theme
Suzanne Dergacheva
 
Slides bootstrap-4
Slides bootstrap-4Slides bootstrap-4
Slides bootstrap-4
Michael Posso
 
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 CSS
Julie Cameron
 
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
Snake Hill Web Agency
 
Wp nhcc portfolio
Wp nhcc portfolioWp nhcc portfolio
Wp nhcc portfolio
gregorvios
 
Drupal - Blocks vs Context vs Panels
Drupal - Blocks vs Context vs PanelsDrupal - Blocks vs Context vs Panels
Drupal - Blocks vs Context vs Panels
David 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 - Webinar
Suzanne Dergacheva
 
Intro to Drupal
Intro to DrupalIntro to Drupal
Intro to Drupal
mtlgirlgeeks
 

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 SDK
Layar
 
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
Jer Clarke
 
The Fast And The Fabulous
The Fast And The FabulousThe Fast And The Fabulous
The Fast And The Fabulous
Nicole Sullivan
 
Our Best Practices Are Killing Us
Our Best Practices Are Killing UsOur Best Practices Are Killing Us
Our Best Practices Are Killing Us
Nicole Sullivan
 
Scalable CSS Architecture
Scalable CSS ArchitectureScalable CSS Architecture
Scalable CSS Architecture
Michał Pierzchała
 
Object Oriented CSS
Object Oriented CSSObject Oriented CSS
Object Oriented CSS
Nicole Sullivan
 
Mapwork calculations
Mapwork calculationsMapwork calculations
Mapwork calculations
fenslin
 
Geography Skills Revision
Geography Skills RevisionGeography Skills Revision
Geography Skills Revision
Rob Marchetto
 
River Changes And Landforms
River Changes And LandformsRiver Changes And Landforms
River Changes And Landforms
whiskeyhj
 
Process Mapping
Process MappingProcess Mapping
Process Mapping
Anand Subramaniam
 
Simple Process Mapping Techniques
Simple Process Mapping TechniquesSimple Process Mapping Techniques
Simple Process Mapping Techniques
Stephen 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
 
TMS Google Mapping Components
TMS Google Mapping ComponentsTMS Google Mapping Components
TMS Google Mapping Components
Embarcadero Technologies
 
CKEditor Widgets with Drupal
CKEditor Widgets with DrupalCKEditor Widgets with Drupal
CKEditor Widgets with Drupal
Ranel 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 Maps
MetroCog
 
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
Xamarin
 
Mymap4everything - revised
Mymap4everything  - revisedMymap4everything  - revised
Mymap4everything - revised
Dynamicweb 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 OpenLayers
Jody 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 version
rudy_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 developer
Tek 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 Drupal
Suzanne Dergacheva
 
WordPress Navigation in Responsive Design
WordPress Navigation in Responsive DesignWordPress Navigation in Responsive Design
WordPress Navigation in Responsive Design
openchamp
 
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
GR8Conf
 
Mobile web in eZ Publish
Mobile web in eZ PublishMobile web in eZ Publish
Mobile web in eZ Publish
Igor Vrdoljak
 
Building responsive web mobile mapping applications
Building responsive web mobile mapping applicationsBuilding responsive web mobile mapping applications
Building responsive web mobile mapping applications
Allan Laframboise
 
Hacking up location aware apps
Hacking up location aware appsHacking up location aware apps
Hacking up location aware apps
Pradeep Varadaraja Banavara
 
Great Responsive-ability Web Design
Great Responsive-ability Web DesignGreat Responsive-ability Web Design
Great Responsive-ability Web Design
Mike 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 Montreal
Jer 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 2009
Jer Clarke
 
Caching and Optimization for WordPress
Caching and Optimization for WordPressCaching and Optimization for WordPress
Caching and Optimization for WordPress
Jer 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 '09
Jer Clarke
 
Global Voices Generic Presentation
Global Voices Generic PresentationGlobal Voices Generic Presentation
Global Voices Generic Presentation
Jer 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 Love
Jer 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

Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Muhammad Ali
 
Mastering OnlyFans Clone App Development: Key Strategies for Success
Mastering OnlyFans Clone App Development: Key Strategies for SuccessMastering OnlyFans Clone App Development: Key Strategies for Success
Mastering OnlyFans Clone App Development: Key Strategies for Success
David Wilson
 
July Patch Tuesday
July Patch TuesdayJuly Patch Tuesday
July Patch Tuesday
Ivanti
 
Patch Tuesday de julio
Patch Tuesday de julioPatch Tuesday de julio
Patch Tuesday de julio
Ivanti
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc
 
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite SolutionIPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Networks
 
Sonkoloniya documentation - ONEprojukti.pdf
Sonkoloniya documentation - ONEprojukti.pdfSonkoloniya documentation - ONEprojukti.pdf
Sonkoloniya documentation - ONEprojukti.pdf
SubhamMandal40
 
WhatsApp Spy Online Trackers and Monitoring Apps
WhatsApp Spy Online Trackers and Monitoring AppsWhatsApp Spy Online Trackers and Monitoring Apps
WhatsApp Spy Online Trackers and Monitoring Apps
HackersList
 
The Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF GuideThe Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF Guide
Shiv Technolabs
 
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
bhumivarma35300
 
Tailored CRM Software Development for Enhanced Customer Insights
Tailored CRM Software Development for Enhanced Customer InsightsTailored CRM Software Development for Enhanced Customer Insights
Tailored CRM Software Development for Enhanced Customer Insights
SynapseIndia
 
Computer HARDWARE presenattion by CWD students class 10
Computer HARDWARE presenattion by CWD students class 10Computer HARDWARE presenattion by CWD students class 10
Computer HARDWARE presenattion by CWD students class 10
ankush9927
 
Semantic-Aware Code Model: Elevating the Future of Software Development
Semantic-Aware Code Model: Elevating the Future of Software DevelopmentSemantic-Aware Code Model: Elevating the Future of Software Development
Semantic-Aware Code Model: Elevating the Future of Software Development
Baishakhi Ray
 
The importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT StandardizationThe importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT Standardization
Axel Rennoch
 
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
aslasdfmkhan4750
 
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
maigasapphire
 
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
sunilverma7884
 
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
Torry Harris
 
Integrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecaseIntegrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecase
shyamraj55
 
Using LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and MilvusUsing LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and Milvus
Zilliz
 

Recently uploaded (20)

Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
 
Mastering OnlyFans Clone App Development: Key Strategies for Success
Mastering OnlyFans Clone App Development: Key Strategies for SuccessMastering OnlyFans Clone App Development: Key Strategies for Success
Mastering OnlyFans Clone App Development: Key Strategies for Success
 
July Patch Tuesday
July Patch TuesdayJuly Patch Tuesday
July Patch Tuesday
 
Patch Tuesday de julio
Patch Tuesday de julioPatch Tuesday de julio
Patch Tuesday de julio
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
 
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite SolutionIPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite Solution
 
Sonkoloniya documentation - ONEprojukti.pdf
Sonkoloniya documentation - ONEprojukti.pdfSonkoloniya documentation - ONEprojukti.pdf
Sonkoloniya documentation - ONEprojukti.pdf
 
WhatsApp Spy Online Trackers and Monitoring Apps
WhatsApp Spy Online Trackers and Monitoring AppsWhatsApp Spy Online Trackers and Monitoring Apps
WhatsApp Spy Online Trackers and Monitoring Apps
 
The Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF GuideThe Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF Guide
 
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
 
Tailored CRM Software Development for Enhanced Customer Insights
Tailored CRM Software Development for Enhanced Customer InsightsTailored CRM Software Development for Enhanced Customer Insights
Tailored CRM Software Development for Enhanced Customer Insights
 
Computer HARDWARE presenattion by CWD students class 10
Computer HARDWARE presenattion by CWD students class 10Computer HARDWARE presenattion by CWD students class 10
Computer HARDWARE presenattion by CWD students class 10
 
Semantic-Aware Code Model: Elevating the Future of Software Development
Semantic-Aware Code Model: Elevating the Future of Software DevelopmentSemantic-Aware Code Model: Elevating the Future of Software Development
Semantic-Aware Code Model: Elevating the Future of Software Development
 
The importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT StandardizationThe importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT Standardization
 
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
 
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
 
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
 
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
 
Integrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecaseIntegrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecase
 
Using LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and MilvusUsing LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and Milvus
 

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/