FramedCloud PopUp with TextFile – OpenLayers

FramedCloud popups, even when data points are read from text file.
More specifically, use OpenLayers.Popup.FramedCloud with OpenLayers.Format.Text.
Live demo with full source.

Prequisites: OpenLayers basics, Javascript, OOP, reading API descriptions.
OpenLayers is a javascript library for creating interactive maps. It’s useful with OpenStreetMap.org, the worlds largest free map.

Data Points from Text File

Consider a TSV file, like this one from the examples

lat	lon	title	description	icon	iconSize	iconOffset
48.9459301	9.6075669	Title One	Description one<br>Second line.<br><br>(click again to close)	Ol_icon_blue_example.png	24,24	0,-24
48.9899851	9.5382032	Title Two	Description two.	Ol_icon_red_example.png	16,16	-8,-8

We can read it with OpenLayers.Format.Text. Because of Protocol.HTTP, this only works on the server, eg. “http://”, not from disk “file:///”

protocol: new OpenLayers.Protocol.HTTP({
        url: "textfile.txt",
        format: new OpenLayers.Format.Text(
        {
                extractStyles: true,
                extractAttributes: true
        })
})

Cool Popups with FramedCloud

When displaying, you can use FramedCloud, thus creating pretty popups

popup = new OpenLayers.Popup.FramedCloud("chicken",
        feature.geometry.getBounds().getCenterLonLat(),
        new OpenLayers.Size(100,100),
        content,
        null, true, onPopupClose);
feature.popup = popup;
map.addPopup(popup);

Enjoy Live Demo

Live demo with full source.