CODEWITHSUNDEEP
javascriptopenlayersopenstreetmap
tsilb
tsilb

Reputation: 8035

OpenLayers: Null or undefined error in AddPopup

I get this error when I call map.AddPopup() in OpenLayers:

Unable to get value of the property 'Left'; object is null or undefined

http://www.openlayers.org/api/OpenLayers.js

The same error occurs in both Chrome and IE. The map works fine when I comment out that line, and the markers work fine as well. Later, icon0 and lonLat0 will be several items in a loop, but I'll handle that. The end result should be a text box of some kind that would display on the marker.

The marker at lonLat0 displays, so it doesn't seem like a problem with the lonLat object.

Yes, I will end up displaying many markers with text on them all at once. I know, it seems silly, but that's the requirement.

Why does addPopup give me this error?

<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 lonLat = new OpenLayers.LonLat(-104.73,38.92).transform(new OpenLayers.Projection('EPSG:4326'), map.getProjectionObject() );
  var markers = new OpenLayers.Layer.Markers( 'Markers' );
  map.addLayer(markers);
  markers.addMarker(new OpenLayers.Marker(lonLat));     
  function onPopupClose(evt) {selectControl.unselect(this.feature); }
  var icon0 = new OpenLayers.Icon("pinMS.png", new OpenLayers.Size(32,32), new OpenLayers.Pixel(-16,-32));  
  var lonLat0 = new OpenLayers.LonLat(-104.73,38.92).transform(new OpenLayers.Projection('EPSG:4326'), map.getProjectionObject());  
  markers.addMarker(new OpenLayers.Marker(lonLat0, icon0.clone()));  

  // Error throws here
  map.addPopup(new OpenLayers.Popup.FramedCloud("featurePopup", lonLat0, new OpenLayers.Size(10, 10), "<h2>Title</h2>description", null, true, onPopupClose)); 
  map.setCenter (lonLat, 1);    
</script></body></html>

Upvotes: 0

Views: 5074

Answers (1)

capdragon
capdragon

Reputation: 14899

I was able to reproduce your error and fix it. That demo code is really bad. I would start with a working example and modify it to fit your needs.

For example you need to call your javascript on <body onload="init()"> or else i'm surprised it even renders for you.

Anyway, All i did was replaced the map = new OpenLayers.Map('mapdiv'); for this:

map = new OpenLayers.Map({
    div: "mapdiv",
    center: new OpenLayers.LonLat(0, 0)
});

enter image description here

But here's the complete code incase you want to improve the structure of your file.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>Open Popup on Layer.Vector</title> 
    <link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" type="text/css">
     <link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css" type="text/css">
    <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
    <script type="text/javascript">

        function init() {
            map = new OpenLayers.Map({
                div: "mapdiv",
                center: new OpenLayers.LonLat(0, 0)
            });
            map.addLayer(new OpenLayers.Layer.OSM());
            var lonLat = new OpenLayers.LonLat(-104.73, 38.92).transform(new OpenLayers.Projection('EPSG:4326'), map.getProjectionObject());
            var markers = new OpenLayers.Layer.Markers('Markers');
            map.addLayer(markers);
            markers.addMarker(new OpenLayers.Marker(lonLat));
            function onPopupClose(evt) { selectControl.unselect(this.feature); }
            var icon0 = new OpenLayers.Icon("pinMS.png", new OpenLayers.Size(32, 32), new OpenLayers.Pixel(-16, -32));
            var lonLat0 = new OpenLayers.LonLat(-104.73, 38.92).transform(new OpenLayers.Projection('EPSG:4326'), map.getProjectionObject());
            markers.addMarker(new OpenLayers.Marker(lonLat0, icon0.clone()));

            // Error throws here
            map.addPopup(new OpenLayers.Popup.FramedCloud("featurePopup", lonLat0, new OpenLayers.Size(10, 10), "<h2>Title</h2>description", null, true, onPopupClose));
            map.setCenter(lonLat, 1); 

        }

    </script>
  </head>
  <body onload="init()">
    <div id="mapdiv" class="smallmap"></div>
  </body>
</html>

Upvotes: 2

Related Questions