Got Net?

Over at Frame Digital we've been working on a new tool to create embeddable google maps using photos from Flickr users. Its one of those often touted mashups, its designed to be easy to use and we hope it will be useful for people who can't create these sort of things themselves. Its got loads of features, such as multiple map creation (registration required) custom photo dimensions, color palettes, map size, the list goes on.

There's a few tools out there that already do this sort of thing such as mapbuilder.net and MyPicsMap, but we think MapFlickr has some different features that make it stand out. If you want to see more Google map toys, Mashable has a great list.

The best way to understand it is to use it, head over to imapflickr.com and have a play. Just remember, your photos need to have geolocation information added to them before it will work!

I'm been using the Google Maps API for a few years now on various projects. Developer nirvana is often being able to integrate different APIs to get an entire entirely different project. Like for example merging Flickr geo-located photos onto a Google Map.

Recently my company released a website allowing registered users to upload photos and videos using their online control panal to store files on Flickr and YouTube. We used the excellent Flickr.NET wrapper and Google's own .NET class library for the YouTube integration. Approval of images and videos were done using a custom CMS tool on the website allowing content editors to preview the multimedia uploads before making them visible, using calls to the respective APIs to change permissions. It worked pretty well, although uploading large video files is definitely something your average user still struggles with. You can see the end result here.

While trawling the internet trying to figure out how to implement the various API integrations I came across a website at mapaset.4bcj.com that allows you to create your own Flickr/Google Maps mashup without doing any coding at all. Its basically a clever mashup wizard. I think its part of Brett Jones blog, but there's very little information about it.

The UI could maybe do with a bit of work, but its a great idea. I really like how the application can use different ways to access your photos, such as username, email address or even the URL to your photostream. Very clever and generated results are pretty good. Here's an example of it using the code generated on the site to show a bunch of photos from recent trip to Laos.

Introduction

This is a dialog-based plugin to handle formatting of source code for FCKeditor 2.5.x. It WON'T work with the new CKEditor (yet). It makes use of the SyntaxHighlighter 2.0.x javascript library available to download from Alex Gorbatchev's project page (the older version 1.5.1 version is available from Google Code).

The plugin primiarily edits a <pre> tag with some custom attributes. Its mainly aimed at users editing blogs or content management systems where there is a requirement to format programming languages on a website that is being edited using FCKEditor.

The plugin will not format the code in FCKEditor - the SyntaxHighlighter javascript library dynamically generates a lot of formatted HTML at runtime, which would cause problems in FCKEditor.

Skip straight to the good bits

Can't be bothered reading all this? View the online demo or download the plugin and go play with it yourself.

So what do I get then?

Correctly installed, the plugin is in the form of a tabbed dialogue box that looks like this:

Version history:

Huge thanks goes to Sergey Gurevich who wrote the updated code for the FCKEditor plugin to handle the latest version of the SyntaxHighlighter code and submitted useful bug fixes.

• v2.1.0 [23 May 2009]
  - Plugin version information now being displayed
  - Line highlighting feature added
  Download | Demo
   
• v2.0.1 [22 March 2009]
  Minor bug fix where semi-colons were sometimes positioned in the wrong place when no advanced options were selected
  Download
   
• v2.0 [2 March 2009]
  Latest version supporting SyntaxHighlighter 2.0.x
   
• v1.0.2 [2 March 2009]
  Bug fixes, final release supporting the older SyntaxHighlighter 1.5.1
  Note the instructions below are for the newer version of the library and makes references to syntaxhighlight2 a lot, this version uses syntaxhighlight. The documentation in the download will be more accurate.
  Download.| Demo
   
• v1.0.1 [10 Feb 2009].
   
• v1.0 [30 Nov 2008]. First version.

Known bugs:

Occasionally the dialogue box does not pickup the <pre> element to be edited in Firefox. It only seems to happen when a user clicks inside the <pre> tag with the mouse but doesn't actually move or interact with the cursor.
Fixed in version 1.0.2 - Thanks to Sergey Gurevich

Installation

1. Copying the files

Extract the contents of the zip in your plugins directory, so it ends up like this:

Note: Version 2 of the plugin must be extracted to a directory named 'syntaxhighlighter2'. The older plugin for the earlier version of the library must go in a folder named 'syntaxhighlighter'. The file fckplugin.js references this directory when the plugin initialises.

2. Adding it to FCKeditor

Now add in your fckconfig.js or custom js configuration file the following line (remember its javascript we are dealing with so everything is case sensitive!): 

FCKConfig.Plugins.Add( 'syntaxhighlight2', 'en') ;

3. Adding it to the toolbarset

Add the button 'SyntaxHighLight2' button to your toolbarset: 

FCKConfig.ToolbarSets["Basic"] = [
['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink', '-','SyntaxHighLight2','-','About']
] ;

4. Configure the plugin

The plugin will work 'out of the box', but you can configure a default language using the SyntaxHighlight2LangDefault parameter:

FCKConfig.SyntaxHighlight2LangDefault = 'csharp' ;

The full list of languages and corresponding codes are:

• c++ - C++
• csharp - C#
• css - CSS
• delphi - Delphi
• java - Java
• jscript - Java Script
• php - PHP
• python - Python
• ruby - Ruby
• sql - SQL
• vb - VB.NET
• xhtml - XML/HTML

In FCKEditor <pre> blocks aren't really formatted by default. I suggest editing your fck_editorarea.css (or equivalant if you are using a custom CSS file) to something that highlights code blocks better. eg:

pre
{
    background-color: #fff;
    font-family: "Consolas" , "Courier New" ,Courier,mono,serif;
    font-size: 12px;
    color: blue;
    padding: 5px;
    border: 1px dashed blue;
}

Configuring SyntaxHighlighter.

You must have SyntaxHighlighter installed and working to display properly formatted code. FCKEditor does not need it, but for code to be properly formatted on your website you must have it configurated correctly. For SyntaxHighlighter2 Alex Gorbatchev's site has loads of excellent information (he wrote it after all!), for the old version 1.5.1 library, the project wiki here is a good resouce, or this blog post might also be useful.

5. Use it

Now clear your browser cache (this stage is important!) and reload the editor, the new button should be ready to use.

6. Future updates

There's some additional functionality I might add at a later date:

• Preview tab using the SyntaxHighlighter library
• More configuration options, eg, available languages, path to SyntaxHighlighter files
• Dynamically adding a <pre> formatting style to the editor by default

7. And finally...

Thanks goes to Alex Gorbatchev for creating Syntax Highlighter!.