Random Dispatches

How To Create a Wordpress Travel Blog with a Map

Jul 05

lindsayrgwattProgramming, Travel google maps, how to, wordpress View Comments

Wen and I are gearing up for a massive trip and she wanted a blog that has a map as the main page. The idea is that you can click on the map and see the corresponding posts.

It turns out that this is actually fairly straightforward to do; here’s a quick tutorial.

Step 1: Get a Wordpress Blog

This might work for other blogs, but I’m only familiar with the Wordpress platform. I’m assuming you’ve got one from here on in.

Step 2: Set up your Blog so that it Loads to a Page, not a List of Posts

Normally when your blog loads, it shows the 10 most recent posts that you’ve created. However, our plan is to create a map that will always be there when the blog loads. You can set this up via the “Reading” tab underneath “Settings”.

Later on we’ll change the text of this page so that it contains a map.

Step 3: Set up your Blog so that it Shows Friendly URLs

Next step is to make sure that your blog is showing friendly urls. (This means the URL of a page is something like yourblog.com/post/07/2010/my_post.html, not yourblog?post=341). You can set this up via the “Permalink” tab underneath settings.

Take a look at a couple of posts and a couple of different categories so that you can see what the different URLs look like. You’re going to add these to the map you’ll be creating.

Step 4: Create a Map of Where You’re Going

Next, go to Google Maps, sign in (you’ll need a Google account), and click on “My Maps” to create a new map:

Click “Create new map” and put in a new name. Then drop a marker on a place on your trip:

When the marker loads, select “Edit HTML” and then enter something similar to following:

<a href=”http://www.myblog.com/category/california”>My blog posts in California</a>

What you’re doing is making each of the info windows on the Google Map link to either a page or a category of pages on your blog.
For instance, if you had a category called “California”, the link would be “http://www.myblog.com/category/california”. When a user clicks on this link, they’ll see all the posts relevant to that part of the map.
Step 5: Get the URL of your Map
Once you’ve created all your locations, save your map. Then, click on “Link” on the right side of the map:

We’re going to embed this map on the page you specified in Step 2. The trick is to set up the map so that it shows the right location and has the correct width for your blog.
You’ll have to play around with your blog to see what the right width is (when you’ve finished the tutorial, you’ll see if the width if too wide/skinny). Start with 425 pixels (the default) and you can work your way up/down. The proper width will depend on the template you’re using.
As for the location, you can control this by clicking on the “Customize and preview embedded map” link. Pan/zoom the map and set it to a custom width/height that works for you:

Once you’re ready, copy all the text in that box at the bottom of the page.
Step 6: Paste the Code onto your Page
Now, go to that page from Step 2 and paste the html from the above step into the page. Make sure that you’re using the “HTML”, not “Visual” editor:

Save the page and publish it. Now, when you load your blog, you should see your map. When someone clicks on the map, an info window will pop up; when the click the link, it will go to the right page on your blog.
Known Limitations

• If you update your map, the new locations will appear automatically the next time someone loads your blog. However, if you want the map to open at a different location (say, Japan, instead of California), you need to go back to Step 5 and paste that link in again
• If you edit your page from Step 2, the iFrame will disappear. You’ll need to re-paste in the html from Step 5. This seems to be a Wordpress issue without a workaround.

Connecting to the Real World

Oct 19

lindsayrgwattProgramming, Technology arduino, hacking, nyc resistor Comments Off

Yesterday I spent the afternoon at NYC Resistor making my own Arduino (technically a Freeduino) microcontroller.  Say what?  That basically means that I spent the day soldering together a bunch of pieces of electronics that let me connect my computer to the physical world.

Here’s what the darn thing looks like:

The best way to look at this board is to look at the narrow black slits at the bottom and the top on the right hand side: they’re pins that you can connect to external electronic components (e.g., lights, sensors, etc.).  The big black chip controls the signals to those ’slits’ and ultimately connects to your computer via the silver piece on the upper left; you can alternatively plug the board right into the wall via the lower left.

The board itself will not do too much: it has four LEDs and you can blink one of them to make sure it’s working:

I’m going to play around with this some more and if I create anything interesting I’ll put some photos up.

Timestamps in Django

Sep 03

lindsayrgwattProgramming django, Programming, python Comments Off

I’ve recently been playing around with the Django web framework (all non-techies should stop reading this at once).  Here’s a little snippet of code that’s useful if you want to add a timestamp to a model you’re creating:

from datetime import datetime

class My_Model(models.Model):
  date_created = models.DateTimeField()
  date_modified = models.DateTimeField()

  def save(self):
    if self.date_created == None:
      self.date_created = datetime.now()
    self.date_modified = datetime.now()
    super(My_Model, self).save()

What happens is that when you save the object, you override the Django save method with your own. It checks to see if the object has a date_created timestamp. If it doesn’t (i.e., you’re creating it for the first time), it adds one. It also updates the date_modified timestamp every time you save it.

You might be wondering: why not just set the model to look like this:

date_created = models.DateTimeField(default=datetime.now())

It won’t work due to a quirk in Python. Python will calculate “now” to be the time when the model is loaded into interpreted. This means that every single object, until you restart the server, will get exactly the same timestamp. Not too useful – so use this hack instead.

The Future of the Web

Aug 21

lindsayrgwattProgramming Technology, Web Comments Off

It’s pretty much impossible to predict the future – particularly for something as fast moving as the Internet.  However, as part of Mozilla’s Concept Series, Adaptive Path has created a few videos (bonus: watch ‘em in HD) on what the future of the browser might be.

Essentially, the browser is the web – and your computer.  Everything is happening in the cloud and the browser is the container for all applications (whether communication, search, etc.) to occur.  One of the interesting aspects is that it involves web services seamlessly transferring data from one to another.

This has been the holy grail for folks for years, but it continually seems to get blocked (mainly due to a lack of standards or a proliferation of competing standards by large incumbents with entrenched interests).  However, it’s starting to occur.

Here’s an interesting example.  I work at WebMD and we have a partnership with Yahoo to serve you ads on Yahoo properties based upon your browsing history at WebMD.  This means that we share our data with them (although they don’t actually know what you saw; they just receive the ad).  Recently, I was testing out WebMD’s Rheumatoid Arthritis (RA) Health Check – and when I went to Yahoo News, check out the ad on the right hand side:

This is just a baby step, but I’m looking forward to the day when web services are constantly sharing data.  Things are going to get very interesting.  Hopefully it won’t create Skynet.