Put A Map On It! Enhanced geolocation in WordPress with 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 Alikehttp://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 Global Voices

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: RISING VOICES MICROGRANTS

• Navigate grant proposals via map

• Display proposal location on post view

http://rising.globalvoicesonline.org/amazonia-es/

EXAMPLE: GLOBAL VOICES COMMUNITY BLOG

• Map of blog posts on homepage

• Optional location display (shortcode) in posts

http://community.globalvoicesonline.org/

GEOTAGGING THINGS

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 MAP TYPES• 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 Alikehttp://creativecommons.org/licenses/by-sa/3.0/