Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

Background

Looking to create a pop-up that performs an Ajax request when the user clicks a marker on an OpenLayers map. The markers, however, have different icons.

The following is working code that can be used to accomplish the desired task:

var sites new OpenLayers.Layer.Markers( 'Sites' );
map.addLayer( sites );
addSiteMarkers( sites );

function addMarker( layer, lat, lng, img ) {
  var size   = new OpenLayers.Size( 32, 37 );
  var offset = new OpenLayers.Pixel( -(size.w/2), -size.h );
  var icon   = new OpenLayers.Icon( 'img/marker/' + img, size, offset );
  var marker = new OpenLayers.Marker( getLocation( lat, lng ), icon );

  layer.addMarker( marker );

  marker.events.register( 'click', layer, clickMarker );
}

function clickMarker() {
  alert( 'click' );

  // Pop-up code will go here...
}

function addSiteMarkers( sites ) {
  addMarker( sites, -113.3017895, 49.1939798, 'store.png' );
  addMarker( sites, -113.3072538, 49.2013626, 'building.png' );
}

The above code adds two markers (of hundreds) each having a different icon (from a set of fifty different icons). Each click will display a pop-up and each pop-up will have information that is retrieved from a database (using a jQuery ajax call).

Problem

I suspect this is a terribly inefficient way to use OpenLayers and map markers for opening pop-ups when a user clicks an icon.

Question

How do you use OpenLayers to present a variety of different markers that when clicked display a pop-up (with content dependent on the actual marker that was clicked)?

Update #1

Most of the examples show how to use a Vector layer, rather than a Marker layer, to handle click events. Using a Vector layer makes making markers more mind-boggling.

Related

Thank you!

share|improve this question

2 Answers 2

up vote 6 down vote accepted

Few pointers to get you started. You've already done some research, so you know the right places to look for more info:

  1. Don't use a Markers layer. Do use a Vector layer.

  2. Vector layer can be styled. Each of your points can have attributes e.g. "color:blue" or "severity:moderate" and based on those attributes you can Style the points with different icons or shapes

  3. Attach the on-click handler to the LAYER not individual points. The click handler will get a parameter that is the Feature being clicked on. From there you can retrieve attributes attached to the feature.

  4. Inside click-handler show a Bubble and you control what goes in the bubble HTML -> could be point ID (rather pointless) or some other meta-data that you store in the point attribute e.g. "title: point1" "title: point2"

  5. Alternatively you can also do all of the above by adding a KML layer that's properly styled, and the Placemarks have appropriate and tags.

Here are some samples:

  1. http://dev.openlayers.org/releases/OpenLayers-2.12/examples/styles-unique.html
  2. http://dev.openlayers.org/releases/OpenLayers-2.12/examples/styles-context.html
  3. http://dev.openlayers.org/releases/OpenLayers-2.12/examples/style-rules.html
share|improve this answer

Try this codes:

<!DOCTYPE html>
<html debug="true">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>OpenLayers: Popup Mayhem</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<style type="text/css">
    #map {
        width: 900px;
        height: 500px;
        border: 1px solid black;
        background-color: blue;
    }
</style>

<script src="../lib/Firebug/firebug.js"></script>
<script src="../OpenLayers.js"></script>
<script type="text/javascript">
    var map;
    var layer, markers;

    var currentPopup;

    var samplePopupContentsHTML = "Old man down, way down down, down by the docks of the city.<br>Blind and dirty, asked me for a dime, a dime for a cup of coffee.<br>I got no dime but I got some time to hear his story.<br>My name is August West, and I love my Pearly Baker best more than my wine.<br>More than my wine - more than my maker, though he's no friend of mine.<br><br>Everyone said, I'd come to no good, I knew I would Pearly, believe them.<br>Half of my life, I spent doin' time for some other fucker's crime,<br>The other half found me stumbling 'round drunk on Burgundy wine.<br><br>But I'll get back on my feet again someday,<br>The good Lord willin', if He says I may.<br>I know that the life i'm livin's no good,<br>I'll get a new start, live the life I should.<br>I'll get up and fly away, I'll get up and fly away, fly away.<br><br>Pearly's been true, true to me, true to my dyin' day he said,<br>I said to him, I said to him, I'm sure she's been.<br>I said to him, I'm sure she's been tru to you.<br><br>Got up and wandered, wandered downtown, nowhere to go but just hang around.<br>I've got a girl, named Bonnie Lee, I know that girl's been true to me.<br>I know she's been, I'm sure she's been true to me.<br><br>";
    var samplePopupContentsHTML_WideShort = "Old man down, way down down, down by the docks of the city.Blind and dirty, asked me for a dime, a dime for a cup of coffee.I got no dime but I got some time to hear his story.My name is August West, and I love my Pearly Baker best more than my wine.More than my wine - more than my maker, though he's no friend of mine.Everyone said, I'd come to no good, I knew I would Pearly, believe them.<br>Half of my life, I spent doin' time for some other fucker's crime,The other half found me stumbling 'round drunk on Burgundy wine.But I'll get back on my feet again someday,The good Lord willin', if He says I may.I know that the life i'm livin's no good,I'll get a new start, live the life I should.I'll get up and fly away, I'll get up and fly away, fly away.Pearly's been true, true to me, true to my dyin' day he said,I said to him, I said to him, I'm sure she's been.I said to him, I'm sure she's been tru to you.Got up and wandered, wandered downtown, nowhere to go but just hang around.I've got a girl, named Bonnie Lee, I know that girl's been true to me.I know she's been, I'm sure she's been true to me.";

// different popup types

//anchored
    AutoSizeAnchored = OpenLayers.Class(OpenLayers.Popup.Anchored, {
        'autoSize': true
    });

    AutoSizeAnchoredMinSize = OpenLayers.Class(OpenLayers.Popup.Anchored, {
        'autoSize': true, 
        'minSize': new OpenLayers.Size(400,400)
    });

    AutoSizeAnchoredMaxSize = OpenLayers.Class(OpenLayers.Popup.Anchored, {
        'autoSize': true, 
        'maxSize': new OpenLayers.Size(100,100)
    });

    //framed

    //disable the autosize for the purpose of our matrix
    OpenLayers.Popup.FramedCloud.prototype.autoSize = false;

    AutoSizeFramedCloud = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {
        'autoSize': true
    });

    AutoSizeFramedCloudMinSize = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {
        'autoSize': true, 
        'minSize': new OpenLayers.Size(400,400)
    });

    AutoSizeFramedCloudMaxSize = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {
        'autoSize': true, 
        'maxSize': new OpenLayers.Size(100,100)
    });


    function init(){
        map = new OpenLayers.Map('map');

        layer = new OpenLayers.Layer.Image(
            "popupMatrix", 
            "img/popupMatrix.jpg", 
            new OpenLayers.Bounds(-82.5,-71.5,97.5,67.5),
            new OpenLayers.Size(1024,768)
        );
        map.addLayer(layer);

        markers = new OpenLayers.Layer.Markers("zibo");
        map.addLayer(markers);

        map.addControl(new OpenLayers.Control.LayerSwitcher());
        map.zoomToMaxExtent();

        addMarkers();
    }

    function addMarkers() {

        var ll, popupClass, popupContentHTML;

    //
    //Anchored NO OVERFLOW
    //

        //anchored popup small contents no autosize
        ll = new OpenLayers.LonLat(-55,20);
        popupClass = OpenLayers.Popup.Anchored;
        popupContentHTML = '<img src="img/small.jpg"></img>';
        addMarker(ll, popupClass, popupContentHTML);

        //anchored popup small contents no autosize closebox
        var ll = new OpenLayers.LonLat(-50,20);
        popupClass = OpenLayers.Popup.Anchored;
        popupContentHTML = '<img src="img/small.jpg"></img>';
        addMarker(ll, popupClass, popupContentHTML, true);


        //anchored popup small contents autosize
        ll = new OpenLayers.LonLat(-40,20);
        popupClass = AutoSizeAnchored;
        popupContentHTML = '<img src="img/small.jpg"></img>';
        addMarker(ll, popupClass, popupContentHTML);

        //anchored popup small contents autosize closebox
        ll = new OpenLayers.LonLat(-35,20);
        popupClass = AutoSizeAnchored;
        popupContentHTML = '<img src="img/small.jpg"></img>';
        addMarker(ll, popupClass, popupContentHTML, true);


        //anchored popup small contents autosize minsize
        ll = new OpenLayers.LonLat(-25,20);
        popupClass = AutoSizeAnchoredMinSize;
        popupContentHTML = '<img src="img/small.jpg"></img>';
        addMarker(ll, popupClass, popupContentHTML);

        //anchored popup small contents autosize minsize closebox
        ll = new OpenLayers.LonLat(-20,20);
        popupClass = AutoSizeAnchoredMinSize;
        popupContentHTML = '<img src="img/small.jpg"></img>';
        addMarker(ll, popupClass, popupContentHTML, true);


        //anchored popup small contents autosize maxsize
        ll = new OpenLayers.LonLat(-10,20);
        popupClass = AutoSizeAnchoredMaxSize;
        popupContentHTML = '<img src="img/small.jpg"></img>';
        addMarker(ll, popupClass, popupContentHTML);

        //anchored popup small contents autosize maxsize closebox
        ll = new OpenLayers.LonLat(-5,20);
        popupClass = AutoSizeAnchoredMaxSize;
        popupContentHTML = '<img src="img/small.jpg"></img>';
        addMarker(ll, popupClass, popupContentHTML, true);


        //anchored popup bigger contents autosize
        ll = new OpenLayers.LonLat(5,20);
        popupClass = AutoSizeAnchored;
        popupContentHTML = '<div style="background-color:red;">Popup.Anchored<br>autosize<br>' + samplePopupContentsHTML + '</div>';
        addMarker(ll, popupClass, popupContentHTML);

        //anchored popup bigger contents autosize closebox
        ll = new OpenLayers.LonLat(10,20);
        popupClass = AutoSizeAnchored;
        popupContentHTML = '<div style="background-color:red;">Popup.Anchored<br>autosize<br>closebox<br>' + samplePopupContentsHTML + '</div>';
        addMarker(ll, popupClass, popupContentHTML, true);

        //anchored popup wide short text contents autosize
        ll = new OpenLayers.LonLat(20,20);
        popupClass = AutoSizeAnchored;
        popupContentHTML = '<div style="background-color:red;">Popup.Anchored<br>autosize - wide short text<br>' + samplePopupContentsHTML_WideShort + '</div>';
        addMarker(ll, popupClass, popupContentHTML);

        //anchored popup wide short text contents autosize closebox
        ll = new OpenLayers.LonLat(25,20);
        popupClass = AutoSizeAnchored;
        popupContentHTML = '<div style="background-color:red;">Popup.Anchored<br>autosize - wide short text<br>closebox<br>' + samplePopupContentsHTML_WideShort + '</div>';
        addMarker(ll, popupClass, popupContentHTML, true);


        //anchored popup wide short fixed contents autosize
        ll = new OpenLayers.LonLat(35,20);
        popupClass = AutoSizeAnchored;
        popupContentHTML = '<img src="img/wideshort.jpg"></img>';
        addMarker(ll, popupClass, popupContentHTML);

        //anchored popup wide short fixed contents autosize closebox
        ll = new OpenLayers.LonLat(40,20);
        popupClass = AutoSizeAnchored;
        popupContentHTML = '<img src="img/wideshort.jpg"></img>';
        addMarker(ll, popupClass, popupContentHTML, true);


        //anchored popup thin long fixed contents autosize
        ll = new OpenLayers.LonLat(50,20);
        popupClass = AutoSizeAnchored;
        popupContentHTML = '<img src="img/thinlong.jpg"></img>';
        addMarker(ll, popupClass, popupContentHTML);

        //anchored popup thin long fixed contents autosize closebox
        ll = new OpenLayers.LonLat(55,20);
        popupClass = AutoSizeAnchored;
        popupContentHTML = '<img src="img/thinlong.jpg"></img>';
        addMarker(ll, popupClass, popupContentHTML, true);


        //anchored popup wide long fixed contents autosize
        ll = new OpenLayers.LonLat(65,20);
        popupClass = AutoSizeAnchored;
        popupContentHTML = '<img  src="img/widelong.jpg"></img>';
        addMarker(ll, popupClass, popupContentHTML);

        //anchored popup wide long fixed contents autosize closebox
        ll = new OpenLayers.LonLat(70,20);
        popupClass = AutoSizeAnchored;
        popupContentHTML = '<img  src="img/widelong.jpg"></img>';
        addMarker(ll, popupClass, popupContentHTML, true);

    //
    //Anchored WITH OVERFLOW
    //

        //anchored popup small contents no autosize overflow
        var ll = new OpenLayers.LonLat(-55,15);
        popupClass = OpenLayers.Popup.Anchored;
        popupContentHTML = '<img src="img/small.jpg"></img>';
        addMarker(ll, popupClass, popupContentHTML, false, true);

        //anchored popup small contents no autosize closebox overflow
        var ll = new OpenLayers.LonLat(-50,15);
        popupClass = OpenLayers.Popup.Anchored;
        popupContentHTML = '<img src="img/small.jpg"></img>';
        addMarker(ll, popupClass, popupContentHTML, true, true);


        //anchored popup small contents autosize overflow
        ll = new OpenLayers.LonLat(-40,15);
        popupClass = AutoSizeAnchored;
        popupContentHTML = '<img src="img/small.jpg"></img>';
        addMarker(ll, popupClass, popupContentHTML, false, true);

        //anchored popup small contents autosize closebox overflow
        ll = new OpenLayers.LonLat(-35,15);
        popupClass = AutoSizeAnchored;
        popupContentHTML = '<img src="img/small.jpg"></img>';
        addMarker(ll, popupClass, popupContentHTML, true, true);


        //anchored popup small contents autosize minsize overflow
        ll = new OpenLayers.LonLat(-25,15);
        popupClass = AutoSizeAnchoredMinSize;
        popupContentHTML = '<img src="img/small.jpg"></img>';
        addMarker(ll, popupClass, popupContentHTML, false, true);

        //anchored popup small contents autosize minsize closebox overflow
        ll = new OpenLayers.LonLat(-20,15);
        popupClass = AutoSizeAnchoredMinSize;
        popupContentHTML = '<img src="img/small.jpg"></img>';
        addMarker(ll, popupClass, popupContentHTML, true, true);


        //anchored popup small contents autosize maxsize overflow
        ll = new OpenLayers.LonLat(-10,15);
        popupClass = AutoSizeAnchoredMaxSize;
        popupContentHTML = '<img src="img/small.jpg"></img>';
        addMarker(ll, popupClass, popupContentHTML, false, true);

        //anchored popup small contents autosize maxsize closebox overflow
        ll = new OpenLayers.LonLat(-5,15);
        popupClass = AutoSizeAnchoredMaxSize;
        popupContentHTML = '<img src="img/small.jpg"></img>';
        addMarker(ll, popupClass, popupContentHTML, true, true);


        //anchored popup bigger contents autosize overflow
        ll = new OpenLayers.LonLat(5,15);
        popupClass = AutoSizeAnchored;
        popupContentHTML = '<div style="background-color:red;">Popup.Anchored<br>autosize<br>overflow<br>' + samplePopupContentsHTML + '</div>';
        addMarker(ll, popupClass, popupContentHTML, false, true);

        //anchored popup bigger contents autosize closebox overflow
        ll = new OpenLayers.LonLat(10,15);
        popupClass = AutoSizeAnchored;
        popupContentHTML = '<div style="background-color:red;">Popup.Anchored<br>autosize<br>overflow<br>closebox<br>' + samplePopupContentsHTML + '</div>';
        addMarker(ll, popupClass, popupContentHTML, true, true);


        //anchored popup wide short text contents autosize overflow
        ll = new OpenLayers.LonLat(20,15);
        popupClass = AutoSizeAnchored;
        popupContentHTML = '<div style="background-color:red;">Popup.Anchored<br>autosize<br>overflow<br>' + samplePopupContentsHTML_WideShort + '</div>';
        addMarker(ll, popupClass, popupContentHTML, false, true);

        //anchored popup wide short text contents autosize closebox overflow
        ll = new OpenLayers.LonLat(25,15);
        popupClass = AutoSizeAnchored;
        popupContentHTML = '<div style="background-color:red;">Popup.Anchored<br>autosize<br>overflow<br>closebox<br>' + samplePopupContentsHTML_WideShort + '</div>';
        addMarker(ll, popupClass, popupContentHTML, true, true);

        //anchored popup wide short fixed contents autosize overflow
        ll = new OpenLayers.LonLat(35,15);
        popupClass = AutoSizeAnchored;
        popupContentHTML = '<img src="img/wideshort.jpg"></img>';
        addMarker(ll, popupClass, popupContentHTML, false, true);

        //anchored popup wide short fixed contents autosize closebox overflow
        ll = new OpenLayers.LonLat(40,15);
        popupClass = AutoSizeAnchored;
        popupContentHTML = '<img src="img/wideshort.jpg"></img>';
        addMarker(ll, popupClass, popupContentHTML, true, true);


        //anchored popup thin long fixed contents autosize overflow
        ll = new OpenLayers.LonLat(50,15);
        popupClass = AutoSizeAnchored;
        popupContentHTML = '<img src="img/thinlong.jpg"></img>';
        addMarker(ll, popupClass, popupContentHTML, false, true);

        //anchored popup thin long fixed contents autosize closebox overflow
        ll = new OpenLayers.LonLat(55,15);
        popupClass = AutoSizeAnchored;
        popupContentHTML = '<img src="img/thinlong.jpg"></img>';
        addMarker(ll, popupClass, popupContentHTML, true, true);


        //anchored popup wide long fixed contents autosize overflow
        ll = new OpenLayers.LonLat(65,15);
        popupClass = AutoSizeAnchored;
        popupContentHTML = '<img src="img/widelong.jpg"></img>';
        addMarker(ll, popupClass, popupContentHTML, false, true);

        //anchored popup wide long fixed contents autosize closebox overflow
        ll = new OpenLayers.LonLat(70,15);
        popupClass = AutoSizeAnchored;
        popupContentHTML = '<img src="img/widelong.jpg"></img>';
        addMarker(ll, popupClass, popupContentHTML, true, true);

  //FRAMED

      //
      //FRAMED NO OVERFLOW
      //

          //anchored bubble popup small contents no autosize
        var ll = new OpenLayers.LonLat(-55,-15);
        popupClass = OpenLayers.Popup.FramedCloud;
        popupContentHTML = '<img src="img/small.jpg"></img>';
        addMarker(ll, popupClass, popupContentHTML, false);

          //anchored bubble popup small contents no autosize closebox
        var ll = new OpenLayers.LonLat(-50,-15);
        popupClass = OpenLayers.Popup.FramedCloud;
        popupContentHTML = '<img src="img/small.jpg"></img>';
        addMarker(ll, popupClass, popupContentHTML, true);


        //anchored bubble popup small contents autosize
        ll = new OpenLayers.LonLat(-40,-15);
        popupClass = AutoSizeFramedCloud;
        popupContentHTML = '<img src="img/small.jpg"></img>';
        addMarker(ll, popupClass, popupContentHTML, false);

        //anchored bubble popup small contents autosize closebox
        ll = new OpenLayers.LonLat(-35,-15);
        popupClass = AutoSizeFramedCloud;
        popupContentHTML = '<img src="img/small.jpg"></img>';
        addMarker(ll, popupClass, popupContentHTML, true);


        //anchored bubble popup small contents autosize minsize
        ll = new OpenLayers.LonLat(-25,-15);
        popupClass = AutoSizeFramedCloudMinSize;
        popupContentHTML = '<img src="img/small.jpg"></img>';
        addMarker(ll, popupClass, popupContentHTML, false);

        //anchored bubble popup small contents autosize minsize closebox
        ll = new OpenLayers.LonLat(-20,-15);
        popupClass = AutoSizeFramedCloudMinSize;
        popupContentHTML = '<img src="img/small.jpg"></img>';
        addMarker(ll, popupClass, popupContentHTML, true);


        //anchored bubble popup small contents autosize maxsize
        ll = new OpenLayers.LonLat(-10,-15);
        popupClass = AutoSizeFramedCloudMaxSize;
        popupContentHTML = '<img src="img/small.jpg"></img>';
        addMarker(ll, popupClass, popupContentHTML, false);

        //anchored bubble popup small contents autosize maxsize closebox
        ll = new OpenLayers.LonLat(-5,-15);
        popupClass = AutoSizeFramedCloudMaxSize;
        popupContentHTML = '<img src="img/small.jpg"></img>';
        addMarker(ll, popupClass, popupContentHTML, true);


        //anchored bubble popup bigger contents autosize closebox
        ll = new OpenLayers.LonLat(5,-15);
        popupClass = AutoSizeFramedCloud;
        popupContentHTML = '<div style="background-color:red;">Popup.FramedCloud<br>autosize<br>' + samplePopupContentsHTML + '</div>';
        addMarker(ll, popupClass, popupContentHTML, false);

        //anchored bubble popup bigger contents autosize closebox
        ll = new OpenLayers.LonLat(10,-15);
        popupClass = AutoSizeFramedCloud;
        popupContentHTML = '<div style="background-color:red;">Popup.FramedCloud<br>autosize<br>closebox<br>' + samplePopupContentsHTML + '</div>';
        addMarker(ll, popupClass, popupContentHTML, true);


        //anchored bubble popup wide short text contents autosize
        ll = new OpenLayers.LonLat(20,-15);
        popupClass = AutoSizeFramedCloud;
        popupContentHTML = '<div style="background-color:red;">Popup.FramedCloud<br>autosize - wide short text<br>' + samplePopupContentsHTML_WideShort + '</div>';
        addMarker(ll, popupClass, popupContentHTML);

        //anchored bubble popup wide short text contents autosize closebox
        ll = new OpenLayers.LonLat(25,-15);
        popupClass = AutoSizeFramedCloud;
        popupContentHTML = '<div style="background-color:red;">Popup.FramedCloud<br>autosize - wide short text<br>closebox<br>' + samplePopupContentsHTML_WideShort + '</div>';
        addMarker(ll, popupClass, popupContentHTML, true);


        //anchored bubble popup wide short fixed contents autosize
        ll = new OpenLayers.LonLat(35,-15);
        popupClass = AutoSizeFramedCloud;
        popupContentHTML = '<img src="img/wideshort.jpg"></img>';
        addMarker(ll, popupClass, popupContentHTML);

        //anchored bubble popup wide short fixed contents autosize closebox
        ll = new OpenLayers.LonLat(40,-15);
        popupClass = AutoSizeFramedCloud;
        popupContentHTML = '<img src="img/wideshort.jpg"></img>';
        addMarker(ll, popupClass, popupContentHTML, true);


        //anchored bubble popup thin long fixed contents autosize
        ll = new OpenLayers.LonLat(50,-15);
        popupClass = AutoSizeFramedCloud;
        popupContentHTML = '<img src="img/thinlong.jpg"></img>';
        addMarker(ll, popupClass, popupContentHTML);

        //anchored bubble popup thin long fixed contents autosize closebox
        ll = new OpenLayers.LonLat(55,-15);
        popupClass = AutoSizeFramedCloud;
        popupContentHTML = '<img src="img/thinlong.jpg"></img>';
        addMarker(ll, popupClass, popupContentHTML, true);


        //anchored bubble popup wide long fixed contents autosize
        ll = new OpenLayers.LonLat(65,-15);
        popupClass = AutoSizeFramedCloud;
        popupContentHTML = '<img src="img/widelong.jpg"></img>';
        addMarker(ll, popupClass, popupContentHTML);

        //anchored bubble popup wide long fixed contents autosize closebox
        ll = new OpenLayers.LonLat(70,-15);
        popupClass = AutoSizeFramedCloud;
        popupContentHTML = '<img src="img/widelong.jpg"></img>';
        addMarker(ll, popupClass, popupContentHTML, true);

      //
      //FRAMED OVERFLOW
      //

          //anchored bubble popup small contents no autosize
        var ll = new OpenLayers.LonLat(-55,-20);
        popupClass = OpenLayers.Popup.FramedCloud;
        popupContentHTML = '<img src="img/small.jpg"></img>';
        addMarker(ll, popupClass, popupContentHTML, false, true);

          //anchored bubble popup small contents no autosize closebox
        var ll = new OpenLayers.LonLat(-50,-20);
        popupClass = OpenLayers.Popup.FramedCloud;
        popupContentHTML = '<img src="img/small.jpg"></img>';
        addMarker(ll, popupClass, popupContentHTML, true, true);


        //anchored bubble popup small contents autosize
        ll = new OpenLayers.LonLat(-40,-20);
        popupClass = AutoSizeFramedCloud;
        popupContentHTML = '<img src="img/small.jpg"></img>';
        addMarker(ll, popupClass, popupContentHTML, false, true);

        //anchored bubble popup small contents autosize closebox
        ll = new OpenLayers.LonLat(-35,-20);
        popupClass = AutoSizeFramedCloud;
        popupContentHTML = '<img src="img/small.jpg"></img>';
        addMarker(ll, popupClass, popupContentHTML, true, true);



        //anchored bubble popup thin long fixed contents autosize closebox overflow
        ll = new OpenLayers.LonLat(55,-20);
        popupClass = AutoSizeFramedCloud;
        popupContentHTML = '<img src="img/thinlong.jpg"></img>';
        addMarker(ll, popupClass, popupContentHTML, true, true);


        //anchored bubble popup wide long fixed contents autosize overflow
        ll = new OpenLayers.LonLat(65,-20);
        popupClass = AutoSizeFramedCloud;
        popupContentHTML = '<img src="img/widelong.jpg"></img>';
        addMarker(ll, popupClass, popupContentHTML, false, true);

        //anchored bubble popup wide long fixed contents autosize closebox overflow
        ll = new OpenLayers.LonLat(70,-20);
        popupClass = AutoSizeFramedCloud;
        popupContentHTML = '<img src="img/widelong.jpg"></img>';
        addMarker(ll, popupClass, popupContentHTML, true, true);


    }

    /**
     * Function: addMarker
     * Add a new marker to the markers layer given the following lonlat, 
     *     popupClass, and popup contents HTML. Also allow specifying 
     *     whether or not to give the popup a close box.
     * 
     * Parameters:
     * ll - {<OpenLayers.LonLat>} Where to place the marker
     * popupClass - {<OpenLayers.Class>} Which class of popup to bring up 
     *     when the marker is clicked.
     * popupContentHTML - {String} What to put in the popup
     * closeBox - {Boolean} Should popup have a close box?
     * overflow - {Boolean} Let the popup overflow scrollbars?
     */
    function addMarker(ll, popupClass, popupContentHTML, closeBox, overflow) {

        var feature = new OpenLayers.Feature(markers, ll); 
        feature.closeBox = closeBox;
        feature.popupClass = popupClass;
        feature.data.popupContentHTML = popupContentHTML;
        feature.data.overflow = (overflow) ? "auto" : "hidden";

        var marker = feature.createMarker();

        var markerClick = function (evt) {
            if (this.popup == null) {
                this.popup = this.createPopup(this.closeBox);
                map.addPopup(this.popup);
                this.popup.show();
            } else {
                this.popup.toggle();
            }
            currentPopup = this.popup;
            OpenLayers.Event.stop(evt);
        };
        marker.events.register("mousedown", feature, markerClick);

        markers.addMarker(marker);
    }

  </script>
  </head>
  <body onload="init()">
  <h1 id="title">Popup Matrix</h1>

<div id="tags">
popup, popups
</div>
  <p id="shortdesc">
      All kinds of different popup configurations.
  </p>

  <div id="map" class="smallmap"></div>

    <!-- preloading these images so the autosize will work correctly -->
    <img src="img/wideshort.jpg" style="position:absolute; top:-5000px; left: -5000px"></img>
    <img src="img/widelong.jpg" style="position:absolute; top:-5000px; left: -5000px"></img>
    <img src="img/thinlong.jpg" style="position:absolute; top:-5000px; left: -5000px"></img>


  <br>      


</div>
</body>
</html>
share|improve this answer
2  
While your contribution to an old question is indeed note worthy, it might be helpful to have some more information which explains this code. –  Devdatta Tengshe Dec 11 '13 at 11:47

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.