Making an OpenStreetMap handler for Operator

From rukapedia
Jump to: navigation, search

The Operator extension for Firefox is a nifty tool for exploring the nascent world of microformats.

After adding some microformats to my website my next task was to try to develop a new "handler" for the extension, something that's alluded to here and explained more fully here.

My goal was to create a handler that would open up a geo location in the OpenStreetMap map in the same way that the default Operator setup opens maps in Google and Yahoo maps.

Looking Under The Hood of Operator

I'm new the world of Firefox extensions and "jar" files and the like, so it took me a little while to figure out how to take a look under the hood of Operator:

  • Navigate to your Firefox Profile directory; on my Mac this was under:
~/Library/Application Support/Firefox/Profiles
  • In the extensions directory, look inside the directory somewhat confusingly named:
{95C9A302-8557-4052-91B7-2BB6BA33C885}
  • Make a copy of the file called operator.jar you find there, but call the copy operator.zip
  • Use your favourite unzipping utility to "unzip" the file.
  • The result will be Operator in all its glory; the heart of the matter seems to be microformats.js

Operatorfiles.png

Making an OpenStreetMap Handler

Inside the Operator directory (the one inside extensions, not the one you just unzipped) is a sample handler called handler-example.js that's a good place to start. I started there, and ended up with this, which I saved as handler-osm.js in a new microformats directory in my main Firefox Profile directory:

if (typeof Microformats == "undefined") {
  var promptService = Components.classes["@mozilla.org/embedcomp/prompt-service;1"].
                                 getService(Components.interfaces.nsIPromptService);
  promptService.alert(window, "", "Microformats are not available. Microformats.js must be included");
}

/* you must specify the handler you are adding to here, as well as the microformat */
/* it applies to */
Microformats.geo.handlers.osm = {
/* Specify the description */
  description: "OpenStreetMap",
/* specify an encoded icon */
  icon: "data:image/png;base64," +
  "iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAIXRFWHRTb2Z0d2FyZQBHcmFwaGljQ29udmVydGVyIChJbnRlbCl3h/oZAAADXElEQVR4nIxTW2xLcRyueJJ4ELeIEBGJB4LwwoN4IRgeZhPmttXYuqluUetRmxiVbmZKN4qu1bU6vZzW1pWV6WWm7ebadHRVVtNuM+0iLDY21c+cc2Tj0cM/Ocn/fJff9/1/rEgkMi8YDC5OJBKTxsbGWPShvif7/f6lLpdjPX1PkmSmXC4/q1ar+e3t7au9bd414/+yfD7fCr2jCrq6sx/0jQpSZ1GYbljPxWqfFEOqOYW09DTw+BywOXtQSHCQsXsX0nemxoeHh6cwBLSa1lYV739vRt9XO7pGHDD3nsYZPRuc/BxcUIjwotsNrbsSKocIRtdl5BVkQywWG5LJJIuxQSmbe8e86I/Wo/vHQ7R9UiOfz0ZWcQrqfdV487EDzT4zyIdyODv1sL1QMeQej2ctQ6BrVJiiFPj9YDPeDNlx+6kUhzjZ4OtTQJjYuNp2FJWug6hzSmB6pIEjoMWOXWlDVCbn/ozQJI31d5vRAzfejbggs55GUUkh+Le2IUv6GALzUVQ8OACz+wqanmuhsp5HLie3uba2Vsnyd/iXesMkej7fw4dgHeXgPmydVyE4LsAJZQUq6y0ob7BDbi+BoVUK6xM1ist5AxKJxGowGE6xXC2u9R0DdxGmlKOdFMGX+0wOZRdKUVSah3s+FRqeXYb1sQI1DZdAN3aEONBLEMRQIBBYwhocHJyqb64eiVL2+8JGBN01uKOWgMPNBnGcgOBMHmqUQpxXCCG+JkT5dQGyczIhk8nKmBrpKpRGmTf8vRWhz1acOLwKezbMgLi0CAV8LniFOcikuj8m5CE3/xD2Z+6FVMxFk+1OOkPA1GhRKXx9jSA4K5G6bib2b5oO9pbZaPCoEAnpYWxRQqU8CUNjBehx6aBNFl3JhAO5VuQX5v8Fc1OngZuxEK/iVvR3GfF6yMPk8vabEz2/PAhRD87usG9kCAZi0fl7U+Yk/gUXbJ+LVttFvH5FItymQSRJ1TvagsjPVkSTj2B0Vo/S2TEENyS56nHwYQp8JGMByNsiaAxlcXX9pYDFez3R9d3JEISoR0a2XBmtuVl1a2KZvA7dvqzNMxK0cmHGorhWI+dRm7hsfDtjsdgsOjB6Ztr2uPIEAZ2B06Zli/hbnW9DL5f/e/k/5zcAAAD//wMADgTBZr8V5ScAAAAASUVORK5CYII=",

/* The action will be called whenever your item is selected */
/* We have provided a few helper function to be used in action */
/*   Microformats.loadUrl(url); - loads a URL */
/*   bookmark(item, microformatname) - bookmarks the microformat */
  action: function(item, event)
  {
    var geo = Microformats.geo.create(item); 
    Microformats.loadUrl("http://www.openstreetmap.org/index.html?lat=" + geo.latitude + "&lon=" + geo.longitude + "&zoom=16", event);
  }
}

Things that I changed from the example are:

  • Microformats.hCard.handlers.bar became Microformats.geo.handlers.osm -- because I'm creating a handler for the geo microformat, not the hCard used in the example.
  • description: "Bar!", became description: "OpenStreetMap", -- this is the description that Operator uses to display the name of the handler.
  • the string appended to "data:image/png;base64," + became a base64-encoded version of the OpenStreetMap icon that I created by taking a 16x16 PNG of the icon and running it through uuencode:
uuencode -m osm.png osm.png
  • and, finally, the action became:
var geo = Microformats.geo.create(item); 
Microformats.loadUrl("http://www.openstreetmap.org/index.html?lat=" + geo.latitude + "&lon=" + geo.longitude + "&zoom=16", event);

I figured the first line out by looking at the geo.js file inside the microformats directory inside operator.jar.

Installing the new Handler

Once the new handler-osm.js is installed (and, I think, Firefox restarted), activating the new handler is as simple as opening up the Operator Options dialog, selecting the Actions tab and creating a new action, as illustrated below:

Osmhandler.png

The result is that when I visit a page with geo microformatted information embedded in it, my Operator toolbar looks like this:

Osmmapper.png