SlideShare uma empresa Scribd logo
1 de 21
Baixar para ler offline
Building Responsive Maps
with WordPress
Presented by

Alicia Duffy & Ben Bond
Norfolk, VA

Saturday, November 23, 13
Alicia Duffy
Designer & Front-End Developer
@bedsheet / aliciad@petaf.org

Ben Bond
PHP Developer
@benniestacks / bennyb@petaf.org

Norfolk, VA / www.peta.org

Saturday, November 23, 13
THE CATALYST:

peta2's Vegan Campus Map
Project
Requirements:
• Each school is a
WordPress post
• School provides
their address
• Color-coded map
by ranking
• Must be responsive
and mobile-friendly

Saturday, November 23, 13
Screenshot of custom post type + meta + taxonomy

Saturday, November 23, 13
Zip Code -> Coordinates
PHP
add_action('load-post.php', 'generic_map_admin_init');
add_action('load-post-new.php', 'generic_map_admin_init');!
function generic_map_admin_init() {
$screen = get_current_screen();
wp_register_script( 'googlemaps', 'http://
maps.googleapis.com/maps/api/js?
v=3&key=API_KEY&sensor=false' );
wp_register_script( 'field-geocode', 'field-geocode.js',
array( 'jquery', 'googlemaps' ), '', true );
! ! ! ! ! ! !
! ! !
if ( $screen->id == 'location' ) { ! !
!
! wp_enqueue_script( 'googlemaps' ); ! !
! wp_enqueue_script( 'field-geocode' );
}
} !

Saturday, November 23, 13
Find zip code meta, get coordinates
Javascript / field-geocode.js
jQuery.fn.codeAddress = function () {
! var geocoder = new google.maps.Geocoder();
! var zip = $'input[name="zip_code"]').attr('value');
! if(zip != '') {
! ! geocoder.geocode( { 'address': zip},
function(results, status) {
!
if (status == google.maps.GeocoderStatus.OK) {
var coordinates =
results[0].geometry.location.lng() + ", " +
results[0].geometry.location.lat();
$'input[name="coordinates"]').attr('value',
coordinates);
!
} else {
!
! alert("Geocode failed: " + status);
!
}
});
! }
}$(document).codeAddress();

Saturday, November 23, 13
After ZIP is entered, get coordinates
Javascript / field-geocode.js (..continued)
var typingTimer;
Text
var doneTypingInterval = 1000; // 1 second
!
$("input#zip_code").keyup(function(){
typingTimer = setTimeout(function() {
$(document).codeAddress();
}, doneTypingInterval);
});
$("input#zip_code").keydown(function(){
clearTimeout(typingTimer);
});!

Saturday, November 23, 13
LeafletJS

https://github.com/Leaflet/Leaflet

Open Source + HTML5 + Supports IE7+
Very Customizable

Saturday, November 23, 13
Add Leaflet to WordPress
wp_register_style( 'leaflet_style', 'leaflet-0.6.3.css',
'', '0.6.3' );
wp_register_script( 'leaflet-js', 'leaflet-0.6.3.js',
'', '0.6.3', true );
wp_register_script( 'leaflet-config', 'leafletconfig.js', '', '', true );
wp_enqueue_style( 'leaflet_style' );
// Register shortcode
add_shortcode('leaflet-map', 'generic_map_shortcode');
function generic_map_shortcode($atts) {
! wp_enqueue_script( 'leaflet-js' );
! wp_enqueue_script( 'leaflet-config' );
! echo '<div class="map-inner" style="width: 100%;
height: 500px;"><div id="map" style="width: 100%;
height: 100%;"></div></div>';
}
Saturday, November 23, 13
Basic Leaflet Map
Javascript / leaflet-config.js
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tile.cloudmade.com/API-KEY/1/256/
{z}/{x}/{y}.png', {
! attribution: 'Map data &copy; 2013 OpenStreetMap
contributors, Imagery &copy; 2013 CloudMade',
! key: 'API-KEY'
}).addTo(map);
! !
L.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS3 popup. <br> Easily
customizable.')
.openPopup();!

*See https://github.com/leaflet-extras/leaflet-providers
for more map choices.

Saturday, November 23, 13
Screenshot of custom post type + meta + taxonomy

Saturday, November 23, 13
How to map 1000+ posts?
Output all the posts as a geoJSON object
var locationMap = {
! "type": "FeatureCollection",
! "features": [{
"geometry": {
"type": "Point",
"coordinates": [-78.72000000000003, 35.81]
},
"type": "Feature",
"properties": {
"name": "WordCamp Raleigh",
"link": "http://localhost:8888/location/17/",
"symbol": "star"
},
"id": 1
}]
};

Saturday, November 23, 13
Generate the GeoJSON file
query_posts($query_string.'&order=DEC&posts_per_page=2000');
if( isset($_REQUEST['geo']) ) {
if( have_posts() ) {
while( have_posts() ) {
! ! the_post();
! ! $output[]=array(
! ! ! 'title' => get_the_title(),
! ! ! 'meta' => get_post_custom(),
! ! ! 'id'
=> get_the_id()
! ! );
}
}
}
$upload_dir = wp_upload_dir();
$theFile = $upload_dir['basedir'].'/geojson.php';
$expiration_date = strtotime("+1 day");
$now = strtotime("now");
Saturday, November 23, 13
Check File Expiration
$expiration_date = '.$expiration_date.';
$now = strtotime("now");
! !
if ( $expiration_date < $now ) {
! $refresh_file = file_get_contents("'.$callFile.'");
! if ( $refresh_file ) {
! ! echo file_get_contents("'.$cacheFile.'");
! }
} else {
//Display new cache file

Saturday, November 23, 13
foreach ($output as $key => $value) {
! $terms = get_the_terms($value['id'], 'location_symbol');
! $term = array_pop($terms);
! $fileContents .='
! ! {
! ! ! "geometry": {
! ! ! ! "type": "Point",
! ! ! ! "coordinates": [' . $value['meta']
['coordinates'][0] . ']
! ! ! },
! ! ! "type": "Feature",
! ! ! "properties": {
! ! ! ! "name": "' . $value['title'] . '",
! ! ! ! "link": "' . get_permalink($value['id']) . '",
! ! ! ! "symbol": "' . $term‐>name . '"
! ! ! },
! ! "id": ' . $count . '
! ! },
! ';
! ! $count++;
! }

Saturday, November 23, 13
Map each location
PHP
wp_register_script( 'geojson', get_site_url() . '/wpcontent/uploads/geojson.php', array( 'jquery' ), '', true );
Javascript / leaflet-config.js
L.geoJson(locationMap, {
! pointToLayer: function(feature, coordinates) {
! ! return L.marker(coordinates);
! },
! onEachFeature: onEachFeature
}).addTo(map);
function onEachFeature(feature, layer) {
! var popupContent = "<h4><a href='" +
feature.properties.link + "'>" + feature.properties.name +
"</a></h4>";
! layer.bindPopup(popupContent, {maxWidth:200});!
}

Saturday, November 23, 13
Screenshot of custom post type + meta + taxonomy

Saturday, November 23, 13
Customize Map Markers

• Awesome Leaflet Markers

https://github.com/lvoogdt/
Leaflet.awesome-markers

• Colorful & retina-proof markers for Leaflet
• Can use a taxonomy or meta field to
differentiate markers

• Uses web fonts for the icons

Saturday, November 23, 13
Icon-ize our Markers
PHP
wp_register_style( 'font_awesome', 'font-awesome.min.css');
wp_register_style( 'leaflet_markers', 'leaflet.awesome-markers.css');
wp_register_script( 'leaflet-awesome-markers', 'leaflet.awesome-markers.js', '',
'', true );

Javascript
L.geoJson(locationMap, {
!
pointToLayer: function(feature, coordinates) {
!
!
return L.marker(coordinates, {icon: L.AwesomeMarkers.icon({icon:
feature.properties.symbol, prefix: 'fa', markerColor:
randomColor(feature.properties.symbol)}) });
!
},
!
onEachFeature: onEachFeature
}).addTo(map);
function randomColor() {
!
var colors = Array('red', 'darkred', 'orange', 'green', 'darkgreen', 'blue',
'purple', 'darkpuple', 'cadetblue');
!
var color = colors[Math.floor(Math.random()*colors.length)];
!
return color;
}

Saturday, November 23, 13
Screenshot of custom post type + meta + taxonomy

Saturday, November 23, 13
Generic Map Plugin
A starting off point for making maps in WordPress
https://github.com/aliciaduffy/generic-map

•
•

Creates location post type and custom taxonomy

•

Generates an updated geoJSON object daily, w/
option to manually refresh

•

Adds a [leaflet-map] shortcode to easily drop the
map onto any page

Adds ZIP code and latitude/longitude custom meta
fields

Saturday, November 23, 13

Mais conteúdo relacionado

Destaque

Curriculum specification F5
Curriculum specification F5Curriculum specification F5
Curriculum specification F5
hajahrokiah
 
Juc paris olivier lamy talk
Juc paris olivier lamy talkJuc paris olivier lamy talk
Juc paris olivier lamy talk
Olivier Lamy
 
¡NÓ! LECHE DE VACA
¡NÓ! LECHE DE VACA¡NÓ! LECHE DE VACA
¡NÓ! LECHE DE VACA
pipis397
 
1ra clase cómo optimizar la busqueda en google
1ra clase cómo optimizar la busqueda en google1ra clase cómo optimizar la busqueda en google
1ra clase cómo optimizar la busqueda en google
Paola Padilla
 

Destaque (20)

M E N U C U A R E S M A L
M E N U  C U A R E S M A LM E N U  C U A R E S M A L
M E N U C U A R E S M A L
 
Curriculum specification F5
Curriculum specification F5Curriculum specification F5
Curriculum specification F5
 
Tutorial 1.4 - Explore results in a heatmap
Tutorial 1.4 - Explore results in a heatmapTutorial 1.4 - Explore results in a heatmap
Tutorial 1.4 - Explore results in a heatmap
 
La graviola
La graviolaLa graviola
La graviola
 
Apache sirona
Apache sironaApache sirona
Apache sirona
 
¡ALIMENTOS Y MALESTARES!
¡ALIMENTOS Y MALESTARES!¡ALIMENTOS Y MALESTARES!
¡ALIMENTOS Y MALESTARES!
 
Test King Virtual Test--Network+
Test King Virtual Test--Network+ Test King Virtual Test--Network+
Test King Virtual Test--Network+
 
Recomenzar
RecomenzarRecomenzar
Recomenzar
 
The Evolution of Live Preview Environment Design
The Evolution of Live Preview Environment DesignThe Evolution of Live Preview Environment Design
The Evolution of Live Preview Environment Design
 
UX Munich2015
UX Munich2015UX Munich2015
UX Munich2015
 
Virtual Event Planning
Virtual Event PlanningVirtual Event Planning
Virtual Event Planning
 
Design &amp; Evaluation Edu-Game
Design &amp; Evaluation Edu-GameDesign &amp; Evaluation Edu-Game
Design &amp; Evaluation Edu-Game
 
¡LA BELLEZA DE LOS ARBOLES!
¡LA BELLEZA DE LOS ARBOLES!¡LA BELLEZA DE LOS ARBOLES!
¡LA BELLEZA DE LOS ARBOLES!
 
Juc paris olivier lamy talk
Juc paris olivier lamy talkJuc paris olivier lamy talk
Juc paris olivier lamy talk
 
Good library use
Good library useGood library use
Good library use
 
¡NÓ! LECHE DE VACA
¡NÓ! LECHE DE VACA¡NÓ! LECHE DE VACA
¡NÓ! LECHE DE VACA
 
Tutorial 1.2 - Import modules from Biomart
Tutorial 1.2 - Import modules from BiomartTutorial 1.2 - Import modules from Biomart
Tutorial 1.2 - Import modules from Biomart
 
Tutorial 1.1 - Import Intogen tumor types
Tutorial 1.1 - Import Intogen tumor typesTutorial 1.1 - Import Intogen tumor types
Tutorial 1.1 - Import Intogen tumor types
 
82378 andrea bocelli-y_celline_dion-1
82378 andrea bocelli-y_celline_dion-182378 andrea bocelli-y_celline_dion-1
82378 andrea bocelli-y_celline_dion-1
 
1ra clase cómo optimizar la busqueda en google
1ra clase cómo optimizar la busqueda en google1ra clase cómo optimizar la busqueda en google
1ra clase cómo optimizar la busqueda en google
 

Semelhante a Responsive Maps in WordPress

Web+GISという視点から見たGISの方向性
Web+GISという視点から見たGISの方向性Web+GISという視点から見たGISの方向性
Web+GISという視点から見たGISの方向性
Hidenori Fujimura
 
Barcamp GoogleMaps - praktické ukázky kódu
Barcamp GoogleMaps - praktické ukázky kóduBarcamp GoogleMaps - praktické ukázky kódu
Barcamp GoogleMaps - praktické ukázky kódu
Milos Lenoch
 
Using jQuery to Extend CSS
Using jQuery to Extend CSSUsing jQuery to Extend CSS
Using jQuery to Extend CSS
Chris Coyier
 
Evrone.ru / BEM for RoR
Evrone.ru / BEM for RoREvrone.ru / BEM for RoR
Evrone.ru / BEM for RoR
Dmitry KODer
 
Ioannis Doxaras on GIS and Gmaps at 1st GTUG meetup Greece
Ioannis Doxaras on GIS and Gmaps at 1st GTUG meetup Greece Ioannis Doxaras on GIS and Gmaps at 1st GTUG meetup Greece
Ioannis Doxaras on GIS and Gmaps at 1st GTUG meetup Greece
CoLab Athens
 

Semelhante a Responsive Maps in WordPress (20)

Web+GISという視点から見たGISの方向性
Web+GISという視点から見たGISの方向性Web+GISという視点から見たGISの方向性
Web+GISという視点から見たGISの方向性
 
Cheap frontend tricks
Cheap frontend tricksCheap frontend tricks
Cheap frontend tricks
 
ESRI Dev Meetup: Building Distributed JavaScript Map Widgets
ESRI Dev Meetup: Building Distributed JavaScript Map WidgetsESRI Dev Meetup: Building Distributed JavaScript Map Widgets
ESRI Dev Meetup: Building Distributed JavaScript Map Widgets
 
Das Web Wird Mobil - Geolocation und Location Based Services
Das Web Wird Mobil - Geolocation und Location Based ServicesDas Web Wird Mobil - Geolocation und Location Based Services
Das Web Wird Mobil - Geolocation und Location Based Services
 
An Introduction to Jquery
An Introduction to JqueryAn Introduction to Jquery
An Introduction to Jquery
 
Mobile Application Development for the Web Developer
Mobile Application Development for the Web DeveloperMobile Application Development for the Web Developer
Mobile Application Development for the Web Developer
 
JQuery Flot
JQuery FlotJQuery Flot
JQuery Flot
 
Barcamp GoogleMaps - praktické ukázky kódu
Barcamp GoogleMaps - praktické ukázky kóduBarcamp GoogleMaps - praktické ukázky kódu
Barcamp GoogleMaps - praktické ukázky kódu
 
Writing Maintainable JavaScript
Writing Maintainable JavaScriptWriting Maintainable JavaScript
Writing Maintainable JavaScript
 
jQuery
jQueryjQuery
jQuery
 
Using jQuery to Extend CSS
Using jQuery to Extend CSSUsing jQuery to Extend CSS
Using jQuery to Extend CSS
 
AngularJS: The Bridge Between Today and Tomorrow's Web (Todd Motto)
AngularJS: The Bridge Between Today and Tomorrow's Web (Todd Motto)AngularJS: The Bridge Between Today and Tomorrow's Web (Todd Motto)
AngularJS: The Bridge Between Today and Tomorrow's Web (Todd Motto)
 
Alpha Streaming Realtime
Alpha Streaming RealtimeAlpha Streaming Realtime
Alpha Streaming Realtime
 
Evrone.ru / BEM for RoR
Evrone.ru / BEM for RoREvrone.ru / BEM for RoR
Evrone.ru / BEM for RoR
 
Ioannis Doxaras on GIS and Gmaps at 1st GTUG meetup Greece
Ioannis Doxaras on GIS and Gmaps at 1st GTUG meetup Greece Ioannis Doxaras on GIS and Gmaps at 1st GTUG meetup Greece
Ioannis Doxaras on GIS and Gmaps at 1st GTUG meetup Greece
 
Building evented single page applications
Building evented single page applicationsBuilding evented single page applications
Building evented single page applications
 
Building Evented Single Page Applications
Building Evented Single Page ApplicationsBuilding Evented Single Page Applications
Building Evented Single Page Applications
 
Photostream
PhotostreamPhotostream
Photostream
 
Photostream
PhotostreamPhotostream
Photostream
 
(BDT401) Big Data Orchestra - Harmony within Data Analysis Tools | AWS re:Inv...
(BDT401) Big Data Orchestra - Harmony within Data Analysis Tools | AWS re:Inv...(BDT401) Big Data Orchestra - Harmony within Data Analysis Tools | AWS re:Inv...
(BDT401) Big Data Orchestra - Harmony within Data Analysis Tools | AWS re:Inv...
 

Último

一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
wpkuukw
 
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
gajnagarg
 
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
nirzagarg
 
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman MuscatAbortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion pills in Kuwait Cytotec pills in Kuwait
 
How to Build a Simple Shopify Website
How to Build a Simple Shopify WebsiteHow to Build a Simple Shopify Website
How to Build a Simple Shopify Website
mark11275
 
怎样办理伯明翰城市大学毕业证(BCU毕业证书)成绩单留信认证
怎样办理伯明翰城市大学毕业证(BCU毕业证书)成绩单留信认证怎样办理伯明翰城市大学毕业证(BCU毕业证书)成绩单留信认证
怎样办理伯明翰城市大学毕业证(BCU毕业证书)成绩单留信认证
eeanqy
 
poliovirus-190801072449. pptx
poliovirus-190801072449.            pptxpoliovirus-190801072449.            pptx
poliovirus-190801072449. pptx
ssuser0ad194
 
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
HyderabadDolls
 
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
eqaqen
 
怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证
怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证
怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证
eeanqy
 
Simple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptxSimple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptx
balqisyamutia
 
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
gajnagarg
 

Último (20)

Lecture 01 Introduction To Multimedia.pptx
Lecture 01 Introduction To Multimedia.pptxLecture 01 Introduction To Multimedia.pptx
Lecture 01 Introduction To Multimedia.pptx
 
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
一比一定(购)滑铁卢大学毕业证(UW毕业证)成绩单学位证
 
Sweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptxSweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptx
 
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
Top profile Call Girls In eluru [ 7014168258 ] Call Me For Genuine Models We ...
 
Call Girls Jalaun Just Call 8617370543 Top Class Call Girl Service Available
Call Girls Jalaun Just Call 8617370543 Top Class Call Girl Service AvailableCall Girls Jalaun Just Call 8617370543 Top Class Call Girl Service Available
Call Girls Jalaun Just Call 8617370543 Top Class Call Girl Service Available
 
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
 
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman MuscatAbortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
 
How to Build a Simple Shopify Website
How to Build a Simple Shopify WebsiteHow to Build a Simple Shopify Website
How to Build a Simple Shopify Website
 
怎样办理伯明翰城市大学毕业证(BCU毕业证书)成绩单留信认证
怎样办理伯明翰城市大学毕业证(BCU毕业证书)成绩单留信认证怎样办理伯明翰城市大学毕业证(BCU毕业证书)成绩单留信认证
怎样办理伯明翰城市大学毕业证(BCU毕业证书)成绩单留信认证
 
poliovirus-190801072449. pptx
poliovirus-190801072449.            pptxpoliovirus-190801072449.            pptx
poliovirus-190801072449. pptx
 
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
Madhyamgram \ (Genuine) Escort Service Kolkata | Service-oriented sexy call g...
 
Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...
Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...
Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...
 
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
一比一定(购)西悉尼大学毕业证(WSU毕业证)成绩单学位证
 
怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证
怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证
怎样办理巴斯大学毕业证(Bath毕业证书)成绩单留信认证
 
High Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
High Profile Escorts Nerul WhatsApp +91-9930687706, Best ServiceHigh Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
High Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
 
Simple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptxSimple Conference Style Presentation by Slidesgo.pptx
Simple Conference Style Presentation by Slidesgo.pptx
 
UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...
UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...
UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...
 
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...
 
Just Call Vip call girls Fatehpur Escorts ☎️8617370543 Two shot with one girl...
Just Call Vip call girls Fatehpur Escorts ☎️8617370543 Two shot with one girl...Just Call Vip call girls Fatehpur Escorts ☎️8617370543 Two shot with one girl...
Just Call Vip call girls Fatehpur Escorts ☎️8617370543 Two shot with one girl...
 
The hottest UI and UX Design Trends 2024
The hottest UI and UX Design Trends 2024The hottest UI and UX Design Trends 2024
The hottest UI and UX Design Trends 2024
 

Responsive Maps in WordPress

  • 1. Building Responsive Maps with WordPress Presented by Alicia Duffy & Ben Bond Norfolk, VA Saturday, November 23, 13
  • 2. Alicia Duffy Designer & Front-End Developer @bedsheet / aliciad@petaf.org Ben Bond PHP Developer @benniestacks / bennyb@petaf.org Norfolk, VA / www.peta.org Saturday, November 23, 13
  • 3. THE CATALYST: peta2's Vegan Campus Map Project Requirements: • Each school is a WordPress post • School provides their address • Color-coded map by ranking • Must be responsive and mobile-friendly Saturday, November 23, 13
  • 4. Screenshot of custom post type + meta + taxonomy Saturday, November 23, 13
  • 5. Zip Code -> Coordinates PHP add_action('load-post.php', 'generic_map_admin_init'); add_action('load-post-new.php', 'generic_map_admin_init');! function generic_map_admin_init() { $screen = get_current_screen(); wp_register_script( 'googlemaps', 'http:// maps.googleapis.com/maps/api/js? v=3&key=API_KEY&sensor=false' ); wp_register_script( 'field-geocode', 'field-geocode.js', array( 'jquery', 'googlemaps' ), '', true ); ! ! ! ! ! ! ! ! ! ! if ( $screen->id == 'location' ) { ! ! ! ! wp_enqueue_script( 'googlemaps' ); ! ! ! wp_enqueue_script( 'field-geocode' ); } } ! Saturday, November 23, 13
  • 6. Find zip code meta, get coordinates Javascript / field-geocode.js jQuery.fn.codeAddress = function () { ! var geocoder = new google.maps.Geocoder(); ! var zip = $'input[name="zip_code"]').attr('value'); ! if(zip != '') { ! ! geocoder.geocode( { 'address': zip}, function(results, status) { ! if (status == google.maps.GeocoderStatus.OK) { var coordinates = results[0].geometry.location.lng() + ", " + results[0].geometry.location.lat(); $'input[name="coordinates"]').attr('value', coordinates); ! } else { ! ! alert("Geocode failed: " + status); ! } }); ! } }$(document).codeAddress(); Saturday, November 23, 13
  • 7. After ZIP is entered, get coordinates Javascript / field-geocode.js (..continued) var typingTimer; Text var doneTypingInterval = 1000; // 1 second ! $("input#zip_code").keyup(function(){ typingTimer = setTimeout(function() { $(document).codeAddress(); }, doneTypingInterval); }); $("input#zip_code").keydown(function(){ clearTimeout(typingTimer); });! Saturday, November 23, 13
  • 8. LeafletJS https://github.com/Leaflet/Leaflet Open Source + HTML5 + Supports IE7+ Very Customizable Saturday, November 23, 13
  • 9. Add Leaflet to WordPress wp_register_style( 'leaflet_style', 'leaflet-0.6.3.css', '', '0.6.3' ); wp_register_script( 'leaflet-js', 'leaflet-0.6.3.js', '', '0.6.3', true ); wp_register_script( 'leaflet-config', 'leafletconfig.js', '', '', true ); wp_enqueue_style( 'leaflet_style' ); // Register shortcode add_shortcode('leaflet-map', 'generic_map_shortcode'); function generic_map_shortcode($atts) { ! wp_enqueue_script( 'leaflet-js' ); ! wp_enqueue_script( 'leaflet-config' ); ! echo '<div class="map-inner" style="width: 100%; height: 500px;"><div id="map" style="width: 100%; height: 100%;"></div></div>'; } Saturday, November 23, 13
  • 10. Basic Leaflet Map Javascript / leaflet-config.js var map = L.map('map').setView([51.505, -0.09], 13); L.tileLayer('http://{s}.tile.cloudmade.com/API-KEY/1/256/ {z}/{x}/{y}.png', { ! attribution: 'Map data &copy; 2013 OpenStreetMap contributors, Imagery &copy; 2013 CloudMade', ! key: 'API-KEY' }).addTo(map); ! ! L.marker([51.5, -0.09]).addTo(map) .bindPopup('A pretty CSS3 popup. <br> Easily customizable.') .openPopup();! *See https://github.com/leaflet-extras/leaflet-providers for more map choices. Saturday, November 23, 13
  • 11. Screenshot of custom post type + meta + taxonomy Saturday, November 23, 13
  • 12. How to map 1000+ posts? Output all the posts as a geoJSON object var locationMap = { ! "type": "FeatureCollection", ! "features": [{ "geometry": { "type": "Point", "coordinates": [-78.72000000000003, 35.81] }, "type": "Feature", "properties": { "name": "WordCamp Raleigh", "link": "http://localhost:8888/location/17/", "symbol": "star" }, "id": 1 }] }; Saturday, November 23, 13
  • 13. Generate the GeoJSON file query_posts($query_string.'&order=DEC&posts_per_page=2000'); if( isset($_REQUEST['geo']) ) { if( have_posts() ) { while( have_posts() ) { ! ! the_post(); ! ! $output[]=array( ! ! ! 'title' => get_the_title(), ! ! ! 'meta' => get_post_custom(), ! ! ! 'id' => get_the_id() ! ! ); } } } $upload_dir = wp_upload_dir(); $theFile = $upload_dir['basedir'].'/geojson.php'; $expiration_date = strtotime("+1 day"); $now = strtotime("now"); Saturday, November 23, 13
  • 14. Check File Expiration $expiration_date = '.$expiration_date.'; $now = strtotime("now"); ! ! if ( $expiration_date < $now ) { ! $refresh_file = file_get_contents("'.$callFile.'"); ! if ( $refresh_file ) { ! ! echo file_get_contents("'.$cacheFile.'"); ! } } else { //Display new cache file Saturday, November 23, 13
  • 15. foreach ($output as $key => $value) { ! $terms = get_the_terms($value['id'], 'location_symbol'); ! $term = array_pop($terms); ! $fileContents .=' ! ! { ! ! ! "geometry": { ! ! ! ! "type": "Point", ! ! ! ! "coordinates": [' . $value['meta'] ['coordinates'][0] . '] ! ! ! }, ! ! ! "type": "Feature", ! ! ! "properties": { ! ! ! ! "name": "' . $value['title'] . '", ! ! ! ! "link": "' . get_permalink($value['id']) . '", ! ! ! ! "symbol": "' . $term‐>name . '" ! ! ! }, ! ! "id": ' . $count . ' ! ! }, ! '; ! ! $count++; ! } Saturday, November 23, 13
  • 16. Map each location PHP wp_register_script( 'geojson', get_site_url() . '/wpcontent/uploads/geojson.php', array( 'jquery' ), '', true ); Javascript / leaflet-config.js L.geoJson(locationMap, { ! pointToLayer: function(feature, coordinates) { ! ! return L.marker(coordinates); ! }, ! onEachFeature: onEachFeature }).addTo(map); function onEachFeature(feature, layer) { ! var popupContent = "<h4><a href='" + feature.properties.link + "'>" + feature.properties.name + "</a></h4>"; ! layer.bindPopup(popupContent, {maxWidth:200});! } Saturday, November 23, 13
  • 17. Screenshot of custom post type + meta + taxonomy Saturday, November 23, 13
  • 18. Customize Map Markers • Awesome Leaflet Markers https://github.com/lvoogdt/ Leaflet.awesome-markers • Colorful & retina-proof markers for Leaflet • Can use a taxonomy or meta field to differentiate markers • Uses web fonts for the icons Saturday, November 23, 13
  • 19. Icon-ize our Markers PHP wp_register_style( 'font_awesome', 'font-awesome.min.css'); wp_register_style( 'leaflet_markers', 'leaflet.awesome-markers.css'); wp_register_script( 'leaflet-awesome-markers', 'leaflet.awesome-markers.js', '', '', true ); Javascript L.geoJson(locationMap, { ! pointToLayer: function(feature, coordinates) { ! ! return L.marker(coordinates, {icon: L.AwesomeMarkers.icon({icon: feature.properties.symbol, prefix: 'fa', markerColor: randomColor(feature.properties.symbol)}) }); ! }, ! onEachFeature: onEachFeature }).addTo(map); function randomColor() { ! var colors = Array('red', 'darkred', 'orange', 'green', 'darkgreen', 'blue', 'purple', 'darkpuple', 'cadetblue'); ! var color = colors[Math.floor(Math.random()*colors.length)]; ! return color; } Saturday, November 23, 13
  • 20. Screenshot of custom post type + meta + taxonomy Saturday, November 23, 13
  • 21. Generic Map Plugin A starting off point for making maps in WordPress https://github.com/aliciaduffy/generic-map • • Creates location post type and custom taxonomy • Generates an updated geoJSON object daily, w/ option to manually refresh • Adds a [leaflet-map] shortcode to easily drop the map onto any page Adds ZIP code and latitude/longitude custom meta fields Saturday, November 23, 13