[GIS] Displaying a KML File on a Vector Layer in OpenLayers

kmlopenlayers-2vector

This should be straight-forward, but I am beating my head over it. KML will not display. I have tried from same server and remote server to ensure it is not a cross-domain issue. The KML file loads into Google Earth okay. However, kmlcsv Convertor generates an error saying it cannot read the kml. I suspect the KML has something"advanced" in it, any KML gurus there can look and tell me whether it is the KML or my code?

OpenLayers Code

typhoon = new OpenLayers.Layer.Vector("typhoon", 
{
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.HTTP
      ({
        url: "http://xxx.ph/kmz/storm-track.KML",
     // url: "/storm-track.KML",
        format: new OpenLayers.Format.KML
         ({
           extractStyles: true, 
           extractAttributes: true,
           maxDepth: 10
           })
        }),
            eventListeners: {
        "loadstart": layerLoadStart,
        "loadend": layerLoadEnd
        },
        visibility: false
        });

map.addLayers([typhoon]);

KML File

    <kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom">
  <Document>
    <name>storm-track.KML</name>
    <Folder>
      <name>Actual Position</name>
      <Placemark>
        <name>Tropical Depression EMONG</name>
        <description>
          <p>Actual Position</p>
          <p>June 16, 2013 02:00 PM</p>
          <p>Source: PAGASA</p>
        </description>
        <Style>
          <IconStyle>
            <Icon>
              <href>blue_storm.png</href>
            </Icon>
          </IconStyle>
        </Style>
        <Point>
          <coordinates>128.6,12.2</coordinates>
        </Point>
      </Placemark>
      <Placemark>
        <name>Tropical Depression EMONG</name>
        <description>
          <p>Actual Position</p>
          <p>June 16, 2013 08:00 PM</p>
          <p>Source: PAGASA</p>
        </description>
        <Style>
          <IconStyle>
            <Icon>
              <href>blue_storm.png</href>
            </Icon>
          </IconStyle>
        </Style>
        <Point>
          <coordinates>128.6,12.8</coordinates>
        </Point>
      </Placemark>
      <Placemark>
        <name>Tropical Depression EMONG</name>
        <description>
          <p>Actual Position</p>
          <p>June 17, 2013 02:00 AM</p>
          <p>Source: PAGASA</p>
        </description>
        <Style>
          <IconStyle>
            <Icon>
              <href>blue_storm.png</href>
            </Icon>
          </IconStyle>
        </Style>
        <Point>
          <coordinates>127.5,13.5</coordinates>
        </Point>
      </Placemark>
      <Placemark>
        <name>Tropical Depression EMONG</name>
        <description>
          <p>Actual Position</p>
          <p>June 17, 2013 08:00 AM</p>
          <p>Source: PAGASA</p>
        </description>
        <Style>
          <IconStyle>
            <Icon>
              <href>blue_storm.png</href>
            </Icon>
          </IconStyle>
        </Style>
        <Point>
          <coordinates>127.1,13.7</coordinates>
        </Point>
      </Placemark>
      <Placemark>
        <name>Tropical Depression EMONG</name>
        <description>
          <p>Actual Position</p>
          <p>June 17, 2013 02:00 PM</p>
          <p>Source: PAGASA</p>
        </description>
        <Style>
          <IconStyle>
            <Icon>
              <href>blue_storm.png</href>
            </Icon>
          </IconStyle>
        </Style>
        <Point>
          <coordinates>126.9,13.8</coordinates>
        </Point>
      </Placemark>
      <Placemark>
        <name>Tropical Depression EMONG</name>
        <description>
          <p>Actual Position</p>
          <p>June 17, 2013 08:00 PM</p>
          <p>Source: PAGASA</p>
        </description>
        <Style>
          <IconStyle>
            <Icon>
              <href>blue_storm.png</href>
            </Icon>
          </IconStyle>
        </Style>
        <Point>
          <coordinates>126.5,14.5</coordinates>
        </Point>
      </Placemark>
      <Placemark>
        <name>Tropical Depression EMONG</name>
        <description>
          <p>Actual Position</p>
          <p>June 17, 2013 02:00 AM</p>
          <p>Source: PAGASA</p>
        </description>
        <Style>
          <IconStyle>
            <Icon>
              <href>blue_storm.png</href>
            </Icon>
          </IconStyle>
        </Style>
        <Point>
          <coordinates>126.4,15.5</coordinates>
        </Point>
      </Placemark>
      <Placemark>
        <name>Tropical Storm EMONG</name>
        <description>
          <p>Actual Position</p>
          <p>June 18, 2013 08:00 AM</p>
          <p>Source: PAGASA</p>
        </description>
        <Style>
          <IconStyle>
            <Icon>
              <href>blue_storm.png</href>
            </Icon>
          </IconStyle>
        </Style>
        <Point>
          <coordinates>126.5,17.0</coordinates>
        </Point>
      </Placemark>
      <Placemark>
        <name>Tropical Storm EMONG</name>
        <description>
          <p>Actual Position</p>
          <p>June 18, 2013 02:00 PM</p>
          <p>Source: PAGASA</p>
        </description>
        <Style>
          <IconStyle>
            <Icon>
              <href>blue_storm.png</href>
            </Icon>
          </IconStyle>
        </Style>
        <Point>
          <coordinates>126.6,17.9</coordinates>
        </Point>
      </Placemark>
    </Folder>
    <Folder>
      <name>Forecast Track</name>
      <Placemark>
        <name>Tropical Storm EMONG</name>
        <description>
          <p>Forecast Track</p>
          <p>June 19, 2013 02:00 PM</p>
          <p>Source: PAGASA</p>
        </description>
        <Style>
          <IconStyle>
            <Icon>
              <href>yellow_storm.png</href>
            </Icon>
          </IconStyle>
        </Style>
        <Point>
          <coordinates>126.0,22.1</coordinates>
        </Point>
      </Placemark>
      <Placemark>
        <name>Tropical Storm EMONG</name>
        <description>
          <p>Forecast Track</p>
          <p>June 20, 2013 02:00 PM</p>
          <p>Source: PAGASA</p>
        </description>
        <Style>
          <IconStyle>
            <Icon>
              <href>yellow_storm.png</href>
            </Icon>
          </IconStyle>
        </Style>
        <Point>
          <coordinates>128.5,26.4</coordinates>
        </Point>
      </Placemark>
    </Folder>
    <Folder>
      <name>Forecast Error</name>
      <Placemark>
        <Style>
          <IconStyle>
            <color>afffffff</color>
            <scale>1</scale>
          </IconStyle>
          <LineStyle>
            <color>afffffff</color>
            <width>1</width>
          </LineStyle>
          <PolyStyle>
            <color>afffffff</color>
          </PolyStyle>
        </Style>
        <LineString>
          <coordinates>127.078193099,22.1628395773 127.078193099,22.1628395773 127.072042175,22.2254450582 127.061650156,22.287568964 127.047052537,22.3489653891 127.028301635,22.4093909809 127.005466469,22.4686059153 126.978632571,22.5263748623 126.947901721,22.58246794 126.913391622,22.6366616505 126.875235491,22.6887397955 126.833581591,22.7384943653 126.788592683,22.7857264001 126.740445418,22.8302468168 126.689329656,22.8718771987 126.635447726,22.9104505438 126.57901362,22.9458119691 126.520252127,22.9778193649 126.459397918,23.0063439987 126.396694578,23.0312710637 126.332393582,23.0525001688 126.266753248,23.0699457693 126.200037633,23.0835375341 126.132515417,23.0932206482 126.064458747,23.0989560495 125.996142071,23.1007205965 125.927840957,23.098507169 125.859830907,23.0923246985 125.792386167,23.0821981298 125.725778553,23.0681683131 125.660276277,23.0502918277 125.596142807,23.0286407384 125.533635741,23.0033022854 125.473005717,22.9743785096 125.414495363,22.9419858156 125.358338281,22.9062544742 125.304758088,22.8673280681 125.253967502,22.8253628822 125.206167482,22.7805272429 125.161546433,22.7330008093 125.120279473,22.6829738197 125.082527754,22.6306462974 125.048437867,22.57622722 125.018141301,22.519933655 124.991753978,22.4619898671 124.969375862,22.4026264005 124.951090631,22.3420791403 124.936965428,22.2805883576 124.927050675,22.2183977421 124.921379965,22.1557534261 124.919970016,22.0929030043 124.922820697,22.030094553 124.929915118,21.9675756525 124.941219784,21.9055924173 124.956684816,21.8443885366 124.976244221,21.7842043285 124.999816233,21.7252758134 125.027303704,21.6678338071 125.058594543,21.6121030387 125.093562215,21.5583012948 125.132066279,21.5066385952 125.173952981,21.4573163995 125.219055879,21.4105268501 125.267196517,21.3664520527 125.318185127,21.3252633964 125.371821379,21.2871209158 125.427895148,21.2521726976 125.486187319,21.2205543329 125.546470619,21.1923884162 125.608510464,21.1677840943 125.672065841,21.1468366654 125.736890195,21.129627229 125.802732339,21.1162223889 125.869337376,21.1066740099 125.93644763,21.1010190277 126.003803587,21.0992793142 126.071144839,21.1014615978 126.138211033,21.1075574383 126.204742813,21.1175432586 126.270482771,21.13138043 126.335176383,21.1490154135 126.398572938,21.1703799557 126.460426462,21.1953913386 126.520496622,21.2239526823 126.578549617,21.2559533011 126.634359053,21.2912691098 126.687706788,21.3297630809 126.738383763,21.3712857509 126.786190801,21.4156757726 126.830939376,21.4627605148 126.872452353,21.512356704 126.910564689,21.5642711093 126.945124102,21.6183012661 126.975991693,21.6742362379 127.00304253,21.7318574123 127.026166185,21.7909393298 127.045267226,21.8512505425 127.060265647,21.9125544993 127.071097261,21.9746104543 127.077714023,22.0371743973 127.078193099,22.1628395773</coordinates>
        </LineString>
      </Placemark>
      <Placemark>
        <Style>
          <IconStyle>
            <color>afffffff</color>
            <scale>1</scale>
          </IconStyle>
          <LineStyle>
            <color>afffffff</color>
            <width>1</width>
          </LineStyle>
          <PolyStyle>
            <color>afffffff</color>
          </PolyStyle>
        </Style>
        <LineString>
          <coordinates>130.268094518,26.4663567297 130.268094518,26.4663567297 130.263946498,26.5326161245 130.256695452,26.5986617625 130.246348768,26.6643773949 130.232919335,26.7296471516 130.216425557,26.7943557469 130.196891364,26.8583886863 130.174346201,26.921632473 130.148825017,26.9839748143 130.120368234,27.0453048268 130.089021717,27.1055132412 130.054836716,27.1644926049 130.017869814,27.2221374832 129.978182849,27.2783446574 129.935842836,27.3330133208 129.890921866,27.386045271 129.843496999,27.4373450985 129.79365015,27.4868203715 129.741467951,27.5343818152 129.687041612,27.5799434871 129.630466763,27.6234229463 129.57184329,27.6647414161 129.511275159,27.7038239421 129.448870223,27.740599541 129.384740024,27.7750013444 129.318999588,27.8069667338 129.251767201,27.8364374673 129.183164182,27.8633597992 129.113314646,27.8876845892 129.04234526,27.9093674043 128.970384988,27.9283686094 128.897564835,27.9446534503 128.824017576,27.9581921249 128.74987749,27.9689598455 128.675280083,27.9769368906 128.600361807,27.9821086455 128.525259781,27.9844656333 128.450111504,27.9840035345 128.375054572,27.9807231959 128.300226391,27.9746306291 128.225763892,27.9657369977 128.151803248,27.9540585943 128.078479594,27.939616806 128.005926745,27.9224380703 127.934276927,27.9025538198 127.863660504,27.880000417 127.794205715,27.8548190792 127.726038419,27.8270557929 127.65928184,27.7967612194 127.59405633,27.7639905909 127.53047913,27.7288035972 127.468664148,27.6912642643 127.40872174,27.6514408248 127.350758506,27.6094055796 127.294877094,27.5652347529 127.241176014,27.51900834 127.189749467,27.4708099479 127.140687177,27.4207266302 127.094074246,27.3688487161 127.049991011,27.3152696336 127.008512916,27.2600857279 126.9697104,27.2033960763 126.93364879,27.1453022973 126.900388211,27.0859083576 126.869983505,27.0253203755 126.842484163,26.9636464213 126.81793427,26.9009963157 126.796372459,26.8374814266 126.777831877,26.7732144642 126.762340162,26.708309275 126.749919432,26.6428806357 126.740586284,26.577044046 126.734351801,26.5109155232 126.731221572,26.4446113951 126.73119572,26.3782480962 126.734268942,26.3119419629 126.740430552,26.2458090322 126.749664537,26.1799648412 126.761949624,26.1145242289 126.777259346,26.0496011409 126.795562126,25.9853084366 126.816821363,25.9217576997 126.840995519,25.8590590515 126.868038229,25.7973209686 126.897898398,25.7366501033 126.93052032,25.6771511095 126.96584379,25.6189264709 127.003804233,25.5620763359 127.044332827,25.5066983551 127.08735664,25.4528875247 127.132798766,25.4007360351 127.180578465,25.3503331236 127.230611313,25.3017649337 127.282809349,25.2551143788 127.337081228,25.2104610125 127.393332377,25.1678809034 127.451465159,25.1274465173 127.511379029,25.089226604 127.572970703,25.0532860913 127.636134326,25.0196859845 127.70076164,24.9884832723 127.766742157,24.9597308398 127.833963332,24.933477387 127.902310741,24.9097673546 127.971668256,24.8886408559 128.041918224,24.8701336163 128.112941648,24.8542769182 128.184618369,24.8410975542 128.256827245,24.8306177859 128.329446336,24.8228553106 128.402353088,24.8178232342 128.475424514,24.8155300517 128.548537384,24.8159796339 128.621568402,24.819171222 128.694394396,24.8250994284 128.766892503,24.833754245 128.838940348,24.8451210585 128.910416234,24.8591806722 128.98119932,24.8759093352 129.051169808,24.8952787785 129.120209122,24.9172562577 129.188200088,24.941804603 129.255027119,24.9688822754 129.320576386,24.9984434304 129.384735999,25.0304379877 129.447396183,25.064811708 129.508449447,25.1015062758 129.567790762,25.1404593895 129.625317721,25.1816048574 129.680930717,25.2248726994 129.734533097,25.2701892563 129.78603133,25.3174773035 129.835335164,25.3666561725 129.882357778,25.4176418763 129.927015941,25.4703472421 129.969230155,25.5246820489 130.008924799,25.5805531701 130.046028273,25.6378647224 130.080473135,25.6965182192 130.112196227,25.7564127284 130.141138805,25.8174450365 130.167246662,25.8795098156 130.190470242,25.9424997958 130.21076475,26.0063059415 130.228090257,26.0708176319 130.242411796,26.1359228444 130.253699458,26.2015083425 130.26192847,26.2674598663 130.267079275,26.3336623264 130.268094518,26.4663567297</coordinates>
        </LineString>
      </Placemark>
    </Folder>
    <Folder>
      <name>PAR</name>
      <Placemark>
        <Style>
          <LineStyle>
            <color>afffffff</color>
            <width>3</width>
          </LineStyle>
        </Style>
        <LineString>
          <coordinates>120,25,0 135,25,0 135,5,0 115,5,0 115,15,0 120,21,0 120,25,0</coordinates>
        </LineString>
      </Placemark>
    </Folder>
    <Folder>
      <name>Actual Track</name>
      <Placemark>
        <Style>
          <LineStyle>
            <color>50b43c14</color>
            <width>3</width>
          </LineStyle>
        </Style>
        <LineString>
          <coordinates xmlns:py="http://codespeak.net/lxml/objectify/pytype" py:pytype="str">128.6,12.2 128.6,12.8 127.5,13.5 127.1,13.7 126.9,13.8 126.5,14.5 126.4,15.5 126.5,17.0 126.6,17.9</coordinates>
        </LineString>
      </Placemark>
    </Folder>
    <Folder>
      <name>Forecast Track</name>
      <Placemark>
        <Style>
          <LineStyle>
            <color>5014f0f0</color>
            <width>3</width>
          </LineStyle>
        </Style>
        <LineString>
          <coordinates xmlns:py="http://codespeak.net/lxml/objectify/pytype" py:pytype="str">126.6,17.9 126.0,22.1 128.5,26.4</coordinates>
        </LineString>
      </Placemark>
    </Folder>
  </Document>
</kml>

Best Answer

Ok, I have it solved, for future users here was the issue

I thought my cross domain was working ok as the browser sent a preflight to the third party server which returned the following

[00:13:50.018] OPTIONS http://clixxxxex.ph/kmz/storm-track.KML [HTTP/1.1 200 OK 367ms]

In fact, this was just the Preflight Request, Openlayers never issued the GET

When I moved the file to IIS on my server, I just woke up that there was no mime type defined for kml/kmz by default because Firefox was issuing the following in the console

[00:10:48.424] GET http://dev.XXX.net/storm-track.KML [HTTP/1.1 200 OK 199ms]
[00:10:48.568] mismatched tag. Expected: </base>. @ http://dev.XXX.net/:37

Quite a bit of head scratching until I realized it was trying to interpret the file as a html file.

Added Mme Types as follows to IIS

application/vnd.google-earth.kml+xml    kml
application/vnd.google-earth.kmz        kmz

Voila, I can see the kml now.

Thanks to all who helped ..