OpenLayers add Marker and Popup

javascript html popup openlayers markers

12,779

According OpenLayers documentation, you are missing in a popup constructor the anchor parameter between "Text" and true. Probably this is the source of your problem. This parameter has null value in the example for a popup:
```
var popup = new OpenLayers.Popup.FramedCloud("Popup", 
    myLocation.getBounds().getCenterLonLat(), null,
    'We ' +
    'could be here. Or elsewhere.', 
    null,
    true // true if we want a close (X) button, false otherwise
);
```
In Your case you can to use variable icon instead of null value.
In function map.addPopup(popup) you should have second parameter exclusive as well. See OpenLayers documentation dev.openlayers.org/docs/files/OpenLayers/Map-js.html#OpenLayers.Map.addPopup or a definition of this method here. I think it is a good practice to use all defined parameters, because it often creates problems.

Hopefully it will work, after adding all parameters. Your code for a working popup:

var popup = new OpenLayers.Popup.FramedCloud("Popup", query, null, "Text", null, true);
map.addPopup(popup, false);

12,779

Author by

Admin

Updated on June 14, 2022

Comments

Admin almost 2 years

I'm having trouble with OpenLayers. My working code is:

<html><body>
  <div id="mapdiv"></div>
  <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
  <script>
    map = new OpenLayers.Map("mapdiv");
    map.addLayer(new OpenLayers.Layer.OSM());

    //var results = new OpenLayers.Layer.Text("My Points", { location:"./checkIns_0_view.txt", projection: map.displayProjection});
    //map.addLayer(results);

    var query = new OpenLayers.LonLat(-122.2928337167, 37.5549570333).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
    var markers = new OpenLayers.Layer.Markers("Markers");
    map.addLayer(markers);
    var size = new OpenLayers.Size(21,25);
    var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
    var icon = new OpenLayers.Icon('http://openlayers.org/dev/img/marker-blue.png', size, offset);
    marker = new OpenLayers.Marker(query, icon);
    markers.addMarker(marker);

    var zoom=16;
    map.setCenter (query, zoom);
  </script>
</body></html>

Now I want to add a Popup with some informations. I tried using several examples, like http://openlayers.org/dev/examples/osm-marker-popup.html. I want to add something like this:

    var popup = new OpenLayers.Popup.FramedCloud("Popup", query, null, "Text", true);
    map.addPopup(popup);

The first line can be compiled, but when I add the second line, the browser doesn't show my map. I think it might have to do with the query-lonLat, but I doesn't have the necessary OpenLayers-skills to find out.

I would appreciate an answer very much.

Greetings

Admin almost 11 years

thank you very much marti jrk for your response. understood, what you mentioned, but it still doesn't work using the additional parameter in 1. and adding false in 2.
Admin almost 11 years

is it relevant at what position in the code i add these two lines?
martin jrk almost 11 years

@user2513315 yes, it is relevant. You should add popup ( map.addPopup(popup, true); ) after you map.setCenter(); So if you place both of them on the end, it should work.
Admin almost 11 years

thank you very much again. that was my problem. always tried to insert the lines at different positions, but I never dared to insert it at the end, because (why ever) i thought it might be relevant to center the map in the end. thanks!!!