Geo Tagging WordPress

Screen Shot 2014-12-07 at 9.26.12 PM

First, go try it out if you want. Submit something. It’ll help it make more sense.

I thought this would be a lot easier than I made it. I tried lots of paths and considered spending various amounts of money to make this easier. Please benefit (probably) from my wandering. I try to link in where I learned different things and, more importantly, I tried to emphasize vocabulary that might be useful to you.

My goal1 was to-

  1. have a Google2 Map interface that auto-located the device
  2. allow the user to drag the marker to adjust the location
  3. plot the resulting WordPress posts on a map

To make this work you do need a Google Maps API3 key and on the WordPress side you’ll need the Gravity Forms (Costs money but worth it) and Geo Mashup (free) plugins. Gravity Forms will let you create posts via a form and provision form elements via URL parameters. Geo Mashup is the friendliest way I found to display posts on a Google Map based on lat/long parameters associated with the post.

Auto Locate

I went to a few different places for this but ended up finding/using the handy example posted in the Google Maps API documentation. It took me a while to get there- “geolocation” is the key term. Add it to your terminology dictionary.


So now I needed to figure out a few additional things. The example created an info window rather than a marker so I needed to change that. I also needed to make the marker draggable.

When I looked at the code more closely, things looked possible for someone of my limited skill set.

The original chunk that makes the info window looks like this

 var infowindow = new google.maps.InfoWindow

So looking at the API, I found the marker information and changed it to the line below.

var marker = new google.maps.Marker

I changed the variable name (the var part) to help me keep things straight but I could have left it alone.4 Just make sure you change all instances of that variable. I tend to do a find/replace.

By changing to a marker, you have a new set of variables to use. Notice that draggable is one and I set it to ‘true’. The other stuff formats the icon. If you are setting multiple things per item, you need to use the curly brackets- I think of it like a subclause.

draggable: true,
icon: {
	  path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
	  scale: 10,
	  strokeColor: '#FF0000' 

So that worked. It took a while but it worked. I then realized, I didn’t quite know how to get the location data out.

Getting the Lat/Long Data Out

		  var laturl=marker.getPosition().lat();
		  var lngurl=marker.getPosition().lng();
		  var linkurl=baseurl.concat(laturl,comma,lngurl);

This chunk focuses on getting the lat/long of the initial point and puts them in the latbox and longbox in the page. I did this mainly for testing so I could make sure the code was working. If you left off the .lat() and/or .lng() piece, it’d pull the lat/long as one piece and you could get rid of half the code.

Lines three and four just assign the data to some variables so I could use it to make a URL that provisions a form. Line five makes it into a URL and line six adds the link to the button in the webpage.

This data does not update on drag. You need a LISTENER. They listen to changes in things. You’ll see virtually the same code as above with the addition of the listener function in the first line.

google.maps.event.addListener(marker, "drag", function(){	document.getElementById("latbox").innerHTML=marker.getPosition().lat();
		var laturl=marker.getPosition().lat();
		var lngurl=marker.getPosition().lng();
		var linkurl=baseurl.concat(laturl,comma,lngurl);

So at this point, we can complete goals one and two. We can then add the lat/long data to a URL piece. That’s what’s happening in the last two lines of both of the chunks above. It makes a URL that looks something like,%20-77.4544755

The first portion takes you to the page where the form is. The second piece ?coordinates= starts with a question mark to indicate it’s a query string and then coordinates identifies the form field you want to populate. We want to fill this field with the lat/long coordinates which are generated via the concatenation of the two variables.5

The Gravity Forms Portion

There’s a bit more detail on provisioning form fields via URL over here.

allow provisioning via URL
allow provisioning via URL

custom field association
custom field association

This pieces is just letting the Geo Mashup plugin know where we’re storing the lat/long coordinates. You can use already associated fields or make a new one and name it whatever works for you.

Another thing I did which helped make this a bit more interesting was to setup some custom CSS/div associations for the Gravity Form responses (below). I then just added those as responses like so . . .

<div class="excellent">0 JTU</div>

Nothing fancy but it added a color element that helped reinforce the good/bad associations. It had the added benefit of being reflected in the Gravity Views layout.6

.excellent {
	background-color: green;
	padding: 5px;
	display: block;
	color: white;

.good {
	background-color: #33CC00;
	padding: 5px;
	display: block;
	color: white;

.ok {
	background-color: #D0D0D0;
	padding: 5px;
	display: block;

.bad {
	background-color: red;
	padding: 5px;
	display: block;
	color: white;

Geo Mashup

I tried at least six geolocation plugins. I ended up going with Geo Mashup which is free. They have a fairly active Google Discussion group. It seems to have some rough edges but worked well for what I wanted (show all posts on one map and avoid creating custom post types) and I intend to mess with it a bit more in the future. It does require your Google Maps API7 key in order to function.

geo mashup settings

Below is the entire html/js/css page that makes the map lat/long picking page. It’s commented semi-decently and hopefully this post makes it more understandable.

1 The goal elements expand once I get into the details as usually happens.

2 I did look at Leaflet and a few other options . . . but found Google to be the easiest path.

3 See here for more API evangelism

4 Neither honey badgers nor JS care.

5 Three really. I set the comma and space as a variable as well. There’s almost definitely a cleaner way to do this but it works.

6 Paid plugin but a useful one for certain scenarios.


Teaching a Table New Tricks

I’m doing a presentation tomorrow with Jim Groom on how to create mashups without knowing anything about programming. The fun thing is it’s presented using a mashup of communist propaganda posters and that sort of rhetoric. Good clean American fun! It may, or may not, be presented entirely in a fake Russian accent. It will entirely depend on my mood (and Jim‘s).

You can also check out the full site here if you’re interested.

My example takes a table of information from Wikipedia on Industrial Warfare and steps you through the ways you can change it using SIMILE’s Exhibit. If you bother to look at the actual Exhibit pages you’ll see they link back to the Google spreadsheets to show you what data had to be added to create the changes on the pages.

So, you’ll start with this-

Industrial Warfare

Step 1

Making this data interactive- so I cut and paste the table into Excel and clean up the data a little bit. I make the html portion of Exhibit. Then I get what’s below- an interesting level of interactivity has been added. You can select/omit/sort the data now. So seeing relationships is a lot easier.

Step 2

Adding the visual component- now I felt that we needed something more visual so I added some image URLs and URLs to the Wikipedia articles. Now we’ve got the same level of interaction but with added visual content and the ability to follow information outward.

Step 3

Adding the map- if I were fancier I’d saying “adding the geo-spatial element.” I kept the visual interface underneath the map for this one but it probably could be removed.

Step 4

This is the final step and it’s adding the data and presentation of the timeline element.

So, the whole point in this is that Exhibit is freeing the information so that you can tweak and bend and add to the information until it does exactly what you need. You don’t have to accept information the way it is. You can change it and ultimately make it far more valuable to you and your students.

Maps of War


Maps of War is a fascinating site of animated maps showing the history of conflict in our world. They include a history of war and leadership (seen above) that walks through American conflicts and links the American President to various wars, a history of religious conquest throughout the world, and an interesting history of imperial occupation of the Middle East. Along with their own maps, the site links out to other animated maps the feature many of the major wars of our time.

I remember struggling as I tried to learn history from a textbook. It seemed like months or years would pass by in a matter of paragraphs. These animated maps would have helped foster a sense of continuity as we “marched” through chapters full of events.

via Boing Boing

Exhibit and Data Visualization

Exhibit V2

The kind and brilliant folks at MIT have come out with a new Exhibit API that allows for more flexibility and power. The bonus is that it looks good doing it. I’ve now revised my Google spreadsheet fed history example to use some of the new power. It’s here if you’re interested.

In the end I opted to mimic their new presidents layout (much like I mimicked their old presidents layout). This time I had a better reason than pure ignorance of the API (I now have impure ignorance after all). Their new layout is really right in line with what I’d like to focus on this year- data visualization/interaction. The new layout has the map right their with the time line. I like that. Time and location on one easy interactive page. Add in their option to sort and hide/expand sets based on the data you define and you’ve got something really powerful that will help students make connections.

A simple example is if I restrict my set to show only “explorers” then suddenly in the map and the time line things change. I notice explorers were mainly earlier and than none were born in the Americas (obvious to you and I but maybe the spark some kids need). Then I switch map views and I see that explorers did die in the Americas which leads into a conversation about the dangers of exploration and their root causes, motivations for enduring the dangers etc.

In the end, I feel I’m getting closer to Hans Rosling (I didn’t say I was there). My goal is data that is powerful and interactive. That’s what I feel is most impressive about what he shows. He gets data moving and that helps you see trends. Now if we could manipulate that data it’d be even more impressive. We need things like that for students. Exhibit is a big step in the right direction with the added bonus of being free and driven from a spreadsheet it becomes nearly irresistible. With the multiple authors that Google spreadsheets allows it can basically become a really interesting wiki interface driven by material your students create.

I’m working on re-writing the tutorials to reflect the new version. I’m not quite smart enough to follow the simple upgrade instructions so I figure some others are in the same boat. Maybe there’s a reason I didn’t go to MIT . . .

Google Earth – Proof of Concept Stuff

Google Earth

A while back I posted about using GoogleLookup to get data quickly and easily to make and put into Google Earth via Google Spreadsheets.

The example file is at It’s a network link. In Google Earth- click Add- Network Link and paste the URL into the Link box.

Here’s some information on how to do this if you’re interested.

Put Info into Google Earth from a Google Spreadsheet

Things ended up being far easier than I anticipated. The last time I did a networked KML link from a spreadsheet (sounds way fancier than it is) I had to make it myself and go through a different service. Now Google has a nice template all set up to make things work well and it makes things pretty as well.

Adding GoogleLookup to the Template

So the next thing I did was play around a little with the lookup function. I didn’t do too much. I was just playing around to make sure it would work. This wouldn’t save you much time as it’s only five cities but it you wanted to plot all this information for 50 cities things would start to get a lot more interesting.

I just added a few columns at the end of the spreadsheet and then set up the following formulas.
I put the lookup for population in cell L6
Lookup for population
and the lookup for elevation in cell M6
Lookup for elevation

Ok now how do I get that information to merge into the paragraphs in a coherent way? It’s not hard, but it looks fairly ugly.
Paragraph One
This formula says take the text “The population of “ (notice the space there) then add the contents of cell B6, then add the word ” is” (space again) and the contents of L6 (population). That gives us The population of Denver, Colorado is ######.. That’s the basic idea. You just add chunks of data- be they text (in quotes) or cell references- using the & sign.

Hopefully that makes some sort of sense. If not let me know and I’ll clarify.

I also played around a little and put a Swivel graph in one of the windows. I want to take that a little farther before I waste anyone’s time here with it but there’s some real potential there- especially with the ability to combine Google Lookup and exporting to Swivel.

Simile Exhibit Project – VA History SOLs

Simile Views
So I finally managed to get Exhibit working. Which is pretty impressive considering I’ve been working on it during NECC and I’ve failed a few times before.

The site is up here. The death locations aren’t correct right now but I welcome any feedback you’d care to give.

I think it has some really interesting potential in enabling students to interact with and see relationships between different types of data (geography/time/facts/eras).

Plus it looks pretty, is interactive and you can click to sort/categorize everything on the fly.

I used the same layouts used in their Presidents example. I took what they’d done and changed categories, some css etc. to create information that was more relevant to what we have to study. It was something of a hassle to get this done but I think it was worth it and I’m working on creating a basic template to allow teachers to put the data into a Google spreadsheet and drive the site through that.

Here’s a short video showing what it can do. Click here if you can’t see anything below.

What the World Eats

Food Picture
An interesting photo essay from Time that shows you the food eaten by families all over the world along with the grocery bill for one week and their favorite foods. It’s pretty interesting and would make a good way to expose students to other cultures, explore geography, talk about economics and even get into some health related concerns.

It worries me how much Coke the family in the picture above is drinking in a week and the amount of processed food some of the families eat is kind of scary as well. I’m not a health food nut so I imagine my own groceries would look as bad all piled up.

That might make for an interesting project. Have your students bring the receipt from a weekly grocery trip in and compile a digital image full of all the food their family bought. It’d make for an interesting conversation starter.

You could also graph the results, total how many bags of potato chips, how many gallons of Coke were bought. It’d be a great project to do collaboratively in Google Spreadsheets and then export to Swivel for graphing and manipulation

If you wanted to go the extra yard it’d be fun to calculate the total calories and the amount of exercise needed to burn them- how many miles of running, stairs climbed etc.

Whirligig on MyMaps

I’m working on do something similar to the awesome work over at Google Lit Trips using Google’s myMaps. The novel is Whirligig by Paul Fleischman- very powerful book that’s a quick read. It’s a great novel for this type of project (fiction but almost all real locations). The main character travels to the four corners of the U.S. (on a Greyhound Bus) as an act of atonement for killing a young girl in a DUI accident.

I’ve got the main locations mapped (some real specific information in Chicago) as well as most of the route. It will continue to expand as the students progress through the novel. Check it out if you’re interested. I’ll take requests as well, so let me know if you feel something is missing.

Now, what makes this useful? I figure you’ve got two options.

  1. You use it as a ancillary material to help get the students more involved in the novel. Let them explore the map and get them involved in explaining things and interacting with the information- otherwise it’s just a fancy map.
  2. You have the students add the information for the placemarks in Google Earth. Let them decide what is important at each location and

“My Maps” from Google (an actual example)

My Google Maps Example

I figured after being so gushy about the My Maps option from Google I ought to make a good example.

So here is a good start on a territorial acquisition map of the United States of America. I did it free hand based on a number of different maps I found on wikipedia and a few other places- so it’s not perfect and it still needs some work but I think it shows what you can do with little effort. Yes, I promise the writing will improve :).

The map took about 45 minutes or so to make. Most of that time was spent looking at various maps. I also increased my speed after I figured out I could move points in polygons after I finished rather than having to start all over.

I also made a quick screencast covering the basics of the My Maps tools.