Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
1 of 30

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



Download to read offline

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.

Related Books

Free with a 30 day trial from Scribd

See all

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

  1. 1. PUT A MAP ON IT! Enhanced geolocation and mapping with Geo Mashup • @jeremyclarke Download these slides: Creative Commons Share Alike
  2. 2. WHO IS JEREMY CLARKE? • Communications Studies at Concordia University. • HTML+CSS since 2003 • Montreal WordPress Organizer • Code & Design for GlobalVoices
  3. 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. 4. WHAT IS GEOLOCATION? • Choosing coordinates for objects • Displaying location as metadata • Displaying maps as navigation • Searching for content by location
  5. 5. GEOLOCATION IN WP? • Not really. • Mobile app & allow geotagging • Barely used in default themes (no maps) • Standardized metadata for coordinates
  7. 7. WHY GEOLOCATE? • Ambient awareness of locale (metadata) • Colorful, serendipitous discovery (navigation) • Hyperlocal content (search) • Just in case (for later)
  8. 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. 9.
  10. 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.
  11. 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
  12. 12. EXAMPLE: RISINGVOICES MICROGRANTS • Navigate grant proposals via map • Display proposal location on post view
  13. 13. EXAMPLE: GLOBALVOICES COMMUNITY BLOG • Map of blog posts on homepage • Optional location display (shortcode) in posts
  14. 14. GEOTAGGINGTHINGS Post editor geolocation User geolocation Hard part: Choosing a single location
  15. 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. 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. 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. 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. 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. 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. 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 :( *
  25. 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 *
  26. 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. 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*
  29. 29. GEO MASHUP RESOURCES • Features overview • Tag reference (shortcodes and template tags) • PHP API (helper functions and classes) • GitHub repository (development and issue tracker)
  30. 30. PUT A MAP ON IT! Enhanced geolocation and mapping with Geo Mashup • @jeremyclarke Download these slides: Creative Commons Share Alike