Mika Tuupola

Lately I have been playing with Google Static Maps API a lot. Writing the same things again and again is tedious job. I decided to put the code together as one clean extendable package. Writing object oriented interface for generating URL is trivial. Real meat is having working zoom and pan controls on static map with just 9 lines of code.

Code is still alpha quality. API might change any time. But here is a quick walkthrough of current features. We will build the map you see above step by step.

Read the rest of this entry

I made quick fix to Mephisto Sitemap plugin. Now it works with lates Mephisto 0.8 (Drax). All old plugins got broken when Mephisto changed to Rails Engines based plugin system.

Install by issuing the following command in your Mephisto root.

script/plugin install 
http://svn.appelsiini.net/svn/rails/plugins/mephisto_sitemap/

After installing remember to restart you WEBrick or Mongrel.

I have been running my own hardware since early 90’s. Hardware has always been produced by Sun Microsystems. Yes, I am a Sun fanboy. Times change and I am forced to retire my old hardware. So I went for shopping for decent VPS. Tried Media Temple first. Gandi was still invitation only. In the end chose Slicehost. Here are the reasons why.

Download Speed to Europe

I do have a small problem with having my hosting physically located in Northern America. I was worried of getting low download speed to Europe. I tested this from several hosts located in Finland and Estonia. Slicehost was always faster than Media Temple.

Read the rest of this entry

Today I arrived to sunny Riga to attend 9th Golden Hammer festival. I was invited to be Head of Digital Media Jury. Something I am really looking forward to.

As usual organization of all things has been top notch. Baltic people are absolutely great at organizing events. If any of you readers are here this week drop me a line or tweet. On thursday there will be BadAd party which is definitely worth visiting too.

I am in process of moving to a new host. If you see this you read content from the new server. Some things (especially WTF-8) might be broken. Would be great if you leave a comment when you find a broken demo or page.

Previously I showed you how to make a Google Static Map with clickable markers. Several people emailed me to ask how to show infowindow (or infobubble) when marker is clicked. Technique I explain below still needs JavaScript. It is used to open the infowindow. I use jQuery library in the examples.

Image above is just a screenshot. There is a separate page for working demo. Full source code is also available.

Infowindow HTML

First thing we need is HTML code for the infowindow. I wanted it look exactly the same as in Google Maps. I opened a random map and copied the HTML using FireBug inspect console.

Read the rest of this entry

Latest custom input for Jeditable uses jWYSIWYG editor by Juan M Martínez. This code has been almost ready for a while. This week I finally had time to fix some outstanding FireFox bugs.

If you are interested in writing your own Jeditable custom inputs read the introduction. You might also be interested in MarkItUp! custom input which is similar to jWYSIWYG input.

To test see the working demo and then download the source.

Usage

First include all needed JavaScript and CSS in your HTML.

<script src="jquery.js"" type="text/javascript"></script>
<script src="jquery.wysiwyg.js" type="text/javascript"></script>
<script src="jquery.jeditable.js" type="text/javascript"></script>
<script src="jquery.jeditable.wysiwyg.js" type="text/javascript"></script>
<link rel="stylesheet" href="jquery.wysiwyg.css" type="text/css">

Now you can use input type wysiwyg. Set onblur to ignore. Otherwise clicking menubar will cause editing to quit. You should also include atleast submit and cancel parameters. All jWYSIWYG settings can be passed using wysiwyg parameter. Check documentation from Juan’s webpage.

$('.editable').editable('http://www.example.com/save.php', { 
    type      : 'wysiwyg',
    onblur    : 'ignore',
    submit    : 'OK',
    cancel    : 'Cancel',
    wysiwyg   : { controls : { separator04         : { visible : true },
                               insertOrderedList   : { visible : true },
                               insertUnorderedList : { visible : true }
                }
    }
});

I tested the code with IE6, IE7, FF2, Safari and Chrome. In case you find any problems drop me a line.

Until now Jeditable only supported submitting edited data using POST method. This was against REST principles. POST should be used for creating new objects. PUT should be used for updating existing objects.

Most browsers do not natively support PUT method. Jeditable does it Rails way by using POST method but submitting additional variable called _method with value put.

Jeditable now has basic unit tests covering most configuration parameters. If you find any failing tests drop me a line. Download latest as source, minified or packed.

Changes Since 1.6.0

Submit method can now be POST (default) or PUT.

$(".editable").editable("http://www.example.com/save.php", { 
    method : "PUT" 
});

Bug where form was submitting twice if using code like below was fixed. Thanks to Hannes Tydén of soundcloud.com for patch.

$(".editable").editable("http://www.example.com/save.php", { 
    settings.submit : '<button type="submit">Save</button>'
});

Note that code below generates exactly the same HTML as code above.

$(".editable").editable("http://www.example.com/save.php", { 
    settings.submit : 'Save'
});

Small sideproject we just finished with Magnus. My good friend Misko Iho is starting his own company. He directs music videos and television commercials. Site is kept as simple as possible. Let the content speak for itself.

Altex Marketing has organized several online marketing seminars. Next one will be held 14. august 2008 at Uniquestay Hotel. Event starts at 14:00 and ends around 17:00. This event will concentrate on usability. Thus the name E!usability.

Tickets cost 1750 EEK (approximately 110 EUR). All previous events have been worth of the money. I believe this one wont be and exception either.

Speaker lineup

• Kristjan Jansen, freelance interaction designer and web activist, “User and convenience”. Read his blog.
• Hegle Sarapuu, Trinidad Consulting, “Learn to know your user”.
• Mihkel Jäätma, Realeyes, “Eyetracking in webdesign, why and how?”.
• Aivar Paalberg, Enter and Martin Salo, Laborint, “How to gain profit from usability analysis”.
• Epp-Kristiina Keerov and Carol Tikerperi, Altex Marketing, “Morae software demo”.

Related entries: E!UK – Six UK Digital Marketing Specialists in Tallinn, Eturundus! 8 – This Time at KUMU, Eturundus! 6 – The Big Picture, Eturundus! 4 by Altex Marketing, Notes From Eturundus! 3 – Rok Hrastnik

Lates paper issue of Best Marketing magazine had a short story of advertising agency Taevas. There was also short interview of myself. It was shortened quite a lot. Since lots of the stuff I wanted to stress out was missing, I decided to republish the original interview here.

How much has Interactive media changed during your career?

In the early days technical limitations affected everything we did. Browsers were more buggy than now. Bandwith was limited. Servers were extremely expensive. There were no such things as MySQL, PHP or Ruby on Rails. JavaScript was totally unusable. Most of work was done in languages such as Perl which were not actually designed for web work.

Those limitations do not exist anymore. You can concentrate more on the creative idea. Gone are the days when you needed funding to buy servers. Anyone with armed with creditcard can start their company using Amazon EC2 which provides endless computing power. New programming frameworks enable you to write working services in weeks instead of months. People have faster and faster internet connections.

Read the rest of this entry

I have been working with Sam Curren lately improving Jeditable custom input API. At the same time Sam has been working with his TinyMCE custom input.

Inline editing with TinyMCE has been requested several times in mailinglists and forums. After MarkItUp! and WYSIWYG (beta) it is now third content editor plugin for Jeditable.

TinyMCE input needs Jeditable 1.6.0 to work. Download it as source, minified or packed.

Changes Since 1.5.0

You can now call function when onblur is triggered.

$(".editable").editable("http://www.example.com/save.php", { 
    onblur   : function(value, settings) {
        console.log(this);
        console.log(value);
        console.log(settings);
    }
});

Read the rest of this entry

Static map is one big image. Markers are embedded inside the image. You can not use traditional <a href=”#”> tags around separate markers. Binding onclick event to separate marker images wont work either. There are no separate markers. Just one large image.

With imagemaps you can specify arbitary areas inside an image which links to given url. Area can be circle, rectangle or polygon. Simple imagemap could look like following:

<map name="marker_map">
  <area shape="circle" coords="75,103,12" href="#">
  <area shape="circle" coords="122,105,12" href="#">
</map>

With imagemaps we can create clickable markers for Google Static Maps. We need to position an imagemap area over each marker. Problem is how to calculate x and y pixel coordinates for each marker.

Read the rest of this entry

In previous part we made a Google Map with sidebar navigation which works even JavaScript turned off. Marker locations and sidebar were parsed from two KML files. Beginning Google Maps Applications is a great book to learn about KML and Google Maps in general.

In this second part of tutorial I show you how to add zoom and pan controls. Again, they work without JavaScript. Be sure to read tutorial part one first. Also check the live demo.

Before going forward I would like to answer a question which has been asked more than once:

Q: What is the point?
A: Two reasons. Websites should degrade gracefully. Page should still have understandable content even if JavaScript is turned off. Second reason is just because it is cool.

Add controls to static map

First we add arrows and plus and minus images on a separate layer. This layer is positioned over the static map. I use Google provided images. Mapki has list of all available images.

Read the rest of this entry

Google Maps API offers several nice but relatively unknown shortcuts. One of them is new GMarkerManager class. It enables you to easily control at what zoom levels markers are shown.

In the map above if you zoom in twice a marker appears. Zoom in another two times and the marker disappears. This effect can be achieved by using managers addMarker() method. Instead of using something like:

 var marker  = new GMarker(new GLatLng(latitude, longtitude));
 map.addOverlay(marker);

you must use:

 var marker  = new GMarker(new GLatLng(latitude, longtitude));
 var manager = new GMarkerManager(map);
 manager.addMarker(marker, min_zoom, max_zoom); 

Read the rest of this entry