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.

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);
     }
share|improve this question
add comment

1 Answer 1

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

share|improve this answer
    
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 '12 at 10:39
add comment

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.