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
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/
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
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/
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/