NOTICE: help.openstreetmap.org is no longer in use from 1st March 2024. Please use the OpenStreetMap Community Forum

I have the following code which addes 3 markers to the map a long 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 on the list just make that places popup appear on the map.

<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">
            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 ;
                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('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>

<a href="popup()"id="1">1</a> <br/>
<a href="popup()">1</a>
    </body>
</html>

asked 01 Oct '12, 15:35

zaratj's gravatar image

zaratj
9112
accept rate: 0%

edited 01 Oct '12, 16:06

SomeoneElse's gravatar image

SomeoneElse ♦
36.9k71370866

2

That's really an OpenLayers question rather than an OSM one.

There are a bunch of OpenLayers mailing lists described here, and other useful resources, including an OpenLayers IRC channel, here.

(01 Oct '12, 16:05) SomeoneElse ♦
Be the first one to answer this question!
toggle preview

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here

By RSS:

Answers

Answers and Comments

Markdown Basics

  • *italic* or _italic_
  • **bold** or __bold__
  • link:[text](http://url.com/ "title")
  • image?![alt text](/path/img.jpg "title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported

Question tags:

×362
×122
×60

question asked: 01 Oct '12, 15:35

question was seen: 15,605 times

last updated: 23 Mar '13, 10:46

NOTICE: help.openstreetmap.org is no longer in use from 1st March 2024. Please use the OpenStreetMap Community Forum