[GIS] Openlayers display a markers popup using a button out of the map

javascriptopenlayers-2openstreetmap

I have the following code which addes 3 markers to the map along with there popup boxes what I want to do is have a list of location at bottom of page and using the id of the marker when click a place in the list it just make that places popup appear on the map.

Code:

<html>

    <head>

        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

        <title>Open Street Map</title>

        <style type="text/css">

            body { font: normal 10pt Helvetica, Arial; }

            #map { width: 100%; height: 100%; border: 0px; padding: 0px; }

        </style>

              <script src="lib/OpenLayers.js" type="text/javascript"></script>

        <script type="text/javascript">

            //Sample code by August Li

            var iconSize = new OpenLayers.Size(21, 25);

            var iconOffset = new OpenLayers.Pixel(-(iconSize.w / 2), -iconSize.h);

            var icon = new OpenLayers.Icon("img/fourmarker.png",

                           iconSize, iconOffset);

            var zoom, center, currentPopup, map, lyrMarkers;

            var popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {

                "autoSize": true,

                "minSize": new OpenLayers.Size(300, 50),

                "maxSize": new OpenLayers.Size(500, 300),

                "keepInMap": true

            });

            var bounds = new OpenLayers.Bounds();

            function addMarker(id, lng, lat, info) {

                var pt = new OpenLayers.LonLat(lng, lat)

                                       .transform(new OpenLayers.Projection("EPSG:4326"),

                                       map.getProjectionObject());

                bounds.extend(pt);

                var feature = new OpenLayers.Feature(lyrMarkers, pt);

                feature.closeBox = true;

                feature.popupClass = popupClass;

                feature.data.popupContentHTML = info + id;



                feature.data.overflow = "auto";

                var marker = new OpenLayers.Marker(pt, icon.clone());









                var markerClick = function(evt) {

                    if (currentPopup != null && currentPopup.visible()) {

                        currentPopup.hide();

                    }

                    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);

                lyrMarkers.addMarker(marker);

            }







            function initMap() {

                var options = {

                    projection: new OpenLayers.Projection("EPSG:900913"),

                    displayProjection: new OpenLayers.Projection("EPSG:4326"),

                    units: "m",

                    numZoomLevels: 19,

                    maxResolution: 156543.0339,

                    maxExtent: new OpenLayers.Bounds(-0.13011, -0.13011, 51.51039, 51.51039)

                };

                map = new OpenLayers.Map("map", options);

                map.addControl(new OpenLayers.Control.DragPan());

                var lyrOsm = new OpenLayers.Layer.OSM();

                map.addLayer(lyrOsm);



                lyrMarkers = new OpenLayers.Layer.Markers("Markers");

                map.addLayer(lyrMarkers);



                 //add marker on given coordinates





                addMarker('</br>1',-0.12519,51.51112 , '<b>Tescos</b><br/>Covent garden');

                addMarker('2',-0.13264,51.50918 , '<b>Spar</b><br/>Leicester Square');

                                                                addMarker('3',-0.12498,51.50807 , '<b>M & S</b><br/>Embankment');

                center = bounds.getCenterLonLat();

                map.setCenter(center, map.getZoomForExtent(bounds) - 1);

                zoom = map.getZoom();

            }

        </script>

    </head>

    <body onload="initMap()" style="margin:0; border:0; padding:0; width:1000px; height:500px;">

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


  </body>

</html>

The above code adds three markers to the page and when each is clicked displays there popup.

What I want to do is add a list of locations along with a button for each and when the user clicks the location button that locations popup box appears.

These button will sit of the map with in there own section of the site page.

Can anyone help with how I can adapt my code.

UPDATES

Added:

  function clickmarker()                                              
    var lon = -0.12519;
    var lat = 51.51112;

   popup = new OpenLayers.Popup("1",
     new OpenLayers.LonLat(lon,lat).transform(new OpenLayers.Projection("EPSG:4326"),

                                           map.getProjectionObject()),

                       new OpenLayers.Size(200,100),

                       "example popup",

                       true);
      map.addPopup(popup);
     }

Best Answer

first of all, you have to add all your popup to map so you have to get some list when you call map.popups.

if you get an array with your three point popups, add this function to your button click event.

function showPopups(){

    var pops = map.popups;
    for(var a = 0; a < pops.length; a++){
       map.popups[a].show();
    }

};

i hope it helps you...

Related Question