5

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);
     }
Improve this question

1 Answer 1

Reset to default
2

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...

Improve this answer
1
  • I have managed to get it to work for one marker by adding the code shown at bottom of question section called UPDATES. What I want to do is get it to loop through a list of id's, lon, lat and match the right popup to the right button my match the button id with the popup id. Hope this make sense
    – zara
    Oct 3, 2012 at 10:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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