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, 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",
        new OpenLayers.Size(100,100),
        null, true, onPopupClose);
feature.popup = popup;

Enjoy Live Demo

Live demo with full source.

Posted in Uncategorized | Tagged | 3 Comments

3 Responses to FramedCloud PopUp with TextFile – OpenLayers

  1. Pat says:

    this example seems to be the closest to what I have working right now. I can show icons on my map that are read from my text file.

    BUT if two icons have the same lat/long, it only shows the last entry. I have read about clustering, but cannot figure out where to isnert the clustering code.

    Any help would be appreciated!

  2. Map tiles provider stopped providing tiles for all examples. Also the official Sundial example seased to function.

    If you want to see map tiles in this example, use official Mapnik tiles.

    I’ll update the example later, when I have time.

Leave a Reply

Your email address will not be published. Required fields are marked *



You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

  • Recent Posts

  • Picks

  • Boxing Clock for AndroidOcton8 Diving T-ShirtsShaking Tower Panda Android GameLearn Chinese with Android
  • Student projects