This is a presentation given at WordCamp Raleigh 2013 on creating maps in WordPress with LeafletJS. Sample code here - https://github.com/aliciaduffy/generic-map
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
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
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
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