[OpenLayers-Users] Drawn objects disappear on TMS layered map

Fri Apr 29 19:52:48 EDT 2011

Hi,

I am very new to Openlayers and I am trying out TMS layer for tiled images generated using gdal2tiles. Basic things like panning/zooming works fine and now I am trying to add editingToolbar and draw some polygons on the map. As soon as I draw the polygon or place the point on the map, the polygon/point disappears. Am I missing anything? How do I debug this?

Here is my code (I am trying it on the html generated by gdal2tiles).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml>"
          <head>
            <title>sjc14-2.JPG</title>
            <meta http-equiv='imagetoolbar' content='no'/>
            <style type="text/css"> v\:* {behavior:url(#default#VML);}
                html, body { overflow: hidden; padding: 0; height: 100%; width: 100%; font-family: 'Lucida Grande',Geneva,Arial,Verdana,sans-serif; }
                body { margin: 10px; background: #fff; }
                h1 { margin: 0; padding: 6px; border:0; font-size: 20pt; }
                #header { height: 43px; padding: 0; background-color: #eee; border: 1px solid #888; }
                #subheader { height: 12px; text-align: right; font-size: 10px; color: #555;}
                #map { height: 95%; border: 1px solid #888; }
            </style>
            <script src="http://www.openlayers.org/api/2.7/OpenLayers.js" type="text/javascript"></script>
<script type="text/javascript">
                var map;
                var mapBounds = new OpenLayers.Bounds( 0.0, -612.0, 857.0, 0.0);
                var mapMinZoom = 0;
                var mapMaxZoom = 2;

                // avoid pink tiles
                OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
                OpenLayers.Util.onImageLoadErrorColor = "transparent";

                function init(){
                var options = {
                    controls: [],
                    maxExtent: new OpenLayers.Bounds(  0.0, -612.0, 857.0, 0.0 ),
                    maxResolution: 4.000000,
                    numZoomLevels: 3
                    };
                map = new OpenLayers.Map('map', options);

                var layer = new OpenLayers.Layer.TMS( "TMS Layer","",
                    {  url: '', serviceVersion: '.', layername: '.', alpha: true,
                        type: 'png', getURL: overlay_getTileURL 
                    });
                map.addLayer(layer);
                map.zoomToExtent( mapBounds );    

                map.addControl(new OpenLayers.Control.PanZoomBar());
                map.addControl(new OpenLayers.Control.MousePosition());
                map.addControl(new OpenLayers.Control.MouseDefaults());
                map.addControl(new OpenLayers.Control.KeyboardDefaults());

            var vlayer = new OpenLayers.Layer.Vector( "Editable" );

            map.addControl(new OpenLayers.Control.EditingToolbar(vlayer));

            }

            function overlay_getTileURL(bounds) {
                var res = this.map.getResolution();
                var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
                var y = Math.round((bounds.bottom - this.maxExtent.bottom) / (res * this.tileSize.h));
                var z = this.map.getZoom();
                if (x >= 0 && y >= 0) {
                    return this.url + z + "/" + x + "/" + y + "." + this.type;                
                } else {
                    return "http://www.maptiler.org/img/none.png";
                }
            }

           function getWindowHeight() {
                if (self.innerHeight) return self.innerHeight;
                if (document.documentElement && document.documentElement.clientHeight)
                    return document.documentElement.clientHeight;
                if (document.body) return document.body.clientHeight;
                    return 0;
            }

            function getWindowWidth() {
                if (self.innerWidth) return self.innerWidth;
                if (document.documentElement && document.documentElement.clientWidth)
                    return document.documentElement.clientWidth;
                if (document.body) return document.body.clientWidth;
                    return 0;
            }

            function resize() {  
                var map = document.getElementById("map");  
                var header = document.getElementById("header");  
                var subheader = document.getElementById("subheader");  
                map.style.height = (getWindowHeight()-80) + "px";
                map.style.width = (getWindowWidth()-20) + "px";
                header.style.width = (getWindowWidth()-20) + "px";
                subheader.style.width = (getWindowWidth()-20) + "px";
                if (map.updateSize) { map.updateSize(); };
            } 

            onresize=function(){ resize(); };

</script>
          </head>
          <body onload="init()">
            <div id="header"><h1>sjc14-2.JPG</h1></div>
            <div id="subheader">Generated by <a href="http://www.maptiler.org/">MapTiler</a>/<a href="http://www.klokan.cz/projects/gdal2tiles/">GDAL2Tiles</a>, Copyright &copy; 2008 <a href="http://www.klokan.cz/">Klokan Petr Pridal</a>,  <a href="http://www.gdal.org/">GDAL</a> &amp; <a href="http://www.osgeo.org/">OSGeo</a> <a href="http://code.google.com/soc/">GSoC</a>
            
            </div>
            <div id="map"></div>
            <script type="text/javascript" >resize()</script>
          </body>

-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.osgeo.org/pipermail/openlayers-users/attachments/20110429/d9dcdedc/attachment-0001.html