[OpenLayers-Dev] adding markers with popups as features.

Eric Lemoine eric.c2c at gmail.com
Thu Aug 21 00:56:01 EDT 2008

Hi. Yes, the new way is to use Layer.Vector for markers. To render
points as markers the externalSymbol style property must be passed to
the layer, see the examples to understand how to do it. To select
features and display a popup you can use the SelectFeature control and
register a featureselected event listener to the layer events. This is
a rough description, look at the API doc and the examples, and come
back with specific questions if needed. Hope this helps. Cheers. Eric

2008/8/20, Fred Arters <fred at monkeytroy.com>:
> I need to be able to dynamically create and add markers to my map,
> each with it's own pop up.   Had some trouble getting it to work.  I
> could create markers and remove them and I could handle an event for a
> marker but the examples really directly associated contents of a popup
> with one method that was tied to one marker.   So adding several
> markers with their own pop up details dynamically from a function was
> not as easy or as obvious as I thought.
> The examples were not really helping me with what I needed.   There
> are examples to create markers and examples to manually create markers
> with popups but with hard-coded content in the pop ups.   Some of the
> examples I found based on xml files didn't really apply either, though
> in the future they may.
> I came up with this and it works.. so here it is for anyone else
> needing the same kind of thing.
> function addMarker(pLon, pLat, pPopUpText) {
>        // setup the icon
>         var size = new OpenLayers.Size(15, 22);
>         var offset = new OpenLayers.Pixel(-(size.w / 2), -size.h);
>         var theIcon = theIcon = new OpenLayers.Icon('img/marker.png',
> size, offset);
>        // set the popup size..  static for now.
>         var theSize = new OpenLayers.Size(350, 200);
>         // create a feature.
>         var feature = new OpenLayers.Feature( featureLayer, new
> OpenLayers.LonLat(pLon, pLat),
>             {icon: theIcon, popupSize: theSize, popupContentHTML:
> pPopUpText});
>         // create the marker and popup
>         feature.createMarker();
>         feature.createPopup(true);
>         // hide the popup to start.
>         feature.popup.hide();
>         // add the popup and marker to the map.
>         theMap.addPopup(feature.popup);
>         markerLayer.addMarker(feature.marker);
>         // toggle the popup.
>         feature.marker.events.register("mousedown", feature, function
> (evt) {
>             feature.popup.toggle();
>             OpenLayers.Event.stop(evt);
>         });
>   }
> When you want to remove a marker you have to remove the marker from
> the marker layer, destroy the pop up and then the feature.
> Thoughts on this?
> Works really well for me but is there a more appropriate way to use
> the Feature for creating markers and associated popups?   Looks like
> Vector will become the way to do it in the future but right now the
> createMarker and createPopup methods for vector are just stubbed out
> functions that return null.
> -Fred

More information about the Dev mailing list