OpenStreetMap Forum

The Free Wiki World Map

You are not logged in.

#1 2009-11-25 12:09:10

hlammer
Member
Registered: 2009-11-24
Posts: 13

Marker and Popup

Hello everyone,

after playing with OSM some while now i have a (for me) huge problem.
i add several markers to a map and add those markers popups.

my problem is now, that all popups appear at the same time when i click on one marker. but only the attached popup shoudl be shown.

my code:

function setMarker(lon, lat, count){

    var icon = new OpenLayers.Icon("/src/includes/lib/map/export_badge.php?number="+count);
    var lonLatMarker = new OpenLayers.LonLat(lon, lat).transform(map.displayProjection,  map.projection);

    markers.addMarker(new OpenLayers.Marker(lonLatMarker, icon));
    markers.addMarker(new OpenLayers.Marker(lonLatMarker, icon.clone()));

    var popupId = "popup_"+Math.random(100);
    var popup = new OpenLayers.Popup.AnchoredBubble(popupId, lonLatMarker,
                                 new OpenLayers.Size(200,20),
                                 "Hello World ... "+popupId,
                                 null, true,closePopUp);
    //popup.closeOnMove = true;
    map.addPopup(popup);
    popup.hide();
    map.events.register('click', lonLatMarker, function(){popup.show();});
}

function closePopUp(){
    this.hide();
}

Offline

#2 2009-11-25 13:57:57

hlammer
Member
Registered: 2009-11-24
Posts: 13

Re: Marker and Popup

resolved it with this function .... the closePopUp function isn't necesary anymore

function setMarker(lon, lat, count){

    var lonLatMarker = new OpenLayers.LonLat(lon, lat).transform(map.displayProjection,  map.projection);;
    var feature = new OpenLayers.Feature(markers, lonLatMarker);
    feature.closeBox = true;
    feature.popupClass = OpenLayers.Class(OpenLayers.Popup.AnchoredBubble, {minSize: new OpenLayers.Size(300, 180) } );
    feature.data.popupContentHTML = 'Hello World';
    feature.data.overflow = "hidden";

    var icon = new OpenLayers.Icon("/src/includes/lib/map/export_badge.php?number="+count);
    var marker = new OpenLayers.Marker(lonLatMarker, icon);
    marker.feature = feature;

    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();
        }
        OpenLayers.Event.stop(evt);
    };
    marker.events.register("mousedown", feature, markerClick);

    markers.addMarker(marker);
}

Offline

#3 2010-11-26 01:30:42

shialen_tj
Member
Registered: 2010-11-25
Posts: 2

Re: Marker and Popup

Thank you for sharing your code. 5 stars *****

This solved my problem smile

Offline

#4 2019-01-03 14:44:41

rvcv99
Member
Registered: 2019-01-03
Posts: 1

Re: Marker and Popup

The function provided above -- function setMarker(lon, lat, count) -- is very similar to code for Google Maps API. I've worked with markers/popups with Google Maps for quite a while. But I can't figure out how to make markers and popups work with OSM.

In the function above, the last line is "markers.addMarker(marker)". The variable "markers" is not declared within this function. Could you share what the variable "markers" should be? I tried this but could not get the "markerClick" function to fire:

if (markersLayer == null) {
		markersLayer = new OpenLayers.Layer.Markers("Markers");
		map.addLayer(markersLayer);
}

Offline

Board footer

Powered by FluxBB