Using circles and events in Google Maps – the nerdy part

Here’s a little something I did after reading about the contaminated areas around the Fukushima Dai-ichi Power Plant. The danish newspaper Information has a piece here, CNN got a piece here.

The basic idea is to use the maps object “circle” to quickly put a clickable element on the map. Clicking the the circle will then of course present the relevant information. In this example I use JQuery to show() and hide() the corresponding information.

Effects – It’s a usability thing

To make the graphic seem responsive to the user I’ve added some small effects. This is quite important as it bring life to the graphic, I wanna see that something happens when I click something.

In this example, two effects are applied when clicking either of the circles. 1. The width of the line at the outer rim of the clicked circle goes from 1 pixel to 2 pixels. 2. The font-weigth of the corresponding list item goes bold.

The same thing happens when you click to list items, except for “Overblik”, which just puts both the circles line width to it’s standard of 1 pixel.

Make the map and site “listen” to each other

I won’t go in details about events in this post. You can get a taste of it here: HTML Events.

For those of you familiar with events fired in the standard HTML DOM, I’ll just point you in the right direction for making the map respond to DOM events and vice versa.

Google Maps has it’s own object model inside it. The map itself and various objects like polygons and so on can fire events like you’re used to from the HTML DOM. That makes the Google Map an powerful anchor for your dynamic website.

The information of events can also flow the opposite way by adding a DOM Listener to the map. In this example I use that feature for listening to clicks on the menu items, which in turn makes the corresponding circle respond by increasing it’s line width to 2 pixels. You can find all about event handling in Google Maps here: Google Maps JavaScript API V3 Events.

End note

First of all, if you’ve been reading this far, thank you! This is nerdy stuff, but the result are worth it.

Next of, the map seems to have issues when embedded in WordPress. If you take a look at the zoom status bar, it’s pretty much gone. Also, the satellite images doesn’t load right when you’re zoomed in. I’m not quite sure what to do about it.

That’s it, thanks for reading! Question and comments are more than welcome, of course.

The text bubble is often not the best way to show of information in Google Maps. This is a custom layout which uses the user events of Google Maps the show the relevant information. Very buggy and only a crude sketch for now.

By: Martin Ove

Google Maps is very widely used, and with good reason. It’s very easy to create maps, and you can customize the information shown in the text bubbles by embedding images and so on.

One thing I hate, though, is getting pushed around a map, which is to small to display all the information, that the publisher wants to show. Here’s one example, and it’s even a mild one from the danish tv-station, TV2: Verdens dyreste naturkatastrofer(Worlds most expensive natural disasters)

In each text bubble, there’s a link to a gallery of pictures, one from each of the disasters. Linking and galleries are good, but it’s a shame that I have to leave the map to look at the pictures.

Cue: JavaScript, CSS and HTML

I believe that the cure is this: Learn! Learn how to make good use of the small space you have, by making the web dynamic. It’s built into the web, and my example doesn’t use anything but supported standards for browsers. The technologies are free too, so there’s no excuse.

Designing dynamic web elements have another thing going for it too. If it’s well designed, it will entice the curiosity of the user, eager to explore what lies beneath other elements on the map. Of course, there’s a potential pitfall in this too. The interactive and dynamic element may become incomprehensible and the user may “give up” on exploring it as a result of losing the general view. This is a design consideration.

Dynamic web elements are also very interesting, when it comes to mobile devices. The small screen make for a great challenge on how to present information in an intuitive manner without making the content too shallow.

That’s it. I hope you enjoyed checking out this crude example. Questions and comments are welcome, of course.

Thanks for reading!

By: Martin Ove

Hi all.

I made a little tool, which can make the process of finding coordinates for polygons and polylines in Google Maps a lot easier and intuitive.

It lets you draw a line with multiple points by just clicking on the map. When you’re done, you just copy-paste the coordinates for further use.

Check it out: martinove.dk/maptools/polytool/

I made it for myself, as I needed to create some polygons for a little project. The process of finding the coordinates is very tiresome, bordering impossible. With this tool, it should be a breeze.

I tested it using IE9, Firefox 4 and Google Chrome, and had no problems.

Instructions:

1. Go to the area, that you want to work with.

2. Click “Start Plot”. When you click the map, it will register the coordinates and append it to area below the map.

3. When you’re done, go to the coordinates below the map and copy-paste them.

That’s it, you can now use the coordinates as you wish.

Notes: You can disable and activate the plotting as y0u wish. That might be useful, if you find the behavior annoying while navigating the map. You can also undo the added coordinates by pressing the button “remove last”.

If you have no idea, what to do with the coordinates, check out the documentation at Google here: Google Maps JavaScript API V3 and specifically the stuff about polylines and polygons here: Polylines. (polygons are just below that)

I hope you find it useful.

Here’s a short video demo. The quality is awful, but I hope it gets the message across. Go to 720p and play in fullscreen for the best result.

By: Martin Ove

PHP plays a huge role in the internet today, but unlike JavaScript, HTML and the likes, you can’t just try it out by typing a few commands into a text file and opening it with your browser.

PHP has to be installed on a server, a fact that for a long time has kept me from learning the language. Luckily, I discovered EasyPHP, which does all the work for you in a few minutes.

EasyPHP installs a Apache server and then installs PHP on it. You can do that yourself of course. Here’s the Windows installation instructions from php.net.

Over at EasyPHP.org, things are a little bit simpler though. Check out the introduction, which will guide you through the first steps.

And you’re set!

After following the introduction at EasyPHP.org, there should be no more obstacles between you and getting familiar with PHP.

Now, you can head over to the PHP Tutorial on W3Schools.com and start learning!

Postscript

I’m not usually a fan of over-simplifying things. I’m sure that both the Apache server and the installation of PHP is quite doable, but in this case, there’s a point in taking a shortcut.

I’ve been working a lot with WordPress, which is written in PHP. It’s my experience that you’ll often come across issues, where some basic knowledge of PHP can be quite useful. An example could be simple string operators.

A while ago, I had to customize the line in the theme that says “Posted by [author] at [time and date]“. It was simple stuff, so there were no problems in fixing it, but I would have loved to know that the period sign joins strings in PHP, what the include function does and how the date module works in advance.

Af: Martin Ove

Udlændingeaftalen med tilhørende pointsystem faldt på plads onsdag d.17 november, og det gav mig en idé til en interaktiv grafik, man kunne lave i den forbindelse.

Jeg har indsat en rå udgave nedenunder, og i første omgang er du meget velkommen til at se, om du kan samle nok point sammen. Senere skal jeg nok få skrevet om koden bagved. Det bliver engang i næste uge.

Jeg vil gøre opmærksom på, at indlægget her ikke handler om politik, overhovedet. Det handler om at bruge nettets muligheder, når det kommer til dynamiske hjemmesider. Så skulle det være på plads.

Kommentarer og spørgsmål er hjertelig velkomne.

Siden vises i øvrigt bedst i Firefox.

Opdatering 18. nov. 2010 kl. 19:53: Jeg er ikke den eneste, som har udgivet en pointberegner. TV2 har også en pointberegner, det er dog et Excel-ark, man skal downloade.

I shot this picture back in june 2008 and today I was reminded of it. The screen shows the N810 Internet Tablet with a bluetooth keyboard running Google Docs and saying “Who needs a laptop?” in danish. (Photo: Martin Ove Christensen)

By: Martin Ove

Today I saw the Galaxy Tab on the website of a danish retailer. The fourth picture shows the Galaxy Tab with a physical keyboard, and it reminded me of a picture I took, when I got my N810 years ago.

The N810 was the third “Internet Tablet” from Nokia and also the last(yet), if you don’t count in the WiMax edition. Later on, the N900 took over and carried on with the Maemo OS.

The N810 features a 4.13″ 800×480 pixel display and qwerty keyboard. It’s a bit slow in todays standard, but still very usable.

Anyways, I just wanted to share this little moment of gadget evolution. Oh, check out the header-picture btw, it’s the same one.

Thanks for reading.

If you want to learn JavaScript, these two sites will make your life easier.

By: Martin Ove

Learning new stuff is a lot easier, when you have access to good and inspiring materials to aid you on the way.

I wanna share two sites with you, that have taught me the JavaScript I know. If your seeking a step-by-step incremental tutorial on how start using JavaScript, this is it.

The first site is the mother of all, when it comes to learning web technology. The site is w3schools.com.

There are resources for learning HTML, PHP and all kinds of web technology, and then of course JavaScript.

Check out the JavaScript Tutorial.

After a while, the tutorial on w3schools.com actually became a bit boring, and I tried to find some exercises that would “light my fire” concerning JavaScript.

I found the site HTMLisEasy.com and more specific, the JavaScript section. The site offers an excellent JavaScript Tutor, that you should definitely check out.

After a while I was sorta going back and forth between the two. That’s actually pretty much where I’m at now.

That’s about it for now. If you know of other great sites, let others know in the comments.

Thanks for reading.

The plugin did exclude the category “Blog” from the frontpage, but it also made it impossible for the category posts widget to display posts from the category. That wasn’t good, cause I do want the blog to be more visible than it would with only the tab in the navigation bar.

I found the plugin Simply Exclude instead. It’s actually a bit confusing to use, but once I got my head around it, it does what I want it to. I’ll recommend it for sure. It seems to allow for some good fine tuning.

I had to figure out how to keep the blog posts away from the frontpage, as I wouldn’t like for the small ramblings to take attention away from the heavier posts.

Anyways, I might have found the answer in the plugin called Front Page Category. I simply allows you to check off the categories, that you want to appear on the frontpage.

I would like for the small blog posts to appear in a widget in the sidebar, and for that, I need to create a category which holds a least one posts. That’s the one you’re looking at right now.

If you have no idea on how to start scraping the web with Python, then read on. The first small step is simpler than I thought it would be.

By: Martin Ove

This post will teach you how to fetch the HTML of a website using Python in windows. This is as far as I have gotten at this time, and even though it isn’t really useful yet, I guess it’s the first step towards webscraping with Python.

First of all you need to get Python on your computer.

(Update 24.12.2010 – Be sure to check out Thomas’ comment after this post if you’re using Python 3.1. Some statements have changed. Thanks Thomas!)

1. Go python.org/download/ and download Python. I use 2.7 for windows.

2. Install it. Mine is installed at c:\python27\

Now you’re all set. Let’s fire up Python.

3. Go to your start menu and find the folder called “Python 2.7″. Click “IDLE (Python GUI)”

You should see something like this:

4. Type up “import urllib2″ and press enter. If all is well, nothing will happen and it will look like this:

If something is wrong, you’ll see something like this. Make sure to check for typos:

5. Type up “response = urllib2.urlopen(‘http://martinove.dk/test/example.html’)” and press enter. This will get the source code of the page as a file, but it won’t look like anything happened.

6. Type up “html = response.read()” and press enter. This will read the response you got from the webpage and assign it to the variable “html”. Expect no response other than a new line.

Here comes the magic though.

7. Type “print html” and…*drumroll*… enter!

If all goes well, you should see the source code of http://martinove.dk/test/example.html. It’s very small and made for this purpose.

Feel free to try out other urls while you’re at it.

That’s it for now. In the future I’ll fool around with parsing the HTML using BeautifulSoup You can read a lot more about how to fetching HTML here:
HOWTO Fetch Internet Resources Using urllib2

If you have any question be sure to just throw them at me.

Thanks for reading.