WordPress has built-in support for storing location information on posts, but no real way to make use of it. The <a>Geo Mashup plugin</a> enables deep, powerful geolocation in WordPress, letting you easily add geolocations (coordinates) to almost any content type. It also displays locations on maps you can embed in your theme, posts or widgets, with a dizzying array of options for what to show and how to display it. This talk will start with the default geolocation system in WordPress and how Geo Mashup integrates with it. We'll then cover the basics of setup and adding locations on posts, then the different map types and situations where you'd use them. We'll finish with some dev considerations for displaying maps as elegantly as possible.

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/

6. GEOLOCATION IN WP?
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

9. https://wordpress.org/plugins/geo-mashup/

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

20. OVERALL CONFIGURATION

21. MAP-TYPE CONFIGURATION

22. INDIVIDUAL MAP OPTIONS

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/

28. GEOLOCATING ATTACHMENTS
http://middlememory.com/

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/