none
GeoXML Read Problem RRS feed

  • Question

  • Have the following URL I am trying to read

    http://www.spc.noaa.gov/products/outlook/day1otlk_cat.kml

    trying to access with this code....

            var layer = " ";

            function readXml(xmlUrl, corsEnabled) {
                if (corsEnabled) {
                    layer.setDataSource(xmlUrl);
                } else {
                    //Set the URL of the geo XML file as the data source of the layer.
                    //Since we know the URL's are external hosted and may not have CORs enabled, we can pass them through the proxy service.
                    layer.setDataSource(proxyService + encodeURIComponent(xmlUrl), true);
                }
            }

                           Microsoft.Maps.loadModule('Microsoft.Maps.GeoXml', function () {

                               alert("before XML call");
                               readXml('http://www.spc.noaa.gov/products/outlook/day1otlk_cat.kml', false);
                           alert(layer);
                           map.layers.insert(layer);

    This code does not make it back from readXML...  What am I missing?

    Wednesday, March 28, 2018 2:10 PM

Answers

  • It looks like you need to set corsEnabled to 'true' when passing into your readXml function. 

    readXml('http://www.spc.noaa.gov/products/outlook/day1otlk_cat.kml', true)

    Here is working sample code for reference:

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <script type='text/javascript'>
        var map, layer;
        //Get the absolute path to the proxy service
        var proxyService = window.location.href.substring(0, window.location.href.indexOf("/", 8)) + '/GeoXml/GeoXmlLayer%20-%20Cross%20Domain/GeoXmlProxyService.ashx?url=';
           
        function GetMap() {
            map = new Microsoft.Maps.Map('#myMap', {
                zoom: 1
            });
            //Load the GeoXml module.
            Microsoft.Maps.loadModule('Microsoft.Maps.GeoXml', function () {
                //Create an instance of the GeoXmlLayer.
                layer = new Microsoft.Maps.GeoXmlLayer();
                //Add the layer to the map.
                map.layers.insert(layer);
            });
        }
        function readXml(xmlUrl, corsEnabled) {
            if (corsEnabled) {
                layer.setDataSource(xmlUrl);
            } else {
                //Set the URL of the geo XML file as the data source of the layer.
                //Since we know the URL's are external hosted and may not have CORs enabled, we can pass them through the proxy service.
                layer.setDataSource(proxyService + encodeURIComponent(xmlUrl), true);
            }
        }
        </script>
        <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=[BingMapsKey]' async defer></script>
    </head>
    <body>
        <div id="myMap" style=";width:800px;height:600px;"></div>
    
        <div style="margin-top:10px;">
            
            <br/>
            CORs Enabled:        
            <input type="button" value="Test" onclick="readXml('http://www.spc.noaa.gov/products/outlook/day1otlk_cat.kml', true);" />
            
            <br />
            Layer Options: 
            <input type="button" onclick="layer.clear();" value="Clear" />
            <input type="button" onclick="layer.setVisible(false);" value="Hide" />
            <input type="button" onclick="layer.setVisible(true);" value="Show" />
        </div>
    
      
    </body>
    </html>

    Hope that helps!


    Wednesday, March 28, 2018 3:08 PM
    Moderator