Put A Map On It! Enhanced geolocation in WordPress with Geo Mashup
5 likes9,340 views
The document presents an overview of enhanced geolocation and mapping utilizing the Geo Mashup plugin for WordPress. It discusses geolocation concepts, plugin configuration, design considerations, and practical examples of implementation while also addressing potential drawbacks. Additionally, it offers guidance on shortcode usage, responsive design, and geolocating attachments.
![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()](https://image.slidesharecdn.com/jeremyclarke-wcmtl2015-putamaponit-morning-150705131348-lva1-app6892/85/Put-A-Map-On-It-Enhanced-geolocation-in-WordPress-with-Geo-Mashup-18-320.jpg)
![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](https://image.slidesharecdn.com/jeremyclarke-wcmtl2015-putamaponit-morning-150705131348-lva1-app6892/85/Put-A-Map-On-It-Enhanced-geolocation-in-WordPress-with-Geo-Mashup-19-320.jpg)
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/