2

I use google chromes inspect element for debugging.

I have a map displayed on my page with 1 base layer (osm) and 2 overlays (wards, points) and a highlighter control. The map displays and works fine.

The problem is that in the inspector, the map object is undefined and so are any other objects defined in the javascript but they are working. I have also checked this in firebug, the result is same.

To elaborate this, I have a div ided "map1", and it holds map object named "map", the map has baselayer named "osm" and overlays named "wards" and "points". As shown in picture, map1 is recognized as HTML div element but map is undefined whereas it should have recognized it as Openlayers.Map object. enter image description here

here is the code, i hope you don't need the files, any valid osm file should work. (it is not a problem with openlayers, but with browsers)

<html>
<head>
    <title></title>
    <link rel="stylesheet" href="http://openlayers.org/api/2.11/theme/default/style.css" type="text/css">
    <!--link rel="stylesheet" href="../../../openlayers-2.12/theme/default/style.css" type="text/css"-->
    <script src="http://openlayers.org/api/2.11/OpenLayers.js" type="text/javascript"></script>
    <!--script src="../../../openlayers-2.12/lib/OpenLayers.js"></script-->
    <!--script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2&amp;mkt=en-us"></script--> <!--This is required wrapper for the bing images-->
    <!--script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script-->
    <!--script src="../OpenStreetMap.js"></script-->
    <script>
    function init(){
        //alert("Start here");
        //OpenLayers.ProxyHost= "/cgi-bin/proxy.cgi?url=";
        //map options
        var centerX = 85.381540;//491213.721224323//-123.1684986291807;//9497800;
        var centerY = 27.710237;//5456645.24607268//49.245339757767844;//3212000;
        var center = new OpenLayers.LonLat(centerX, centerY);
        var range = 0.0025;//10000000//.5;//10000;
        var map_bound = [centerX-range,centerY-range,centerX+range,centerY+range];
        var extent = new OpenLayers.Bounds(map_bound[0],map_bound[1],map_bound[2],map_bound[3]);
        var zoom = 13;
        var zoom_data_limit = 18; // vector data will load only in this level or above
    
    //other options
    var proj4326 = new OpenLayers.Projection("EPSG:4326");
    var proj900913 = new OpenLayers.Projection("EPSG:900913");
    var popup;
    //map configuration
    var map = new OpenLayers.Map('map1',{
        //allOverlays:true,
        maxExtent:extent,
        controls:[new OpenLayers.Control.PanZoomBar(),
            new OpenLayers.Control.MousePosition({
                suffix:'',
                emptyString:'',
                displayProjection:new OpenLayers.Projection("EPSG:4015")
            }),
            //new OpenLayers.Control.ScaleLine(),
            //new OpenLayers.Control.Scale(),
            new OpenLayers.Control.Navigation(),
            new OpenLayers.Control.LayerSwitcher(),
            new OpenLayers.Control.Attribution()
        ],
        projection:proj4326,
        displayProjection:proj900913
    });
    bing = new OpenLayers.Layer.Bing({name: "Bing Aerial Layer",type: "Aerial",key: "AqTGBsziZHIJYYxgivLBf0hVdrAk9mWO5cQcb8Yux8sW5M8c8opEC2lZqKR1ZZXf"});
    osm = new OpenLayers.Layer.OSM("OSM");
    map.addLayer(osm);
    map.addLayer(bing);
    map.setCenter(center.transform(proj4326,proj900913));
    map.zoomTo(zoom);
    //alert("testing here");
            
    var wards = new OpenLayers.Layer.Vector("Wards poly", {
        //strategies: [new OpenLayers.Strategy.BBOX({ratio:1})],
        strategies: [new OpenLayers.Strategy.Fixed()],    
        projection: new OpenLayers.Projection('EPSG:4326'),
        protocol: new OpenLayers.Protocol.HTTP({
            url: "wards_osm_poly.osm",   //<-- relative or absolute URL to your .osm file
            format: new OpenLayers.Format.OSM()
        })
    });
    
    var point = new OpenLayers.Layer.Vector("Wards point", {
        //strategies: [new OpenLayers.Strategy.BBOX({ratio:1})],
        strategies: [new OpenLayers.Strategy.Fixed()],    
        projection: new OpenLayers.Projection('EPSG:4326'),
        protocol: new OpenLayers.Protocol.HTTP({
            url: "wards_osm_point.osm",   //<-- relative or absolute URL to your .osm file
            format: new OpenLayers.Format.OSM()
        })
    });
    map.addLayer(point);
    map.addLayer(wards);
    alert("Finished Loading");
    var highlighter = new OpenLayers.Control.SelectFeature(wards,{
        hover:true,
        highlightOnly:true,
        //eventListeners: {featurehighlighted: onHover}
    });
    map.addControl(highlighter);
    highlighter.activate();
}
</script>
Improve this question
2
  • Could you post the code (even simplified)? Typing "wards", "points", etc., in the console would only work if there was a JS variable with such name, it would not work if those were names of the layers.
    – kryger
    Mar 29, 2013 at 21:40
  • those variable exist, and the spelling is also not mistaken. but its better to have another eye through the code.
    – neogeomat
    Mar 30, 2013 at 2:19

1 Answer 1

Reset to default
1

The cause is that you have declared/defined the map, popup, centerX, etc variables inside the init function, therefore they are local to that function and not available outside the function itself.

When you type map in the javascript console you are asking the javascript interpreter to print a 'global' variable, which for the reasons stated above, does not exist.

A solution is to move the declaration outside the init function, like this:

<script>
var map, wards, points;

function init(){
    //alert("Start here");
    // redacted for brevity[...]
    //map configuration
    map = new OpenLayers.Map('map1',{
    //allOverlays:true,
    maxExtent:extent,
    controls:[new OpenLayers.Control.PanZoomBar(),
        new OpenLayers.Control.MousePosition({
            suffix:'',
            emptyString:'',
            displayProjection:new OpenLayers.Projection("EPSG:4015")
        }),
        //new OpenLayers.Control.ScaleLine(),
        //new OpenLayers.Control.Scale(),
        new OpenLayers.Control.Navigation(),
        new OpenLayers.Control.LayerSwitcher(),
        new OpenLayers.Control.Attribution()
        ],
        projection:proj4326,
        displayProjection:proj900913
    });
    // continue with your code

Note: I have removed the var keyword from the map definition (left hand of the constructor assignment instruction). If you do not remove it then javascript will happily declare a new locally scoped variable possibily causing even more confusion in the unsuspecting javascript user.

Improve this answer
5
  • + I'll add that rather than changing code structure to make debugging easier (by making wards, points global/public), I'd keep them private and access them via map.layers, map.getLayersByName(), etc.
    – kryger
    Mar 30, 2013 at 12:53
  • @kryger is right: quite simply I did not bring out the problem with dumping variables in the global namespace because it seemed an advanced concept for this kind of question. However if the user really wanted the variables for quicker access I suggest he/she uses a wrapper object like the following: var MyApp=MyApp||{}; [...] MyApp.map
    – unicoletti
    Mar 30, 2013 at 14:09
  • Could you point me to some links on the wrapper...
    – neogeomat
    Mar 30, 2013 at 14:19
  • @byom books.google.it/…
    – unicoletti
    Mar 30, 2013 at 16:44
  • @unicoletti Thannk you very much
    – neogeomat
    Mar 31, 2013 at 4:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.