Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

I need to overlay KML polygons on basic map in OpenLayers. I need that KML is visible on every zoom level. I did some coding, but my KML is not showing up. What am I doing wrong? Thanks.

<!DOCTYPE html>
<html>
  <head>
    <title>OpenLayers Tutorial - Basic Map Setup</title>
    <script src="http://openlayers.org/api/OpenLayers.js"></script>
    <script type="text/javascript">
        var map, baseLayer;
        function init(){
            map = new OpenLayers.Map('map');     

            baseLayer = new OpenLayers.Layer.WMS("OpenLayers WMS", "http://labs.metacarta.com/wms/vmap0", {layers:"basic"});
            map.addLayer(baseLayer);

            kml1 = new OpenLayers.Layer.Vector("KML", {
            strategies: [new OpenLayers.Strategy.Fixed()],
            protocol: new OpenLayers.Protocol.HTTP({
                url: "kmls/MobileCoverage.kml",
                format: new OpenLayers.Format.KML({
                    extractStyles: true, 
                    extractAttributes: true,
                    maxDepth: 2
                })
            })
        });
        map.addLayer(kml1);

       map.zoomToMaxExtent();            
        }
    </script>

    <style>
    @media screen
    {
        #map{width: 800px; height:500px; border: 2px solid black;}
    }
    </style>
  </head>
  <body onload="init()">
    <h3>OpenLayers Testing</h3>
    <div id="map"></div>
  </body>
</html>
share|improve this question
    
My mistake, I got mixed up comparing the open and close parens. –  Get Spatial Aug 21 '12 at 17:52
1  
Just a thought after looking at the .jpg of the data you posted. Have you made sure that your data is clean. There look to be some pretty complex polygons there, and I see a couple places where there could be crossovers within the polygon geometry. I'm not sure how well that sort of thing is handled by OpenLayers, but it might be something to check. –  Get Spatial Aug 21 '12 at 18:10
add comment

5 Answers 5

up vote 2 down vote accepted

I tried your code and KML and it worked fine for me. Are you seeing the push pin? If you're not seeing anything at all, I would verify the location/spelling of your KML file.

At map.zoomToMaxExtent(); you can't see it because the push pin is blocking it:

enter image description here

But zoom in and you should see it:

enter image description here

share|improve this answer
    
Interesting, thanks. Tell me, where did you put my KML file? I'm using it from the folder "kmls" where is my index.html. I don't see any pin or polygon. –  againstflow Aug 21 '12 at 19:09
    
That's the same thing I did, placed it in "kmls" folder in root. You know... there was one more thing I did (not sure if this did anything) but I opened your KML in <oXygen/> XML Editor and it complained about a very long line and did linewrap or something (not sure) but I will paste the KML in my response incase you want to try that KML. –  CaptDragon Aug 21 '12 at 19:13
    
Yes, please do that. Thank you so much. –  againstflow Aug 21 '12 at 19:19
    
Okay, I'm having trouble finding somewhere to place the very large KML file (1.3GB). However when I placed my example on a public web hosting, IT DOES NOT WORK. It only works when I point to the local file in firefox to this address file:///D:/temp/jsdev/kml_test.html So i don't think it's the KML anymore. Maybe it's something else which I don't know, but try locally how it works for me. –  CaptDragon Aug 21 '12 at 19:30
    
It is 1.25 MB, not GB :) You don't have dropbox or google drive? –  againstflow Aug 21 '12 at 19:36
show 8 more comments

The Example here http://harrywood.co.uk/maps/examples/openlayers/kml.html

    map = new OpenLayers.Map("mapdiv");
map.addLayer(new OpenLayers.Layer.OSM());

var kmllayer = new OpenLayers.Layer.Vector("KML", {
        strategies: [new OpenLayers.Strategy.Fixed()],
        protocol: new OpenLayers.Protocol.HTTP({
            url: "./mapperz-kml-example.kml",
            format: new OpenLayers.Format.KML({
                extractStyles: true, 
                extractAttributes: true,
                maxDepth: 2
            })
        })
    });

has points lines and polygons as KML you can view the code to inspect what you are trying to do. The KML should be on a public webserver or generated from a database.

share|improve this answer
    
Thanks. So KML can't be in the same folder with index.html and OpenLayers.js, it needs to be on a webserver or in a database? –  againstflow Aug 20 '12 at 13:38
    
locally (localhost it can be) but kml in this case seems to work better from another source/location (openlayers bug?) –  Mapperz Aug 20 '12 at 13:40
    
Is it ok to upload it to Dropbox and get a link to KML? I tried that, but KML it's not showing neither. –  againstflow Aug 20 '12 at 14:28
1  
Does your KML have anything other than plain polygons? no network/overlays included as they are not supported. –  Mapperz Aug 20 '12 at 15:37
    
It looks like this. What do you think? i50.tinypic.com/1gcc7.jpg –  againstflow Aug 20 '12 at 17:13
show 5 more comments

I think validating is essential to get past the 'is it the kml point' I recently had some attribute issue where a CDATA block had to be used to make it validate. I use the same KML on either openlayers maps and in google earth. I noticed that google earth is rather picky, less forgiving than using openlayers kml support.

Hence I make sure that the kml (dynamically generated) is compliant by testing it in google earth, if it opens there, it should be ok. I also use google's validator to make sure I don't waste time on any format issues. It wouldn't surprise me to see that Chrome xml parsing pickyness is the cause. I use FireBug to verify what the browser did, it's available under chrome, although less functional than in firefox.

share|improve this answer
add comment

i'm very interested in the example above. i try to replicate in my local pc (simulated server) but it doesnt work well. I is possible to send or post all the files involve in the example. Best regrads RD

share|improve this answer
add comment

The clearest first problem is that your Javascript is wrong: the function init() will run when the page is loaded, while the line map.addLayer(kml1) will run as soon as the script is parsed. So move the map.addLayer(kml1) line into the init function to get back on the right track.

share|improve this answer
    
Hm, but it is inside init() function. Can you explain more detailed? Thanks. –  againstflow Aug 20 '12 at 13:17
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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